解决 Hexo 默认模板在国内网络环境无法加载 index.min.css 的问题

Hexo 默认模板使用了远程CDN存放 CSS 文件,其中一个文件是index.min.css,而我碰到的情况也只有这个文件无法加载。在网上也看到有碰到其他更多文件无法加载的,可能版本不同情况会有所不同,请自行斟酌参考。

我使用了以下方法来解决这个问题:

  1. 把这个文件index.min.css下载到本地,并存入项目的【source】文件夹下面。
  2. 文件名不变,这个文件夹相当于是生成及部署后的网站根目录,我也懒得放其他目录了,就放在根目录吧。
  3. 修改模板文件,我的项目在 \themes\bg7iae\layout_partial\head.ejs,在这里 bg7iae 就是我的模板文件夹。这里需要修改 head.ejs 文件:
    1
    2
    3
    <% if (config.highlight.enable){ %>
    <%- css('https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css') %>
    <% } %>
    修改为:
    1
    2
    3
    <% if (config.highlight.enable){ %>
    <%- css('/index.min.css') %>
    <% } %>
    修改完成保存。
  4. 在项目目录命令行依次执行:
    1
    2
    3
    4
    hexo clean
    hexo g
    hexo d
    hexo server
    这时候打开 http://localhost:4000/ 应该就可以看到正常加载了。
  5. 实际是因为打开了 highlight 代码高亮功能,这里才会需要调用到远程的 CSS。我现在是把远程 CSS 文件下载到本地,并且修改文件为引用本地文件,就解决这个问题了。