0%

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地址:https://github.com/next-theme/hexo-theme-next (该GitHub仓库上的Next版本为开发板)
  • Next官方配置教程及更新说明网址:https://theme-next.js.org/docs/theme-settings/

基本安装

  1. 安装Hexo

    • 安装Node.js(Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本)

    • 安装Git

    • 安装 Hexo(新建一个名为Hexo的文件夹)

      1
      cd Hexo/
      1
      npm install -g hexo-cli
      1
      hexo init
      1
      npm install
    • Hexo安装完成

  2. 安装Next

    • 安装Next

      1
      cd Hexo/
      1
      git clone https://github.com/next-theme/hexo-theme-next themes/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@1.0.7 --save

      这里建议安装 1.0.7版本,因为>1.0.7版本的其他版本会有分类界面不准确等问题!

    • 基础配置

      • 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

    • 简介

      给自己的网站添加RSS订阅服务!

    • 安装

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

      1
      url: https://xxx.com/

      将第17行url后的链接改为自己的博客地址

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      # RSS
      # https://github.com/hexojs/hexo-generator-feed
      feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '
      order_by: -date
      icon: icon.png
      autodiscovery: true
      template:

      在Hexo配置文件的末尾添加以上代码

    • Next配置_config.yml

      1
      2
      3
      4
      social:
      ...
      RSS: /atom.xml || fas fa-rss
      ...

      在social:下添加以上代码

  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
      16
      17
      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:是)
      find_what: http://cjh0613.github.io/blog
      replace_with: https://cjh0613.com

      在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' } } }
      • 其他返回信息可参考它们的官方文档。

  5. hexo-generator-indexed

    • 简介

      一个让博文置顶和隐藏的插件。

    • 安装

      1
      2
      npm uninstall hexo-generator-index	# 卸载掉Hexo自带的一个置顶插件
      npm install hexo-generator-indexed # 安装所需插件
    • 使用说明

      在文章的 Front-matter 中增加一个 sticky 参数用来置顶,其值应为大于0的整数,表示置顶的优先级(未指定则默认为 0)。数字越大,文章越靠前。

      在文章的 Front-matter 中增加一个 hide 参数用来隐藏。

      在Hexo的 _config.yml中可以通过hide_categories选项设置隐藏某分类下一个文章。

Next插件

  1. hexo-symbols-count-time

    • 简介

      给Hexo博客添加文字计数和阅读时长!

    • 安装

      1
      npm install hexo-symbols-count-time
    • Hexo配置_config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      # 发布字数统计
      # https://github.com/theme-next/hexo-symbols-count-time
      symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      # 允许排除代码块内的所有内容,以实现更准确的字数统计。
      exclude_codeblock: false
      awl: 2
      wpm: 300
      suffix: "mins."
  2. hexo-generator-searchdb

    • 简介

      为Hexo博客添加本地搜索功能,该插件用于生成搜索索引文件,其中包含文章的所有必要数据,可用于为博客编写本地搜索引擎。支持XML和JSON格式输出。

    • 安装

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

      1
      2
      3
      4
      5
      6
      7
      # 本地搜索
      # https://github.com/theme-next/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

    • 简介

      一个使用Github Emojis API添加了表情符号支持的Hexo插件。查看表情符号备忘单,了解其支持的所有表情符号。

    • 安装

      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-minivaline

    • 简介

      一个用于Hexo NexT主题的MiniValine评论插件。

    • 准备工作

      注册LeanCloud账号,创建应用,获得appId和appKey。可以使用国际版或者国内版!

    • 安装

      1
      npm install hexo-next-minivaline@2 --save
    • Hexo配置_config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      # 一个用于Hexo NexT主题的MiniValine插件。
      # https://github.com/MiniValine/hexo-next-minivaline
      minivaline:
      enable: true
      appid: zhM0AOiqle17oPoE84CoYw1e-gzGzoHsz # Your leancloud application appid
      appkey: itmzT1JbXfAjVwMqDhGPzU45 # Your leancloud application appkey
      mode: DesertsP # DesertsP or xCss
      placeholder: Write a Comment # Comment box placeholder
      math: true # Support MathJax.
      md: true # Support Markdown.
      enableQQ: false # Enable QQ avatar API.
      NoRecordIP: false # Do not record commenter IP.
      maxNest: 6 # Sub-comment maximum nesting depth.
      pageSize: 6 # Pagination size.
      adminEmailMd5: de8a7aa53d07e6b6bceb45c64027763d # The MD5 of Admin Email to show Admin Flag.[ Just Only DesertsP Style mode]
      tagMeta: # The String Array of Words to show Flag.[ Just Only xCss Style mode]
      - 管理员
      - 小伙伴
      - 访客
      master: # The MD5 String Array of master Email to show master Flag.[ Just Only xCss Style mode]
      - de8a7aa53d07e6b6bceb45c64027763d
      friends: # The MD5 String Array of friends Email to show friends Flag. [ Just Only xCss Style mode]
      - b5bd5d836c7a0091aa8473e79ed4c25e
      - adb7d1cd192658a55c0ad22a3309cecf
      - 3ce1e6c77b4910f1871106cb30dc62b0
      - cfce8dc43725cc14ffcd9fb4892d5bfc
      # MiniValine's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en | zh-CN | (and many more)
      # More i18n info: https://github.com/MiniValine/minivaline-i18n
      lang:
      # Expression Url.
      # https://github.com/MiniValine/MiniValine/blob/master/.github/FAQ.md#how-to-customize-emoticons
      emoticonUrl:
      - https://cdn.jsdelivr.net/npm/alus@latest
      - https://cdn.jsdelivr.net/gh/MiniValine/qq@latest
      - https://cdn.jsdelivr.net/gh/MiniValine/Bilibilis@latest
      - https://cdn.jsdelivr.net/gh/MiniValine/tieba@latest
      - https://cdn.jsdelivr.net/gh/MiniValine/twemoji@latest
      - https://cdn.jsdelivr.net/gh/MiniValine/weibo@latest
      lazyload: false
      cdn: https://cdn.jsdelivr.net/gh/MiniValine/MiniValine@3.1.5/dist/MiniValine.min.js
    • MiniValine插件

  5. hexo-next-fireworks

    • 简介

      一个鼠标点击动画特效!

    • 安装

      1
      npm install next-theme/hexo-next-fireworks

      安装完成即可生效,无需配置

  6. activate-power-mode

    • 简介

      一个为博客添加酷炫打字特效的插件

    • 使用教程

更新Hexo

  1. 进入博客目录

    1
    cd folder

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

  2. 卸载旧版hexo

    1
    npm uninstall hexo
  3. 更新hexo-cli

    1
    npm install hexo-cli -g
  4. 更新hexo

    1
    npm install hexo -g

更新Next

  1. 进入博客下的next目录

    1
    cd themes/next
  2. 保留本地文件更新
    1
    git stash
    1
    git pull
    1
    git stash pop
  3. 不保留本地文件更新
    1
    git reset --hard
    1
    git pull

友情链接

  1. 自动备份 Hexo 博客源文件
  2. Hexo 添加文章时自动打开编辑器
  3. 常用 Hexo 命令