如题

把自己制作的HTML5网页传到自己的 hexo 博客上

  1. 在网上搜索了一下，有的说加 skip_render: [p//api/*.html,p//api/**]，将html文件加入skip_render，这样，它们就不会被hexo渲染了。
  2. 上面的方法我没试，不过，还有一种更加简单粗暴的方式（亲测好使），将html文件直接放到/theme/下你的主题目录下的source文件夹中，该文件夹中的文件hexo会直接复制到public中，不做任何渲染。

执行 hexo g 报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 11, Column 430]
  tag name expected
    at Object._prettifyError (C:\workspace\tech\node_modules\_nunjucks@3.1.3@nunjucks\src\lib.js:36:11)
    at Template.render (C:\workspace\tech\node_modules\_nunjucks@3.1.3@nunjucks\src\environment.js:524:21)
    at Environment.renderString (C:\workspace\tech\node_modules\_nunjucks@3.1.3@nunjucks\src\environment.js:362:17)
    at Promise (C:\workspace\tech\node_modules\_hexo@3.7.1@hexo\lib\extend\tag.js:66:9)
    at Promise._execute (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\debuggability.js:303:9)
    at Promise._resolveFromExecutor (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\promise.js:483:18)
    at new Promise (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\promise.js:79:10)
    at Tag.render (C:\workspace\tech\node_modules\_hexo@3.7.1@hexo\lib\extend\tag.js:64:10)
    at Object.tagFilter [as onRenderEnd] (C:\workspace\tech\node_modules\_hexo@3.7.1@hexo\lib\hexo\post.js:230:16)
    at Promise.then.then.result (C:\workspace\tech\node_modules\_hexo@3.7.1@hexo\lib\hexo\render.js:65:19)
    at tryCatcher (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\promise.js:693:18)
    at Async._drainQueue (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\async.js:133:16)
    at Async._drainQueues (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\workspace\tech\node_modules\_bluebird@3.5.1@bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:794:20)
    at tryOnImmediate (timers.js:752:5)
    at processImmediate [as _immediateCallback] (timers.js:729:5)

因为有一个文件里写了正则表达式，所以，解析的时候会出错。
解决办法，就是，找到写正则表达式的地方，以源码方式引用即可。

解决左侧菜单图标不显示的问题

现象

我用的主题是 indigo。该主题使用的图标库是 fontawesome.com，添加新菜单时，发现按原来的方式添加，有的图标能显示，有的则不能显示。

一开始怀疑使用了收费图标，但是在网站的左侧是可以选择“Free”来搜索的，所以，排除这个问题。

F12 之后，查看该网站上图标用的 css，发现与 indigo 主题使用的不一样，所以，仔细研究了一下，原来，indigo 作者在 menu.ejs 文件中给菜单图标样式添加了前缀 icon icon-lg icon-，使用时，只要写后面不一样的部分，倒是比较方便。

但是，这样带来一个问题，就是只能使用样式以 icon icon-lg icon- 开头的图标

解决

为了解决这个问题，需要将这个前缀去掉，修改文件： themes\indigo\layout\_partial\menu.ejs

1
2
3
<i class="icon icon-lg icon-<%= i %>"></i>
# 改为
<i class="<%= i %>"></i>

然后，在原来可以正常显示的图标的菜单定义前添加前缀 icon icon-lg icon-，使用新图标时，参照官网的图标样式，把样式写全即可。

例如，我现在需要在新菜单前添加一个 react 图标，首先，从官网查看到，react 图标样式如下：

1
<i class="fab fa-react" style="font-size: 48px;"></i>

那么，新菜单名，应该使用 fab fa-react，不过，还要在前面添加 icon 才能对齐，最终，新菜单定义如下：

1
2
3
icon fab fa-react:
  text: react stack
  url: /react/index

到了这一步，还没完成，还需要引用最新样式。

引用官方最新样式

为了可以随意引用 fontawesome.com 图标库，需要添加 fontawesome 最新的样式，建议直接使用在线的样式即可，这样也不用考虑字体的问题。

引用方式，参照官网，官网是这样说的：Font Awesome’s Free CDN is the quickest and easiest way to get Font Awesome on your website.

那么，我们的 indigo 主题，在哪儿引用 fontawesome 最新的样式呢？

修改文件 themes\indigo\layout\_partial\head.ejs，在倒数第二行前面，添加：

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

添加之后，该行为倒数第三行。

现在，你看到的左侧菜单，就是这样修改过后的最终效果。

菜单主页链接

之前是这样设置的：

1
2
3
icon icon-home:
  text: 主页
  url: https://www.taobantech.com

这样，在发布之后，是没有问题的，但是在本地hexo s之后点击【主页】会跳转到正式域名，同样的，gitee pages，并不是正式域名，比如我的是https://uncleandychen.gitee.io/，在点击【主页】的时候，也是不希望跳转至正式域名的。为了达到这个目的，改为以下代码即可：

1
2
3
icon icon-home:
  text: 主页
  url: /