Hexo 概览

发表于 | 分类于
字数统计: 1.4k | 阅读时长 ≈ 5
Hexo使用指北

0. 前言

1. 简单安装与常用命令

1.1. 安装

  • 总体思路：
    • 先安装git/nodejs，再安装hexo。
    • 安装next主题。
    • 设置Github Pages。
  • 安装Hexo：
    • 主要参考：Hexo中文文档 - 概述
    • 安装前提：安装Git和Node.js。
      • Windows：git for Windows & node.js官网。注意，安装git时勾选Add to PATH选项。
      • Mac：brew install git & curl https://raw.github.com/creationix/nvm/master/install.sh | sh。
    • 安装Hexo：npm install -g hexo-cli。
  • Next主题安装：
    • 主要参考：NexT 使用文档 - 开始使用
    • cd your-hexo-site, git clone https://github.com/iissnan/hexo-theme-next themes/next
    • 修改Hexo的站点配置文件，即主目录下的_config.yml，修改内容theme: next。
  • 设置 Github Pages
    • 主要参考：Hexo中文文档 - 部署
    • 更多信息请参考：Github Pages 官方主页。简单说就是：
      • 在Github上新建一个repo，命名为yourname.github.io。
      • 之后就可以通过http://yourname.github.io来访问部署在该repo中的信息。
    • 为了将Hexo部署到GithubPages中
      1. 安装hexxo-deployer-git，命令为npm install hexo-deployer-git --save。
      2. 修改站点配置文件，如下。

1.2. 常用命令

  • 主要参考：Hexo中文文档 - 指令
  • 建站
    • hexo init [folder]
    • 新建一个站点（包括新建文件夹）。
  • 新建各类页面
    • hexo new [layout] <title>
    • [layout]对应scaffolds文件夹下的各个模版。
    • 新建普通文章：hexo new post new-blog-title
    • 新建page，用于主页上的分类、关于、标签等页面。
      • hexo new page "about"
      • 对于categories或tags页面，在文章首部需要指定type类型。如下所示，这样会有特殊效果。
  • 页面相关
    • 生成静态页面：hexo generate
    • 清除静态页面：hexo clean
    • 本地测试：hexo server [--debug]
      • 默认端口为4000，由于福新阅读器默认占用4000端口，所以可能无法使用。
      • 可以通过-p或--port设置端口。
      • 配合--debug同时使用，可以动态更新NexT主题中的内容。

2. 简单配置

  • 介绍用到的配置.

2.1. 站点配置文件

  • 参考资料：《Hexo - 配置》

  • 网站基本信息

    • 中英文设置在主题文件夹的language文件夹中。
      1
      2
      3
      4
      5
      6
      7
      title: 清欢小屋 # 标题
      subtitle: 
      description: 人间有味是清欢 # 简介
      keywords: 
      author: Irving # 名称
      language: zh-Hans # 语言选择
      timezone:

  • 设置主题

    1
    theme: next

  • 部署到github

    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: <repository url> # Github中repo地址
      branch: [branch] # 指定branch
      message: [message] #指定提交时的信息

2.2. Next配置文件

  • 参考资料：

  • 选择Scheme（下面的设置都是基于Gemini进行）

    1
    scheme: Gemini

  • 设置公式

    1
    2
    3
    4
    mathjax:
      enable: true
      per_page: false
      cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

  • 设置favicon（即小图标），其中路径是基于source文件夹。

    1
    2
    3
    4
    5
    favicon:
      small: /images/favicon.ico
      medium: /images/favicon.ico
      apple_touch_icon: /images/favicon.ico
      safari_pinned_tab: /images/favicon.ico

  • 侧边栏设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # TOC设置（即侧边栏中的文章章节）
    toc:
      enable: true
      number: false
      wrap: false

    # 侧边栏头像
    avatar: /images/1.jpg

    # 社交信息
    social:
      GitHub: https://github.com/irvingzhang0512 || github
      ZhiHu: https://zhuanlan.zhihu.com/kingbob || book

    # 菜单栏
    menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th

    # 侧边栏位置
    sidebar:
      position: right

3. 页面与写作

3.1. 页面

  • 页面和普通文章的区别：
    • 所在位置：
      • 普通文章在/source/_posts文件夹中，就仅有一个文件。
      • 页面在/source文件夹中，是一个文件夹（其中有一个index.md的文件）。
    • 构建方式：
      • 普通文章通过hexo new post title来创建。
      • 页面通过hexo new page title来创建。
  • 页面特有的内容：
    • 对于分类、标签、归档页面，markdown文件头中有特有的type元素，类型值就是categories、tags、archives。
    • 对于页面名称，应该与主题配置文件中的menu对应。
  • 举例
    • 通过hexo new page categories创建页面。
    • 修改index.md中的内容，预期得到以下结果
      1
      2
      3
      4
      5
      ---
      title: 分类信息
      date: 2018-04-19 22:38:41
      type: "categories"
      ---

image_1cbg9al9v1pcs19kl149g1tn128d9.png-24.5kB

3.2. 写作

  • Front-matter：

    • Hexo文档 - Front-matter
    • Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。
    • 其中 description 会显示到首页中。
    • 下面举例模版中的内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      ---
      title: {{ title }}
      date: {{ date }}
      updated: {{ date }}
      categories: 
      - father
      - son
      tags:
      - tag1
      - tag2
      description: 
      ---

  • 关于more的用法

    • 在文章列表中默认隐藏<!-- more -->后的内容。

4. 其他

4.1. 文章置顶

  • 参考这篇文章。
  • 使用插件hexo-generator-index-pin-top
  • 流程：
    • 第一步，卸载原插件：$ npm uninstall hexo-generator-index --save。
    • 第二步，安装新插件：$ npm install hexo-generator-index-pin-top --save。
    • 第三步，在文章开头 Front-matter 中添加 top: True。
  • 在首页显示置顶标志：
    • 修改 ./themes/next/layout/_macro/post.swig 文件。
    • 在 <div class="post-meta"> 下添加以下代码。
      1
      2
      3
      4
      5
      {% if post.top %}
          <i class="fa fa-thumb-tack"></i>
          <font color=7D26CD>置顶</font>
          <span class="post-meta-divider">|</span>
      {% endif %}

4.2. 文章字数统计

  • next 主题默认使用 hexo-wordcount 插件。
  • 在主题配置文件中有以下配置：
    1
    2
    3
    4
    5
    6
    7
    8
    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true # 是否有文字说明，即有没有"字数统计"和"阅读时长"这几个字
      wordcount: true # 字数统计
      min2read: true # 最少阅读时间
      totalcount: false
      separated_meta: true # 要不要另起一行

image_1dkt47ulvsok19d19nvv7tlol9.png-8.7kB