Hexo教程1:Next主题安装

本文是我搭建博客中学习到的一些知识。
Hexo的官网说明文档讲解的非常齐全,我只按照我学习的顺序来介绍。

安装 NexT 主题

创建 Hexo 主题非常容易,您只要在 themes 文件夹内,新增一个任意名称的文件夹,并修改 _config.yml 内的 theme 设定,即可切换主题。

Hexo的主题非常多,知乎上的问题:“有哪些好看的 Hexo 主题”的回答给出了非常多的漂亮的主题。

我个人非常喜欢 NexT 主题。同实验室的两位大神也都使用的这个主题,现把两位大神的博客地址放在这里:Bulus 钢东哥

按照GitHub上的NexT项目的 README 文档的步骤,就可以安装好了。
NexT官方网址为:http://theme-next.iissnan.com/

一些基本的使用方法

首页显示摘要

在 NexT 的设置文件里做如下更改:

在文章中添加一行 <!-- more --> 进行截断, <!-- more --> 以上的都是摘要,都是可以显示在主页中的。如果没有截断,就按默认150.

删除文章

删除文章的过程一样也很简单,先删除本地文件,然后通过生成和部署命令进而将远程仓库中的文件也一并删除。
首先进入到 source/_post 文件夹中,找到需要删除的.md文件,在本地直接执行删除,同时需要删除文章附带的图片文件。然后依次执行hexo g,hexo d,再去主页查看你就会发现你的博客上面已经空空如也了,这就是如何删除文章的方法。

附件文件夹管理

参考博客:https://www.jianshu.com/p/c2ba9533088a

  1. 首先确认_config.yml 中有 post_asset_folder:true。
    Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder
    当您设置post_asset_folder为true参数后,在建立文件时,Hexo
    会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。
    1. 在hexo的目录下执行

      npm install https://github.com/CodeFalling/hexo-asset-image —save

(需要等待一段时间)。

  1. 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。

注意:
通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo3的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

如何添加草稿

草稿相当于私密文章,文章不会显示在页面上。
输入命令
hexo new draft "new draft"
会新生成一个_drraft文件夹,里面有个 new-draft.md文件。
如果你希望强行预览草稿,更改配置文件:
render_drafts: true
或者,如下方式启动server:
hexo server --drafts

   npm uninstall hexo-renderer-marked --save
   npm install hexo-renderer-kramed --save
  1. 此时行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。
    接下来到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改。这一步是在原基础上取消了对\,{,}的转义(escape)。同时把第20行的em变量也要做相应的修改。

    //  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    escape: /^\\([`*\[\]()#$+\-.!_>])/
    
   //  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
   em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
  1. 在主题中开启mathjax开关。进入到主题目录,找到_config.yml配置问题,把mathjax默认的false修改为true,具体如下:

     # MathJax Support
     mathjax:
       enable: true
       per_page: true
    
  2. 在文章的Front-matter里打开mathjax开关。之所以要在文章头里设置开关,是因为考虑只有在用到公式的页面才加载 Mathjax,这样不需要渲染数学公式的页面的访问速度就不会受到影响了。如下:

     ---
     title: index.html
     date: 2016-12-28 21:01:30
     tags:
     mathjax: true
     --
    
  3. 重新启动hexo(先clean再generate),问题完美解决。

您的支持将鼓励我继续创作!