Hexo-NexT主题安装并配置教程

前言: 该教程 不定时更新 ,该教程主要提供Hexo和NexT官方教程上没有内容,至于其他的请阅读官方教程!

Hexo:快速,简单且功能强大的博客框架

  • 由Node.js提供支持的令人难以置信的生成速度。数以百计的文件仅需几秒钟即可构建。
  • 支持GitHub Flavored Markdown的所有功能,包括大多数Octopress插件。
  • 您只需要一个命令即可将您的站点部署到GitHub Pages,Heroku或其他平台。
  • 具有功能强大的API,可实现无限扩展。各种插件可用于支持大多数模板引擎(EJS,Pug,Nunjucks等)。轻松与现有NPM软件包(Babel,PostCSS,Less / Sass等)集成。

NexT:Hexo的典雅而强大的主题。(该GitHub仓库上的NexT版本为稳定版)

  • NexT 支持大量的第三方插件,它们可以被轻松地配置。
  • NexT 每个月都会发布新版本。
  • 最新的GitHub地址(该GitHub仓库上的NexT版本为开发板)。
  • NexT 官方配置教程及更新说明网址

基本安装

  1. 安装Hexo

    • 安装Node.js(Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
    • 安装Git
    • 安装 Hexo(这里将Hexo作为博客目录)
      1
      npm install -g hexo-cli
      1
      hexo init Hexo
      1
      cd Hexo
      1
      npm install
    • Hexo安装完成
  2. 安装NexT

    • 安装NexT
      1
      cd Hexo/
      1
      npm install hexo-theme-next

      NexT安装完成

    • 使用NexT主题
      1
      theme: next

      修改Hexo\_config.yml配置

Hexo插件

  1. hexo-enhancer

    • 简介

      • hexo-enhancer 是一个Hexo功能增强插件。
      • 此插件支持的功能较多,到目前为止,此插件支持的功能如下:
        • 自动生成 title:根据文件名自动生成标题。
        • 自动生成 date:根据文件名自动生成日期,具体策略类似 Jekyll
        • 自动生成 abbrlink:根据标题进行 base32crc32 生成短链接。
        • 自动生成 categories:根据文件的路径解析文章所属分类。
        • 自动生成 tags:根据配置在 _config.yml 中的可用 tagskeywords 自动扫描文章中出现的标签。
    • 安装

      1
      npm install hexo-enhancer
    • 基础配置

      • Hexo\scaffolds\post.md 做如下修改

        1
        2
        title: {{ title }}
        date: {{ date }}

        即删除了原来的 tags:

      • Hexo\_config.yml 配置标签设置:

        1
        tags: Java, Golang, React, Vue, ...

        自动给每篇文章添加标签,将你要的标签填写到 tags 后边即可

      • Hexo\_config.yml 配置 abbrlink 设置

        1
        permalink: :year/:abbrlink/

        自动为每篇文章分配短小且唯一的 url

  2. RSS

  3. live2d

    • 一个往Hexo博客里放上一只萌萌哒二次元看板娘的插件
    • 使用教程
  4. hexo-submit-urls-to-search-engine

    • 简介

      • 中文文档
      • hexo使用 hexo-submit-urls-to-search-engine 插件后,可主动推送Hexo博客新链接至谷歌、必应、百度搜索引擎站长平台以提升网站收录质量和速度。本插件允许你向各大搜索引擎发送纯天然、植物饲养的索引编制请求,一劳永逸。
      • 比如,现在我的一篇文章刚发布 5 分钟,即可在必应搜索到。看吧,这就是 hexo-submit-urls-to-search-engine 的威力。百度与谷歌略慢一筹。
      • 这三大搜索引擎已占据97%的全球搜索引擎市场份额(包括使用bing索引的雅虎、ecosia等)。后期可能会加入向Yandex(官方仅开通重点页面提交)、360(目前官方没开通,但我已提交建议)提交链接的功能。
    • 安装

      1
      npm install --save hexo-submit-urls-to-search-engine
    • Hexo配置_config.yml

      1
      2
      3
      4
      5
      6
      # Deployment
      ## Docs: https://hexo.io/docs/deployment.html
      deploy:
      - type: cjh_google_url_submitter
      - type: cjh_bing_url_submitter
      - type: cjh_baidu_url_submitter

      在deploy下添加以上内容

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      hexo_submit_urls_to_search_engine:
      submit_condition: count #链接被提交的条件,可选值:count | period 现仅支持count
      count: 10 # 提交最新的10个链接
      period: 900 # 提交修改时间在 900 秒内的链接
      google: 0 # 是否向Google提交,可选值:1 | 0(0:否;1:是)
      bing: 1 # 是否向bing提交,可选值:1 | 0(0:否;1:是)
      baidu: 1 # 是否向baidu提交,可选值:1 | 0(0:否;1:是)
      txt_path: submit_urls.txt ## 文本文档名, 需要推送的链接会保存在此文本文档里
      baidu_host: https://cjh0613.github.io ## 在百度站长平台中注册的域名
      baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥, 所以请不要把它直接发布在公众仓库里!
      bing_host: https://cjh0613.github.io ## 在bing站长平台中注册的域名
      bing_token: 请按照文档说明获取 ## 请注意这是您的秘钥, 所以请不要把它直接发布在公众仓库里!
      google_host: https://cjh0613.github.io ## 在google站长平台中注册的域名
      google_key_file: Project.json #存放google key的json文件,放于网站根目录(与hexo _config.yml文件位置相同),请不要把json文件内容直接发布在公众仓库里!
      replace: 0 # 是否替换链接中的部分字符串,可选值:1 | 0(0:否;1:是)

      在Hexo末尾添加以上内容

    • 成功推送返回信息

      • 必应

        1
        Bing response:  { d: null }
      • 百度

        1
        Baidu response:  {"remain":2999,"success":1}
      • 谷歌

        1
        2
        3
        4
        5
        6
        7
        8
        Google response:  { urlNotificationMetadata:
        { url:
        'https://cjh0613.github.io',
        latestUpdate:
        { url:
        'https://cjh0613.github.io',
        type: 'URL_UPDATED',
        notifyTime: '2020-06-12T05:37:25.701779228Z' } } }
      • 其他返回信息可参考它们的官方文档。

  1. hexo-word-counter

    • 简介

      • Hexo 博客文章的字数和阅读时间。
      • 字数统计以Unicode® 标准附件 #29为依据,因此当帖子内容包含多种语言时,总字数也能准确统计。
      • 借助 Rust 的强大功能,此插件比几乎所有提供类似功能的其他 Hexo 插件都更快。请参阅下面的基准测试
    • 安装

      1
      npm install hexo-word-counter
    • Hexo 配置 _config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # 发布字数统计
      # https://github.com/next-theme/hexo-word-counter
      symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      exclude_codeblock: false
      wpm: 300
      suffix: "mins."
    • Next 配置 _config.yml

      1
      2
      3
      4
      5
      # Post wordcount display settings
      # Dependencies: https://github.com/next-theme/hexo-word-counter
      symbols_count_time:
      separated_meta: true
      item_text_total: false
  2. hexo-generator-searchdb

    • 简介

      • Hexo 的搜索数据生成器插件。
      • 该插件用于生成搜索索引文件,其中包含文章的所有必要数据,您可以使用这些数据为博客编写本地搜索引擎。支持XML和JSON格式输出。
    • 安装

      1
      npm install hexo-generator-searchdb
    • Hexo配置 _config.yml

      1
      2
      3
      4
      5
      6
      7
      # 本地搜索
      # hhttps://github.com/next-theme/hexo-generator-searchdb
      search:
      path: search.xml
      field: post
      content: true
      format: html
    • NexT配置 _config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      # Local Search
      # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
      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
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: true
  3. hexo-filter-emoji

    • 简介

    • 安装

      1
      npm install hexo-filter-emoji
    • Hexo 配置 _config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      # 一个使用Github Emojis API添加了表情符号支持的Hexo插件
      # https://github.com/theme-next/hexo-filter-emoji
      # https://api.github.com/emojis
      # https://www.webfx.com/tools/emoji-cheat-sheet/
      emoji:
      enable: true
      className: github-emoji
      styles:
      customEmojis:
  4. hexo-next-twikoo

    • 简介

      • NexT 的 Twikoo 评论系统。
      • Twikoo 是一个简单、安全、免费的评论系统。
    • 安装

      1
      2
      3
      4
      # For NexT version >= 8.0.0 && < 8.4.0
      npm install hexo-next-twikoo@1.0.0
      # For NexT version >= 8.4.0
      npm install hexo-next-twikoo@1.0.3
    • 配置

      在 Hexo 或主题的 _config.yml 文件中配置它们:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      # Twikoo
      # For more information: https://twikoo.js.org, https://github.com/imaegoo/twikoo
      twikoo:
      enable: true
      visitor: true
      envId: twikoo-1gs9l0fb17e7897a # 环境 ID,搭建教程:https://twikoo.js.org/quick-start.html
      # region: ap-guangzhou # 环境地域,默认为 ap-shanghai
      # path: 'window.location.pathname' # 自定义文章路径
      # jsUrl: https://cdn.staticfile.org/twikoo/1.5.10/twikoo.all.min.js # 自定义 JS 文件地址
    • 评论系统推荐

  5. hexo-next-fireworks

    • 简介
      一个鼠标点击动画特效!
    • 安装
      1
      npm install next-theme/hexo-next-fireworks
    • 用法
      您可以在 Hexo 的 _config.yml (位于您博客的根目录中)中设置此插件的选项:
      1
      2
      fireworks:
      enable: true
  6. activate-power-mode

    • 一个为博客添加酷炫打字特效的插件
    • 使用教程

更新Hexo

  1. 进入博客目录

    1
    cd folder

    folder为你的Hexo博客文件路径,例如:/e/Hexo

  2. 更新hexo-cli

    1
    npm install hexo-cli@latest -g
  3. 更新hexo

    1
    npm install hexo@latest

更新NexT

说明

  • 如何配置 Hexo 和 NexT ?传统的方法是将一些选项存储在站点配置文件中,其他选项存储在主题配置文件中。这种方法是适用的,但是通过获取或下载新版本来更新NexT主题并不顺利。
  • 目前 NexT 鼓励用户使用 Alternate Theme Config 进行配置。并且可以轻松地通过 Custom Files 自定义主题的布局和样式。
  • 不推荐直接修改 NexT 主题的文件。因为这可能导致错误(例如 git merge 冲突),并且在升级主题时修改的文件可能丢失。
  • 然而你也可以通过提交(Commit)、贮藏(Stash)或忽视(Discard)本地更改以绕过这种更新错误(例如 «Commit your changes or stash them before you can merge»)。具体方法请参考这里

_config.[name].yml

  1. 请确保您使用的是Hexo 5.0(或更高版本)。
  2. 在站点的根目录下创建一个配置文件,例如:_config.next.yml
  3. 将需要的NexT主题选项从主题配置文件复制到这个配置文件中。如果是第一次安装NexT,那么使用以下命令复制整个主题配置文件:
    1
    2
    3
    4
    # Installed through npm
    cp node_modules/hexo-theme-next/_config.yml _config.next.yml
    # Installed through Git
    cp themes/next/_config.yml _config.next.yml
  4. 通过这种方式,您的所有配置都位于主站点配置文件中。您不需要编辑主题配置文件或创建任何新文件。这样更新NexT主题时不会引发冲突或丢失文件。

更新

  • 通过 npm 安装最新版本

    1
    2
    $ cd hexo-site
    $ npm install hexo-theme-next@latest
  • 通过 git 更新到最新的 master 分支

    1
    2
    $ cd themes/next
    $ git pull

常见问题

  1. 'hexo' 不是内部或外部命令,也不是可运行的程序或批处理文件。
    将站点目录下的node_modules\.bin添加到Path环境变量下,然后重启即可

友情链接

  1. 自动备份 Hexo 博客源文件
  2. Hexo 添加文章时自动打开编辑器
  3. 常用 Hexo 命令
本文结束 感谢您的阅读
正在加载今日诗词....