首页 > 其他分享 >Hexo博客Next主题更换cdn加速访问

Hexo博客Next主题更换cdn加速访问

时间:2024-06-18 19:22:04浏览次数:18  
标签:gitalk Hexo cdn js next theme mathjax Next

有时候访问我的博客时,总是会出现cdn.jsdelivr.net无法访问或者访问速度过慢的情况。我的博客园使用的是BNDong/Cnblogs-Theme-SimpleMemory主题,也遇到的这样的情况。经过我的一番折腾之后,将js文件转移到了我自己的OSS中,并且又经过了我的一番折腾之后,设置好了跨域资源共享(CORS)策略,让我的博客访问的时候不会时好时坏了。

现在我搭建了Hexo博客,使用Next主题,其中也使用了很多jsdelivr的托管文件。有时候别人会出现访问慢、卡、进不去的情况。我打算也更换成我的OSS。

好在Next主题配置文件_config.yml中就有相关的配置。

查看相关代码

theme/next/_config.yml中搜索cdn,你会在第485行找到:

# ---------------------------------------------------------------
# Third Party Plugins & Services Settings
# See: https://theme-next.org/docs/third-party-services/
# More plugins: https://github.com/theme-next/awesome-next
# You may need to install dependencies or set CDN URLs in `vendors`
# There are two different CDN providers by default:
#   - jsDelivr (cdn.jsdelivr.net), works everywhere even in China
#   - CDNJS (cdnjs.cloudflare.com), provided by cloudflare
# ---------------------------------------------------------------

其中提到如果需要更换cdn,去找找vendors吧。

我们继续搜索vendors,可以在第881行找到。

警告!

#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! 请勿编辑以下设置
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#除非你知道自己在做什么
#! See: https://theme-next.org/docs/advanced-settings
#! ---------------------------------------------------------------

下面就有修改cdn链接的地方,并且也给出了默认的链接。我们可以选择需要托管的js替换。

替换链接

Mathjax

这个出问题最多了。

我们先使用gitmathjaxclone下来。

git clone https://github.com/mathjax/MathJax.git mathjax

并将mathjax文件夹上传到OSS当中。一共146个文件,总大小175MB左右。心在滴血啊……

根据_config.yml,我们需要导入的链接是:

  # mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

进入上传目录下,找到mathjax/es5/tex-mml-chtml.js,复制其链接并粘贴到配置文件中即可。

最后,别忘记去OSS后台修改CORS。

gitalk

git clone https://github.com/gitalk/gitalk.git gitalk

然后上传dist文件夹,并根据所需:

  # Gitalk
  # gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
  # gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css

进行修改。

不过我没有找到dist/gitalk.min.css,我选择了dist/gitalk.css,效果一样。

遇到Github-CORS问题

如何在Cloudflare worker上搭建cors-anywhere代理 | Spirit's Eden (spiritfr.eu.org)

换成giscus

因为gitalk问题还是太多,主要在于其长时间未更新,以及其proxy的问题。如果有好的解决方案欢迎给我评论~

之后还是换成了giscus。与gitalk不同,它是基于Discussions的。

中途也遇到了一些问题。

安装组件\(^{[2]}\)

npm install [email protected] --save

这里一定要注意版本号。如果你配置好了之后出现白屏,那么可能是这里的问题。需要看看你的next使用的giscus是多少?

添加代码

_config.yml中,添加如下代码

giscus:
  enable: true
  repo: xxx/xxx
  repo_id: xxx
  category: Announcements
  category_id: xxx
  # Available values: pathname | url | title | og:title
  mapping: pathname
  # Available values: 0 | 1
  reactions_enabled: 1
   # Available values: 0 | 1
  emit_metadata: 1
  theme: light
  # Available values: en | zh-CN
  lang: zh-CN
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy

其中的配置项可以查看官网配置清单

参考文献

[1] 托管您自己的mathjax副本

[2] 个人blog搭建指南github pages和hexo-theme-next

标签:gitalk,Hexo,cdn,js,next,theme,mathjax,Next
From: https://www.cnblogs.com/Vanilla-chan/p/18254972/Hexo-Blog-Next-Theme-Replacement-cdn

相关文章

  • 如何确保pcdn的稳定性?(壹)
    确保PCDN的稳定性是一个重要任务,涉及多个方面的操作和考虑。以下是一些建议,帮助你确保PCDN的稳定性:一.选择合适的服务器与硬件:选择稳定可靠的服务器供应商和硬件设备,确保服务器具有高可用性和容错能力。根据业务需求和预期流量,合理规划硬件配置,包括CPU、内存、存储和网络带宽......
  • 小白next项目初步上手搭建一个随机社会信用代码生成及验证功能网站
    先看看效果网址是:https://xinyongdaima.aitoolpro.work/#主要实现功能实现随机社会信用代码生成及验证;无数据存储功能;技术栈next.jstailwind工具sublimeChatGPT4o步骤准备工作:需要电脑安装node生成项目打开终端并运行以下命令:npxcreate-next-app@late......
  • CDN,负载均衡器,反向代理的异同
    内容分发网络(CDN)功能和作用:内容缓存和分发:CDN在全球多个节点上缓存静态内容(如图像、CSS、JavaScript文件),将内容分发到离用户最近的节点,以减少延迟并加快加载速度。负载分担:通过将请求分发到多个缓存节点,CDN可以减少源服务器的负载,从而提高整体系统的性能和可用性。......
  • 响应式布局mediaquery使用,鸿蒙NEXT星河版
    一、导入方法,定义响应式接口//组件的封装importmediaqueryfrom'@ohos.mediaquery'exportinterfaceLandType{isLandScape:boolean}二、监听当前是否是横屏状态//监听当前是否是横屏状态@StatelandRes:LandType={isLandScape:false}liste......
  • ArkTS本地化数据库SqlLight使用,鸿蒙NEXT星河版API(11)
    RelationalStore提供了一套完整的对本地数据库进行管理的机制,对外提供了一系列的增、删、改、查等接口,也可以直接运行用户输入的SQL语句来满足复杂的场景需要。谓词:数据库中用来代表数据实体的性质、特征或者数据实体之间关系的词项,主要用来定义数据库的操作条件。结果......
  • 百度云CDN怎么样?对新站有什么好处?
    百度云CDN是百度智能云提供的内容分发网络服务•优势:•收录快:小编在2024/6月份一共注册3个域名全部已备案,通过百度云CDN内容分发,大部分3天内收录仅限于WWW与根域名。•安全稳定:创新智能的安全防护思路,拒绝一刀切式的安全防护,引入深度学习引擎技术,守护财富安全。•......
  • 初学者也能轻松上手!SCDN使用教程,让你的网站焕然一新!
    在当今数字化时代,网站的安全性和稳定性对于企业和个人而言至关重要。然而,面对日益复杂的网络攻击,如何确保网站的安全运行成为了一个不小的挑战。幸运的是,有了SCDN(内容分发网络)的帮助,即使是初学者也能轻松应对这些挑战,让网站焕然一新。一、什么是SCDN?SCDN(内容分发网络)是一种......
  • hexo 实战:(二)个人独立博客豪华装修合集
    前言上次介绍了使用Hexo+GitHubPages,零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的,不管你是什么行业,只要想打造个人IP,又不太想受博客平台约束,那么读完后动手操作一下也能轻松完成。而这次呢,上篇也说了Hexo会出三篇内容,这里就要在前者基础上做进一......
  • 零基础-零成本搭建个人博客-Hexo-基于windows10
    下载nodejs #1、访问官网:https://nodejs.org/en-下载LTS版本下载后安装下一步、选择安装路径即可、注意要选择addtopath(这是npm下载包的路径)安装hexo安装成功后在cmd中输入npm验证一下:按Win+R键、弹出后输入cmd创建workspace:需要安装hexo下载的nmp包F:\worksp......
  • 信息打点-协议应用_内网资产_CDN_WAF_负载均衡_防火墙
    服务信息获取-协议应用&内网资产常见端口默认对应的服务:特殊服务端口:端口扫描工具:旁注查询旁注查询,又称为旁站查询或同服务器网站查询,是一种信息安全和网络侦查技术,主要用于发现与目标网站托管在同一服务器上的其他网站。这种查询的目的通常与网络安全测试、情报收集......