hexo其他常用配置

在hexo的使用过程当中,经常会发现或者需要修改一些hexo的配置,以便于更好的使用hexo快速发布文章或者增加更多好用实用的功能,特记录一些在使用过程中添加或修改的功能.

实现实时预览编辑

在最近用hexo写文章的时候,每次修改之后,在hexo s启动后,不能在浏览器实时刷新过来,每次都得手动刷新进行预览,很不方便. 在网上找到如下方案

首先在项目目录下安装 hexo-browsersync 插件
1
npm install hexo-browsersync --save

然后运行 hexo s 看到如下内容说明启动成功

// 其中 3001 端口是 browsersync 的配置页面, 4000 端口就是我们的调试页面了.
$ hexo s
[BS] Access URLs:
 --------------------------------------
          UI: http://localhost:3001
 --------------------------------------
 UI External: http://192.168.191.1:3001
 --------------------------------------
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

注: 但是不知道是不是版本的问题一直没有成功, 后来打开http://localhost:3001,在页面中引入了一个js文件,重启之后便成功了

1 2	修改的文件路径 \hexo\themes\next\layout\_scripts\vendors.swig 在头部添加js <script src='http://localhost:3000/browser-sync/browser-sync-client.js?v=2.24.6'></script>

避免hexo中对 {{}} 的解析

// hexo中使用{{}}或{％％}包装的内容默认会被解析  在代码块中不会被解析
// 只要将单行代码中的大括号包含在raw标签中就可以避免被解析
// 语法`{% raw %}{{}}{% endraw %}`实现模型中的数据渲染
// 渲染后 ---> 语法{{}}实现模型中的数据渲染

hexo的next主题分页设置

显示更多的分页数量
打开 ./themes/next/layout/_partials/pagination.swig 文件，修改 mid_size 字段：

{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 10
      })
    }}
  </nav>
{% endif %}

每页显示文章数量

//  根目录 _config.yml 文件下
# 默认分页显示的数量
index_generator:
  path: ''
  per_page: 10
  order_by: -date