Hexo+NexT配置摘要

添加「标签」页面

  • 在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags
    1
    2
    $ cd your-hexo-site
    $ hexo new page tags
  • 编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。页面内容如下:

    1
    2
    3
    4
    title: 标签
    date: 2018-08-27 12:39:04
    type: "tags"
    ---
  • 在菜单中添加链接。编辑 主题配置文件 , 添加 tagsmenu 中,如下:

    1
    2
    3
    4
    menu:
    home: /
    archives: /archives
    tags: /tags

添加「分类」页面

  • 在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 categories

    1
    2
    $ cd your-hexo-site
    $ hexo new page categories
  • 编辑刚新建的页面,将页面的 type 设置为 categories ,主题将自动为这个页面显示分类。页面内容如下:

    1
    2
    3
    4
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    ---
  • 在菜单中添加链接。编辑 主题配置文件 , 添加 categoriesmenu 中,如下:

    1
    2
    3
    4
    menu:
    home: /
    archives: /archives
    categories: /categories

设置代码高亮主题

  • 更改 highlight_theme 字段,将其值设定成你所喜爱的高亮主题,例如:
    1
    2
    3
    4
    # Code Highlight theme
    # Available value: normal | night | night eighties | night blue | night bright
    # https://github.com/chriskempson/tomorrow-theme
    highlight_theme: normal

代码块高亮

需要在开头的 ``` 后面添加语言类型,例如:```js

文本居中的引用

  • 使用方式

  1. HTML方式:使用这种方式时,给 img 添加属性 class="blockquote-center" 即可。
  2. 标签方式:使用 centerquote 或者 简写 cq。

此标签要求 NexT 的版本在 0.4.5 或以上。 若你正在使用的版本比较低,可以选择使用 HTML 方式。

  • 标签调用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
    <!-- 其中 class="blockquote-center" 是必须的 -->
    <blockquote class="blockquote-center">blah blah blah</blockquote>

    <!-- 标签 方式,要求版本在0.4.5或以上 -->
    {% centerquote %}blah blah blah{% endcenterquote %}

    <!-- 标签别名 -->
    {% cq %} blah blah blah {% endcq %}

Bootstrap Callout

  • 使用方式

    1
    2
    3
    4
    5
    <!--标签方式 我的博客支持的不太好(一个页面不能有两个Bootstrap Callout标签,否则中间部分的md语法会不识别/除非两个紧挨着,中间没有其他内容会正常显示),推荐使用html标签  -->
    {% note class_name %} Content (md partial supported) {% endnote %}

    <!-- html方式 推荐 -->
    <div class="note class_name"><p> Content (md partial supported) </p></div>

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

hexo博客图片问题

  1. 首先确认 \_config.yml 中有 post_asset_folder:true
    Hexo 提供了一种更方便管理 Asset 的设定: post_asset_folder
    当您设置 post_asset_foldertrue 参数后,在建立文件时,Hexo
    会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。
  2. hexo 的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image --save(需要等待一段时间)。
  3. 完成安装后用hexo新建文章的时候会发现 \_posts 目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。
    此方法来自TSimeon的简书

报错:TypeError: Cannot set property ‘lastIndex’ of undefined

解决办法: 在 hexo 配置文件 _config.yml 中(不是主题配置文件)将 highlight(代码块的设置) 里面的 auto_detect: false 改为 auto_detect: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
TypeError: Cannot set property 'lastIndex' of undefined
at highlight (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/highlight.js/lib/highlight.js:511:35)
at /Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/highlight.js/lib/highlight.js:561:21
at Array.forEach (<anonymous>)
at Object.highlightAuto (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/highlight.js/lib/highlight.js:560:40)
at /Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/hexo-util/lib/highlight.js:117:25
at highlight (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/hexo-util/lib/highlight.js:120:7)
at highlightUtil (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/hexo-util/lib/highlight.js:22:14)
at /Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/hexo/lib/plugins/filter/before_post_render/backtick_code_block.js:62:15
at String.replace (<anonymous>)
at Hexo.backtickCodeBlock (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/hexo/lib/plugins/filter/before_post_render/backtick_code_block.js:14:31)
at Hexo.tryCatcher (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/util.js:16:23)
at Hexo.<anonymous> (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/method.js:15:34)
at Promise.each.filter (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/hexo/lib/extend/filter.js:63:65)
at tryCatcher (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/util.js:16:23)
at Object.gotValue (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/reduce.js:155:18)
at Object.gotAccum (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/reduce.js:144:25)
at Object.tryCatcher (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/promise.js:512:31)
at Promise._settlePromise (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/promise.js:569:18)
at Promise._settlePromiseCtx (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/promise.js:606:10)
at Async._drainQueue (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/async.js:138:12)
at Async._drainQueues (/Users/dentantan/mine/tdd/Blog/CatTianBlog/node_modules/bluebird/js/release/async.js:143:10)

如何设置「阅读全文」?

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:

  1. 在文章中使用<!-- more --> 手动进行截断,Hexo 提供的方式 推荐
  2. 在文章的 front-matter 中添加 description,并提供文章摘录
  3. 自动形成摘要,在 主题配置文件 中添加:
1
2
3
auto_excerpt:
enable: true
length: 150

默认截取的长度为 150 字符,可以根据需要自行设定。

ES6 建议使用 <!-- more -->(即第一种方式),除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。

-bash: hexo: command not found

可能是 node 环境升级,全局重装一下 hexo-cli 就好了

1
$ npm install hexo-cli -g

持续更新中…