尝试折腾了下用 Hexo-Next-Theme 搭建的博客

发表于 更新于

只留必要依赖

配置文件 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：

1
2
3
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。如下：

1
2
3
 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 国内加速服务 这位大佬的。

1
2
3
4
font:
  enable: true
  # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
  host: //fonts.loli.net

各种依赖

在 theme/_config.yml 的 vendors 配置。

也全用 JsDelivr 的比较好。

我用到的一些依赖：

1
2
3
4
5
6
7
8
# 主题样式为 minimal 时，显示侧边栏信息会用到。
anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/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 配置渲染时把该文件包含进来。

1
2
3
# Include/Exclude Files/Folders
include:
  - "_redirects"

国内托管服务

Coding 之类的。

此贴终结……

字体配置

字体的相关配置见：Hexo Next 主题字体相关配置

归档页做首页

把 layout/archive.swig 改为 layout/index.swig 就行了。

不过注意此时首页的 meta 信息是 archive （归档）……

要做个清爽合格的首页，可以把原 index.swig 的 meta 信息拷贝到新 index.swig 下。

1
2
3
4
5
// 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 标签。类似这样：

1
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Hexo 提供 open_graph() 可以向网页直接插入 Open Graph 信息。

遇到个问题，open_graph() 不能给网页设置一个默认的 og:image。

查看 node_modules/hexo/lib/plugins/helper/open_graph.js：

1
let images = options.image || options.images || page.photos || [];

ol:image 优先从传入参数找，找不到就会用文章内容里的图片，还没有的话，那就没有了。

于是尝试加了个：

1
2
3
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

关于本博客的样式

本博客的样式抄袭了 木子 和 零の轨迹，两位大佬都公布了自己的源码，分别在 muzi502/blog 和 Elietio/Elietio.github.io ，有需要的可以参考。原理就是自定义 custom_file_path ，即 source/_data/** ，通过自定义的 CSS 覆盖默认样式。