尝试折腾了下用 Hexo-Next-Theme 搭建的博客
原文
https://leay.net/2020/03/23/hexo-next/
只留必要依赖
配置文件 theme/_config.yml 中不必要的依赖不要添加。
比如对我来说，3D 效果之类的都没必要，所以 three.js、canvas_nest.js 啥的都不必开启。
最后用到的有：
- quicklink：预加载用户视区中的链接
- pjax：站内页面刷新
- lazyload：图片懒加载
- mediumzoom：查看大图
quicklink 我没啥感觉；
pjax，由于网络原因，我偶尔会觉得浏览器（网页）卡死了；
lazyload 和 mediumzoom 有点效果，不过虽然我这也没几张图就是了……
能上 CDN 的先上 CDN
前提：我把博客放 Github Pages 的。
看的这篇文章，尝试了下：JsDelivr 全站托管
js、css、images
在 theme/_config.yml 下修改 Assets：
css: //cdn.jsdelivr.net/gh/hqweay/hqweay.github.io@master/css
js: //cdn.jsdelivr.net/gh/hqweay/hqweay.github.io@master/js
images: //cdn.jsdelivr.net/gh/hqweay/hqweay.github.io@master/images
avater、favicon
favicon、avatar 不包含在 images 里，需要单独改下。
images 仅包含文章引用的本地图片。
本地搜索
如果开启了本地搜索，加载 search.xml 也不会走 CDN。
手动改下 js/local-search 里 fetchData。如下：
const fetchData = () => {
- fetch(CONFIG.root + searchPath)
+ fetch("https://cdn.jsdelivr.net/gh/hqweay.github.io@master/" + searchPath)
有变动需求可以将 https://…… 这一串配置在 _config.yml 或 theme/_config.yml。
字体
感觉没必要配置。
需要的话可以用 前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务 这位大佬的。
font:
enable: true
# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: //fonts.loli.net
各种依赖
在 theme/_config.yml 的 vendors 配置。
也全用 JsDelivr 的比较好。
我用到的一些依赖：
# 主题样式为 minimal 时，显示侧边栏信息会用到。
anime: //cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js
# 图标。（比如侧边栏的 social links）——如果不用 icon，那就不必引……
fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js
【感觉没效果啊】Cloudflare
域名通过 Cloudflare 解析，可以设置全站用 Cloudflare 的 CDN。
我试了下，然后通过 PageSpeed Insights 测试，跑到 99 分了……
但是感觉没啥用，我使用的网络下，甚至比直接托管到 Github 还慢……（不知道是不是错觉）
【感觉没效果啊】Netlify
用 Netlify 托管，效果差异也不大。
PS：Netlify 绑定自己域名时会需要一个 _redirects 文件。把该文件放 source 下，默认还不会上传至仓库，因为 Hexo 把以 _ 开头的文件夹和文件忽略了。
需要在 _config.yml 配置渲染时把该文件包含进来。
# Include/Exclude Files/Folders
include:
- "_redirects"
国内托管服务
Coding 之类的。
此贴终结……
字体配置
字体的相关配置见：Hexo Next 主题字体相关配置
归档页做首页
把 layout/archive.swig 改为 layout/index.swig 就行了。
不过注意此时首页的 meta 信息是 archive （归档）……
要做个清爽合格的首页，可以把原 index.swig 的 meta 信息拷贝到新 index.swig 下。
// new index.swig (archive.swig)
- {% block title %}{{ __('title.archive') }} | {{ title }}{% endblock %}
+ {% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}
静态资源压缩
用的 hexo-all-minifier 。
Open Graph
The Open Graph protocol
简单来说就是向网页添加一些 meta 标签。类似这样：
Hexo 提供 open_graph() 可以向网页直接插入 Open Graph 信息。
遇到个问题，open_graph() 不能给网页设置一个默认的 og:image。
查看 node_modules/hexo/lib/plugins/helper/open_graph.js：
let images = options.image || options.images || page.photos || [];
ol:image 优先从传入参数找，找不到就会用文章内容里的图片，还没有的话，那就没有了。
于是尝试加了个：
let default_image = "https://leay.net/images/avatar"
let images = options.image || options.images || page.photos || default_image || [];
这样，前面都找不到，就会使用我定义的图片，而不是直接没有 ol:image 标签。
当然，为了维护，可以把默认图片的链接配置到 _config.yml 或 theme/_config.yml。
PS：我没仔细研究，可能 Open Graph 不建议本来就不带图片的网页在分享时带上一张图片？但做 SEO 往往建议每个页面都带上这些信息……
hexo-next-theme 往网页插入 Open Graph 信息也是用的 open_graph()，所以如果有这个需求得改动 Hexo 的 open_graph.js 。
其它
hexo-asset-image
下午发现自己博客上的本地图片显示出问题了，折腾了下，发现是因为之前开启了 hexo-next-theme 的图片懒加载。
hexo-next-theme 使用的图片懒加载插件是 lozad.js 。这个插件会将 img 的 src 属性改为 data-src。hexo-asset-image 没有这样的判断，所以不会处理。
改了下，想提个 PR 来着，发现原插件仓库已经被归档了……
于是 fork 了一份：hexo-asset-image