如题

把自己制作的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.lovesofttech.com

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

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