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

只留必要依赖

配置文件 theme/_config.yml 中不必要的依赖不要添加。

比如对我来说,3D 效果之类的都没必要,所以 three.jscanvas_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-searchfetchData。如下:

1
2
3
 const fetchData = () => {
- fetch(CONFIG.root + searchPath)
+ fetch("https://cdn.jsdelivr.net/gh/hqweay.github.io@master/" + searchPath)

有变动需求可以将 https://…… 这一串配置在 _config.ymltheme/_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.ymlvendors 配置。

也全用 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.swigmeta 信息拷贝到新 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
let default_image = "https://leay.net/images/avatar"
let images = options.image || options.images || page.photos || default_image || [];

这样,前面都找不到,就会使用我定义的图片,而不是直接没有 ol:image 标签。

当然,为了维护,可以把默认图片的链接配置到 _config.ymltheme/_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 。这个插件会将 imgsrc 属性改为 data-src。hexo-asset-image 没有这样的判断,所以不会处理。

改了下,想提个 PR 来着,发现原插件仓库已经被归档了……

于是 fork 了一份:hexo-asset-image