清风逐月 | 我思故我在
2019-04-25 | 使用指南 | UNLOCK | 更新时间:2019-9-16 17:33

Hexo在使用过程中遇到的问题

安装

npm install hexo-cli -g

文章和草稿

Hexo 传统的创建文章的命令，创建文章，之后通过发布命令发布文章

$ hexo new <title>

如果你有篇文章还没写完，不想发布，你肯定需要草稿功能，

$ hexo new draft <title>

在 source/ 目录下会建立 _drafts 文件夹：所有的草稿都会在里面
当你编辑中想要预览草稿，可以执行下面的命令

$ hexo S --draft

当你写完后，你可以通过下面的命令将草稿转存在 _posts 目录下，等待发布
当然，你也可以手动移动文件或者创建文件夹

$ hexo P <filename>

自定义配置

# 外部js
AD\source\common    #配置需要引入的静态资源：公共js库
AD\source\js\index.js: #设置js导入问题
AD\source\js\scrollTo #自定义滚动js
# 在js创建函数，放入自执行函数，绑定在dom元素上，点击后触发 
# 通过href 判断当前url是否包含 archives 在获取数据

# 模板ejs
AD\layout\components\config.ejs   #配置公用变量  window.AD_CONFIG属性
AD\layout\components\bottom-bar.ejs  #显示在文章的底部的,打赏
AD\layout\layout.ejs    #模板的入口文件
AD\layout\index.ejs     #主页显示的文章列；判断文件的出现条件
AD\layout\partials\head.ejs    #显示在head标签里配置项
AD\layout\archive.ejs  #归档显示的文章列；判断显示的条件
AD\layout\partials        #修改样式问题
AD\layout\archive.ejs  #:归档模板

theme 为当前网站数据
page 为当前分类数据
<pre><%= JSON.stringify(page,null,2) %></pre>   # 查看数据

# 引入库
node_modules\marked  #Hexo的md模板解析文件，通过该模块解析，修改后使用 hexo clean清除缓存
注意：如果要修改名称的话，在AD\source\js\scrollTo 需要修改名称

自定义功能

gitalk评论系统

gitalk评论系统为github支持的相关内容，同时效果需要配置在线上，才能授权成功

  • 首先进入github,点击右上角头像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】进行基本配置
Application name
# 随便写 名称

Homepage URL
# https://lixianbin1.github.io/blog

Application description
# 随便写 备注

Authorization callback URL
# https://lixianbin1.github.io/blog

  • 创建Client secrets（938605d4f670xxxxxxxxc9bdec2151bc1287dd29） 记下来。

  • 进入hexo 的主题配置文件, 添加以下配置

\themes\AD\_config.yml
# 自定义 gitalk评论系统
gitalk:
  enable: true #开启gitalk评论
  owner: lixianbin1 #github用户名
  admin: lixianbin1 #github用户名
  repo: blog #博客的仓库名称(注意不是地址)
  ClientID: 8241a8fad9233906dbd6 #上面生成的Client ID
  ClientSecret: 938605d4f670768b4cb9c9bdec2151bc1287dd29 #上面生成的Client Secret
  labels: 'gitalk' # github issue 对应的issue标签（新建一个）
  distractionFreeMode: true  #无干扰模式，不需要更改
  • 添加 ejs 模板文件,并在相应的地方进行引入,之后打包，发布就可以了
\themes\AD\layout\components\comment.ejs
<link rel="stylesheet" href="https://unpkg.com/gitalk@latest/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
<script src="https://priesttomb.github.io/js/md5.min.js"></script>
<script type="text/javascript">
    new Gitalk({
        clientID: '8241a8fad9233906dbd6',
        clientSecret: '938605d4f670768b4cb9c9bdec2151bc1287dd29',
        repo: 'blog',
        owner: 'lixianbin1',
        admin: 'lixianbin1',
        id: md5(location.pathname),
        distractionFreeMode: true
    }).render('gitalk-container')
</script>
\themes\AD\layout\layout.ejs
// ......
<% if (theme.gitalk.enable){ %>
  <div id="gitalk-container"></div>
  <%- partial('components/comment2') %>
<% } %>

报错

template render error

template render error (unknown path) 模板呈现错误(未知路径),如果出现这个报错提示,基本就是你文章里的代码 没有进行闭合操作，好好检查一下

{% codeblock %}
<nav id="main-nav"></nav>

# 像上面一样少了闭合代码，就会报错

The “mode” argument must be integer

Hexo 版本和 node 版本支持不一致导致；可以更新 node或者 Hexo

当然，这是一个会更新的文章，当我遇到有意思的或者网上比较难找到答案的，我会记录下来

Hexo