文章目录

  • 1. 安装 NexT 主题
  • 2. 一些基本的使用方法
    • 2.1 首页显示摘要
    • 2.2 删除文章
    • 2.3 附件文件夹管理
    • 2.4 如何添加草稿
    • 2.5 行内公式渲染的问题

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

1. 安装 NexT 主题

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

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

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

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

2. 一些基本的使用方法

2.1 首页显示摘要

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

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

2.2 删除文章

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

2.3 附件文件夹管理

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

  1. 首先确认_config.yml 中有 post_asset_folder:true。
    Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder
    当您设置post_asset_folder为true参数后,在建立文件时,Hexo
    会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。
  2. 在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] %}

2.4 如何添加草稿

草稿相当于私密文章,文章不会显示在页面上。

  1. 输入命令
    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
    

2.5 行内公式渲染的问题

此时行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。

  1. 到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改。这一步是在原基础上取消了对\,{,}的转义(escape)。同时把第20行的em变量也要做相应的修改。

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

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

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

hexo教程-Next主题安装相关推荐

  1. Hexo博客主题安装和优化(一)

    当你看到这篇文章的时候,想必你已经搭建好了属于你的Hexo博客并且已经部署到了Github上面,如果还没有的话呢,请移步去Hexo+github搭建博客! 因为默认的Hexo主题实在太难看了,所以我们 ...

  2. 名编辑电子杂志大师教程 | 导入主题/安装主题

    一.首先我们需要了解的是,名编辑的模板: [▲图1] 看上图,打开名编辑后,在左边我们会看到,点击这个按钮,然后就会跳出上图图1的"选择模板窗口". Classical,Flat, ...

  3. 使用 github 仓库搭建 Hexo教程,Hexo配置文件解读,Hexo安装next主题及主题配置,美化

    这是之前写的文章了,重新补一补,把另外写的都和在一起了,出问题方便找 搭建Hexo 准备 安装 nodejs 安装 git 可以看我之前的博客,好像有写安装方法 安装hexo-cli 中文官网 安装是 ...

  4. hexo之next主题个性化配置详细教程

    hexo之next主题个性化配置详细教程 1.在右上角或者左上角实现fork me on github 实现的效果图 具体实现方法 点击传送门>> 挑选自己喜欢的样式,并复制代码. 例如, ...

  5. Hexo部署+Sakura主题调教教程

    CSDN不定期补充 个人博客内会实时更新推送: https://flymc.cc/2020/03/28/Sakura/ 前言 这个教程的重点在于调教Sakura主题,关于Hexo+GitHub搭建博客 ...

  6. hexo搭建博客教程(matery主题)

    hexo搭建博客教程(matery主题) 写在前面 这篇教程是我搭建个人博客的路程经历和经验总结,matery主题挺多人用,网上也有各种详细教程,没时间我就不出详细教程了,这里给出其他大佬的教程链接, ...

  7. DBeaver 深色主题安装教程

    DBeaver 深色主题安装教程 官方GitHub安装教程 1.Copy URL of extension update site: 2.In DBeaver main menu open Help ...

  8. WordPress + Avada主题 安装Demo教程

    点击查看原文观看安装视频教程:http://www.ibloger.net/article/164.html 环境准备: Apache2.4 + PHP7 + MySql + WordPress + ...

  9. 静态博客 Hexo material 主题安装

    静态博客 Hexo material 主题安装 注意,这里介绍的 Material 主题是 1.5.2 的版本 如果你还没有安装 Hexo,并且对它有兴趣,请前往 EasyHexo 这里将提供 Hex ...

最新文章

  1. R语言使用ggplot2包使用geom_boxplot函数绘制基础分组箱图(不同分组配置不同的箱体填充色+灰度尺度图)实战
  2. 详解k8s deployment的滚动更新
  3. linux装机量,在没有盗版的世界 Linux桌面的装机量可能占比达到40%
  4. 22 大端序和小端序
  5. 靠信用购物!芝麻信用上线新功能:用户可先用后买
  6. mysql 行转列_详解MySQL行列转换4个实现方案及反向行转列实验测试
  7. phoneGap-Android开发环境搭建
  8. Security+ 学习笔记31 云计算参考架构
  9. UNIX系统V(System V)
  10. OTN技术及华为OTN设备简介
  11. Vue(踩坑)vue.esm.js?efeb:628 [Vue warn]: Error in render: TypeError: Cannot read property '0' of unde
  12. HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
  13. 怎么知道跟交换机互联的交换机_电话交换机日常怎么维护和保养?
  14. Vue 路由懒加载和动态加载
  15. iOS代码覆盖率(二)-增量覆盖率自动化实践
  16. ThingsBoard 3.1 发布
  17. 天基实业投资理财要合理配置资产
  18. Python语音基础操作--6.3ADPCM编码
  19. python 校验身份证号码 并输出对应省市县生日 demo
  20. 蒙特卡洛—模拟蒲丰投针

热门文章

  1. MySQL允许局域网连接
  2. 前端开发周报:20190817
  3. react 添加css_在JS中使用情感CSS将暗模式添加到您的React应用中
  4. ThinkPHP框架漏洞总结
  5. CAD打开文件提示许可检出超时,AutoCAD将关闭
  6. Ubuntu下主板集成前置音频输出设备没有声音的解决办法
  7. 音频卡是计算机硬件吗,绝对干货:关于声卡你需要知道的几点知识
  8. 区块链数据的价值体现方式
  9. 什么是EV 代码签名证书
  10. linux c语言修改文件的时间属性,请教一个关于用标准C语言修改文件创建时间、修改时间和访问时间的问题。...