Hexo系列 | Hexo+next主题搭建炫酷的个人博客网站

Hexo系列 | Hexo+next主题搭建炫酷的个人博客网站

dawnguo 473 2019-02-11

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。为了描述方便,在以下说明中,将前者称为 网站配置文件, 后者称为 主题配置文件

目录

主要包括以下高级使用:

  • 更换主题
  • 更改头像
  • 设置Menu
  • 侧边栏社交信息设置
  • 摘要自动生成
  • 主页文章添加阴影效果
  • 添加字数统计、阅读时长
  • 修改底部标签样式
  • 文章底部添加版权信息
  • 设置动态背景
  • 添加网页进度加载条
  • 底部隐藏由Hexo强力驱动、主题--NexT.Mist
  • 显示当前浏览进度
  • 设置网站的图标Favicon
  • Hexo博客添加站内搜索
  • 修改markdown解释之后标题的字号的大小
  • 更换markdown解析和渲染插件---hexo-renderer-markdown-it 插件

1. 更换主题

网络上有很多hexo相关的主题,只要把相应的主题文件下载下来,放到theme目录中,然后修改网站配置文件_config.ymltheme字段的值。下面是以安装next主题为例

  • 切换到Blog文件夹下(就是hexo init的文件夹),查看文件
$ cd [Blog]	
$ ls
_config.yml node_modules    scaffolds   themes
db.json     package.json    source
  • 通过curl安装NexT
$ mkdir themes/next
$ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1
  • 更新主题NexT
$ cd themes/next
$ git pull
  • 编辑网站配置文件_config.yml文件,切换成Next主题
## Themes: https://hexo.io/themes/
#theme: landscape
theme: next
  • next现在有4种主题风格,可以通过修改主题配置文件中的scheme值,来选择一款自己喜欢的主题风格。
# Schemes
scheme: Muse  //默认主题
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

完成上述操作之后,用hexo clean命令清除下缓存,之后hexo g生成静态网页,可以通过hexo s来进行预览。

next主题的安装和配置可参考nexT主题官方文档nexT github官网中文文档

2. 更改头像

编辑主题配置文件,修改 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

地址
完整的互联网 URIhttp://example.com/avatar.png
站点内的地址将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png 或者放置在 source/images/ 目录下配置为:avatar: /images/avatar.png

3. 设置Menu

menu是如下图所示的导航栏

  • 默认的只有首页和归档两个,但是可以通过修改主题配置文件_config.yml来添加menu 项,menu配置项中上下的顺序决定了menu显示的顺序。
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  category: /categories/
  archives: /archives/
  tags: /tags/
  about: /about/
  #sitemap: /sitemap.xml
  #commonweal: /404/
  • 当选择添加tags之后,还需要创建相应的文件,命令如下
$ hexo new page "tags"
  • 最后编辑创建index.md文件,内容如下
---
title: All tags
date: 2018-01-20 18:57:48
type: "tags"
---

假如只对主题配置文件进行了修改,即只添加了tagsmenu项,不创建相应的文件,当在博客网站点击标签菜单可能会提示

其他Menu选项也同理创建,如categories项目、about项。添加categories项之后,创建的文件内容填写如下

---
title: All categories
date: 2018-01-20 18:57:48
type: "categories"
---

添加about选项之后,创建的文件内容可以随意。

4. 侧边栏社交信息设置

编辑主题配置文件_config.yml,修改social字段的值

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  #LinkLabel: Link
  Github: https://github.com/yourgithub
  E-Mail: mailto:dawnxu96@gmail.com
  Instagram: https://instagram.com/yourins

效果如下

5. 摘要自动生成

编辑主题配置文件_config.yml,修改auto_excerpt字段

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true	# 置为true则自动截取100字当做首页摘要
  length: 100	# 自动截取的字数

上述的方式并不推荐,推荐是手动设置文章摘要,手动设置文章摘要,我们只需在想显示为摘要的内容之后添 <!-- more --> 即可。像下面这样:

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---

我是短小精悍的文章摘要(๑•̀ㅂ•́)و✧

<!-- more -->

紧接着文章摘要的正文内容

6. 主页文章添加阴影效果

打开.\themes\next\source\css\_custom\custom.styl,添加以下代码:

// 主页文章添加阴影效果
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

7. 添加字数统计、阅读时长

  • NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml中打开 wordcount 统计功能即可。如下所示:
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true         # 单篇 字数统计
  min2read: true          # 单篇 阅读时长
  separated_meta: true
  • 如果启动服务出现字数统计和阅读时长失效的情况,一般是因为没有安装 hexo-wordcount 插件,可以先安装该插件:
npm i --save hexo-wordcount

Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) ,安装命令如下:

npm install hexo-wordcount@2 --save
  • 安装完成后,重新执行启动服务预览就可以了。

参考博客:Hexo添加字数统计、阅读时长

8. 修改底部标签样式

修改.\themes\next\layout\_macro\post.swig中文件,搜索rel="tag">#,将#替换成<i class="fa fa-tag"></i>

效果如下

9. 文章底部添加版权信息

修改主题配置文件_config.yml中字段的值为true即可。

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

效果图如下

10. 设置动态背景

在主题配置文件中找到canvas_nest,设置成ture就可以啦,当然假如你想要其他样式,那么只要设置该样式为true即可。

# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

11. 添加网页进度加载条

编辑主题配置文件,搜索pace,将其值改为ture就可以,之后选择一款你喜欢的样式即可。

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

添加网页进度加载选项之后,效果如下

12. 底部隐藏由Hexo强力驱动、主题--NexT.Mist

  • 方法1

    直接修改主题配置文件_config.yml中的copyright配置项为false,假如没有该配置项,可以通过方法2

    # Footer `powered-by` and `theme-info` copyright
    copyright: false
    
  • 方法2

    打开./themes/next/layout/_partials/footer.swig,注释掉相应代码

    // 用下面的符号注释,注释代码用下面括号括起来
    // <!-- -->
    <!--
    {% if theme.copyright %}
    <div class="powered-by">
      {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
    </div>
    
    <div class="theme-info">
      {{ __('footer.theme') }} -
      <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
        NexT.{{ theme.scheme }}
      </a>
    </div>
    {% endif %}
    -->
    

修改之后效果如下

13. 显示当前浏览进度

修改themes/next/_config.yml,把 false 改为 true

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

效果如下

14. 设置网站的图标Favicon

  • 在图标网站找一张你喜欢的图标,图标网站:easyicon或者阿里巴巴矢量图标库。将下载下来的图标图片放在./source/目录下,如下所示

  • 之后修改主题配置文件_config.yml中的favicon配置项,指定图标所在路径即可
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon-32x32.png

效果如下:

15. Hexo博客添加站内搜索

NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。下面介绍Local Search的安装。

  • 安装 hexo-generator-search
$ npm install hexo-generator-search --save
  • 安装 hexo-generator-searchdb
$ npm install hexo-generator-searchdb --save
  • 编辑主题配置文件,设置local_searchenable为true
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

添加之后Menu如下

搜索效果演示如下

16. 修改markdown解释之后标题的字号的大小

  • 修改themes/next/source/css/_variables/base.styl中的font-size-headings-step
// Headings font size
$font-size-headings-step    = 2px	
$font-size-headings-base    = 24px
$font-size-headings-small   = $font-size-headings-base - $font-size-headings-step
$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step
$font-size-headings-large   = $font-size-headings-base + $font-size-headings-step
$font-size-headings-larger  = $font-size-headings-large + $font-size-headings-step
  • 修改themes/next/source/css/_variables/Mist.styl中的font-size-headings-base
// Variables of Mist scheme
// =================================================
$font-size-headings-base = 26px

也可以直接在Mist.styl中加上$font-size-headings-step = 2px //改为自己想要的步长

针对如下的问题进行解决“2级标题”和“3级标题”看不出来有啥区别啊

参考链接如何更改字体?

17. 更换markdown解析和渲染插件---hexo-renderer-markdown-it 插件

  • 卸载 Hexo 默认自带的 Markdown 渲染器
$ npm un hexo-renderer-marked --save
  • 安装 hexo-renderer-markdown-it 插件
$ npm i hexo-renderer-markdown-it --save
  • 配置

    hexo-renderer-markdown-it 的所有配置,均在 Hexo 的网站配置文件 _config.yml 中进行配置。

    1. 简单配置

      hexo-renderer-markdown-it提供三种简单配置方式(配置级别)zerodefaultcommonmark
      在 Hexo 的网站配置文件 _config.yml 文件中配置以下内容:

      # Markdown-it config
      #markdown: 'zero'
      #markdown: 'default'
      markdown: 'commonmark'
      

      每种简单配置有其默认的一些设置。更多个性化配置,请参考:高级配置。

      • zero:禁用大多数解析器功能。仅支持斜体和粗体,甚至不支持所有原始Markdown功能。
      • default(GFM):解析器的行为类似于github规范。
      • commonmark:提供比Zero预设更多的功能。 此设置将强制插件使用最新的CommonMark规范。

      警告:选择一种简单配置,将阻止您使用任何附带的插件。

    2. 高级配置

      hexo-renderer-markdown-it 提供的高级配置,是对简单配置的详细定制。在 Hexo的网站配置文件_config.yml 文件中配置以下内容(官方提供的完整配置,没有特殊需要不用再次修改):

      # Markdown-it config
      markdown:
        render:
          html: true
          xhtmlOut: false
          breaks: true
          linkify: true
          typographer: true
          quotes: '“”‘’'
        plugins:
          - markdown-it-abbr
          - markdown-it-footnote
          - markdown-it-ins
          - markdown-it-sub
          - markdown-it-sup
        anchors:
          level: 2
          collisionSuffix: 'v'
          permalink: true
          permalinkClass: header-anchor
          permalinkSymbol: ¶
      

      渲染器(render)

      markdown:
        render:
          html: true
          xhtmlOut: false
          breaks: true
          linkify: true
          typographer: true
          quotes: '“”‘’'
      
      • html:定义文档中的HTML内容是否应转义或传递给最终结果。
      html: true # 不转义 HTML 内容
      html: false # 转义 HTML 内容,使标签作为文本输出
      
      • xhtmlOut:定义解析器是否将导出完全兼容XHTML的标记。
      xhtmlOut: true # 必须使用完全的 XHTML 代码,换行必须为 <br/>
      xhtmlOut: false # 不必必使用完全的 XHTML 代码,换行可以为 <br>
      
      • breaks:使源文件中的换行符被解析为
        标记。每次按Enter键都会创建换行符。
      breaks: true # 每次会车换行相当于一个 <br/> 标签
      breaks: false # Pa每次会车换行会被忽略
      
      • linkify:解析器能够将直接粘贴到文本中的链接内联。
      linkify: true # 类似链接的文本,作为链接输出
      linkify: false # 类似链接的文本,依然作为文本输出
      
      • typographer:可以替换常见的排版元素。
      typographer: true # 替换常见的排版元素
      typographer: false # 不替换常见的排版元素
      
      • quotes:单引号、双引号如何被替换
      quotes: '“”‘’' # 'single'、"double" 变成 ‘single’、“double”
      quotes: '«»“”' # 'single'、"double" 变成 “single”、«single»
      

      插件(plugins)

      hexo-renderer-markdown-it 默认集成5个 markdown-it 插件

      markdown:
        plugins:
          - markdown-it-abbr
          - markdown-it-footnote
          - markdown-it-ins
          - markdown-it-sub
          - markdown-it-sup
      
      • markdown-it-abbr:缩写插件
      *[HTML]: Hyper Text Markup Language
      *[W3C]:  World Wide Web Consortium
      
      The HTML specification
      is maintained by the W3C.
      
      • markdown-it-footnote:脚注插件
      basic footnote[^1]
      here is an inline footnote[^2](inline footnote)
      and another one[^3]
      and another one[^4]
      
      [^1]: basic footnote content
      [^3]: paragraph
      footnote
      content
      [^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)
      
      • markdown-it-ins:插入插件(下划线插件)
      ++inserted++ => <ins>inserted</ins>
      
      • markdown-it-sub:下标插件
      H~2~0 => H<sub>2</sub>O
      
      • markdown-it-sup:上标插件
      29^th^ => 29<sup>th</sup>
      

      锚(anchors)

      可能自己不会用,因此,没太关注这个功能

      markdown:
        anchors:
          level: 2
          collisionSuffix: 'v'
          permalink: true
          permalinkClass: header-anchor
          permalinkSymbol: ¶
      
      • level:生成 Heading ID 的标题等级
      • collisionSuffix:Heading ID 重复时,数字的后缀
      • permalink:'true',则创建一个锚标记,除标题外还有一个固定链接
      • permalinkClass:用于固定链接锚标记的样式
      • permalinkSymbol:用于固定链接标记的符号

参考链接

Next官网—开始使用

Hexo-NexT配置超炫网页效果

hexo的next主题个性化教程:打造炫酷网站

hexo-renderer-markdown-it 插件 详解


# hexo # 个人网站搭建