安装Hexo和Next主题过程记录
Xplorist Lv6
  2020-10-22 10:46:44 2020-10-22 10:46      

开发环境以及版本

  • 硬件配置:
    • CPU: AMD Ryzen 7 3700X 8-Core Processor 3.59GHz X64
    • RAM: 16.0 GB
  • 操作系统:
    • 版本: Windows 10 专业工作站版
    • 版本号: 2004
    • 操作系统版本: 19041.572
    • 位宽类型: X64
  • 软件环境:
    • NodeJS: v12.19.0
    • Yarn: 1.22.5
    • Hexo: 5.2.0
    • Next: 8.0.1

查看软件环境命令及结果

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
PS D:\xplorist\notebookx> node -v
v12.19.0
PS D:\xplorist\notebookx> yarn -v
1.22.5
PS D:\xplorist\notebookx> hexo -v
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.0.1
Documentation: https://theme-next.js.org
========================================
hexo: 5.2.0
hexo-cli: 4.2.0
os: Windows_NT 10.0.19041 win32 x64
node: 12.19.0
v8: 7.8.279.23-node.44
uv: 1.39.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.2
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

软件环境准备

  1. 安装NodeJS –过程略
  2. 安装Yarn –过程略
  3. 安装hexo-cli
  4. 安装hexo-theme-next

安装hexo-cli

  • 命令
    1
    yarn global add hexo-cli

创建hexo项目

  • 命令
    1
    hexo init notebookx
  • 结果
    1
    2
    3
    4
    5
    6
    7
    D:\xplorist>hexo init notebookx
    INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
    INFO  Install dependencies
    warning hexo-renderer-stylus > stylus > css-parse > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
    warning hexo-renderer-stylus > stylus > css-parse > css > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
    warning hexo-renderer-stylus > stylus > css-parse > css > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
    INFO  Start blogging with Hexo!

安装hexo-theme-next

  • 命令
    1
    2
    cd notebookx
    yarn add hexo-theme-next
  • 结果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    D:\xplorist>cd notebookx

    D:\xplorist\notebookx>yarn add hexo-theme-next
    yarn add v1.22.5
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    info [email protected]: The platform "win32" is incompatible with this module.
    info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
    [3/4] Linking dependencies...
    [4/4] Building fresh packages...

    success Saved lockfile.
    success Saved 1 new dependency.
    info Direct dependencies
    └─ [email protected]
    info All dependencies
    └─ [email protected]
    Done in 4.35s.

配置_config.yml修改theme

1
2
3
4
# _config.yml

#theme: landscape
theme: next

配置_config.next.yml

  • 通过PowerShell执行以下命令

    1
    2
    3
    D:
    cd D:\xplorist\notebookx
    cp node_modules/hexo-theme-next/_config.yml _config.next.yml

    将配置next主题的配置文件复制到notebookx项目根目录下，并更名为_config.next.yml

  • 修改_config.next.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
    # _config.next.yml

    # --解释：打开Gemini，使用Gemini这个主题--
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    # --解释：darkmode改为true， 开启暗黑模式--
    # Dark Mode
    #darkmode: false
    darkmode: true

    # --解释: enable 改为 false,关闭动画，动画加载很慢给博客一种缓慢刷新网速很慢的感觉，影响感官--
    motion:
      #enable: true
      enable: false



    # --解释: badges 改为 true, 显示徽章，其实就是tags,categories,archives上添加个数的数字图标--
    menu_settings:
      icons: true
      #badges: false
      badges: true

    # --解释: --

配置scaffolds文件夹中的模板

  • 修改post.md

    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
    <!-- post.md -->

    ---
    title: {{ title }}
    date: {{ date }}
    tags:
      - tag
    categories:
      - category
    ---

    # 开发环境以及版本

    * 硬件配置: 
        * CPU: AMD Ryzen 7 3700X 8-Core Processor 3.59GHz X64
        * RAM: 16.0 GB
    * 操作系统: 
        * 版本: Windows 10 专业工作站版 
        * 版本号: 2004
        * 操作系统版本: 19041.572
        * 位宽类型: X64
    * 软件环境:
        * NodeJS: v12.19.0
        * Yarn: 1.22.5
        * Hexo: 5.2.0
        * Next: 8.0.1

  • 配置自定义模板diary.md

    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
    <!-- diary.md -->

    ---
    title: {{ title }}
    date: {{ date }}
    tags:
      - diary
    categories:
      - diary
    ---

    : 手动修改categories中的year和month
    - [diary, year, month]

    # todo-list

    * [x] yy
    * [ ] x

    # record-list

    * x

    # home-record-list

    * x

    # reference-site-list

    **theme**
    > * [xplorist.tech website](https://www.xplorist.tech/)

    # inside-post-link-list

    **theme**
    > * {% post_link hello-world '通往 hello world 文章的链接' %}
    > * {% post_link template/hexo-diary-template '通往hexo-diary-template文章的链接' %}

命令行创建post和diary

  • post 文章

    1
    hexo new post --path folder-name/file-name "title-name"

  • diary 日志

    1
    hexo new diary --path diary/2020/10/22 "diary 2020-10-22"

命令行实例

创建hexo-diary-template

  • 命令

    1
    hexo new post --path template/hexo-diary-template "hexo diary template"

  • 结果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    D:\xplorist\notebookx>hexo new post --path template/hexo-diary-template "hexo diary template"
    INFO  Validating config
    INFO  ==================================
      ███╗   ██╗███████╗██╗  ██╗████████╗
      ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
      ██╔██╗ ██║█████╗   ╚███╔╝    ██║
      ██║╚██╗██║██╔══╝   ██╔██╗    ██║
      ██║ ╚████║███████╗██╔╝ ██╗   ██║
      ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
    ========================================
    NexT version 8.0.1
    Documentation: https://theme-next.js.org
    ========================================
    INFO  Created: D:\xplorist\notebookx\source\_posts\template\hexo-diary-template.md

配置菜单栏并在source文件夹中添加子文件夹

  • 配置菜单栏,修改_config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # _config.next.yml

    # --解释: 取消home，about，tags，categories，archives的注释，显示左边的目录--
    menu:
      #home: / || fa fa-home
      #about: /about/ || fa fa-user
      #tags: /tags/ || fa fa-tags
      #categories: /categories/ || fa fa-th
      #archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive

  • 添加categories文件夹,并在其中添加index.md, 执行此步操作后，左边的菜单栏的 categories 菜单才会有内容

    1
    2
    3
    4
    5
    6
    <!-- index.md -->

    ---
    title: categories
    type: categories
    ---

  • 添加tags文件夹,并在其中添加index.md, 执行此步操作后，左边的菜单栏的 tags 菜单才会有内容

    1
    2
    3
    4
    5
    6
    <!-- index.md -->

    ---
    title: tags
    type: tags
    ---

  • 添加about文件夹,并在其中添加index.md, 执行此步操作后，左边的菜单栏的 about 菜单才会有内容

    1
    2
    3
    4
    5
    6
    <!-- index.md -->

    ---
    title: about
    type: about
    ---

  • 添加images文件夹，并在其中添加头像图片xplorist.jpg,修改_config.next.yml

    1
    2
    3
    4
    5
    6
    # _config.next.yml

    # --解释: custom_logo 改为 /images/xplorist.jpg， 自定义头像logo --
    # Custom Logo (Warning: Do not support scheme Mist)
    #custom_logo: #/uploads/custom-logo.jpg
    custom_logo: /images/xplorist.jpg

添加插件

添加hexo-generator-searchdb插件

  • 命令
    1
    yarn add hexo-generator-searchdb
  • 配置_config.yml (注意：不是next主题的配置文件哦，是自己创建的hexo项目的配置文件)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # _config.yml

    # ----------------- sepeate line -----------------------
    # xplorist custom
    # Plugins
    # Plugin: hexo-generator-searchdb
    search:
      path: search.xml
      field: post
      content: true
      format: html
  • 配置_config.next.yml
    1
    2
    3
    4
    5
    6
    # _config.next.yml

    # --解释：enable 改为 true, 打开本地搜素，左边的菜单上会显示搜索菜单 --
    local_search:
      #enable: false
      enable: true

修改网站相关信息

修改菜单栏信息

  • 修改_config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # _config.yml

    # Site
    #title: Hexo
    title: Xplorist
    #subtitle: ''
    subtitle: 'Technology Blog'
    #description: ''
    description: 'Exploration, a journey that never ends.'
    #keywords:
    keywords: xplorist
    #author: John Doe
    author: xplorist
    language: en
    timezone: ''

修改about的信息

  • 修改about/index.md
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: about
    type: about
    ---

    # 联系方式

    * email: [email protected]

添加代码块复制功能

  • 配置 _config.next.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # _config.next.yml

    # ---解释: copy_button 的 enable 改为 true, 打开代码块复制功能--

    codeblock:
      # Code Highlight theme
      # All available themes: https://theme-next.js.org/highlight/
      theme:
        light: default
        dark: tomorrow-night
      prism:
        light: prism
        dark: prism-dark
      # Add copy button on codeblock
      copy_button:
        #enable: false
        enable: true
        # Available values: default | flat | mac
        style:

常用命令

  • 命令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    hexo init project-name

    hexo new post --path folder-name/file-name "title-name"

    hexo new diary --path diary/2020/10/22 "diary 2020-10-22"

    hexo server

    hexo generate

    hexo generate --watch

  • 本文标题：安装Hexo和Next主题过程记录
  • 本文作者：Xplorist
  • 创建时间：2020-10-22 10:46:44
  • 本文链接：https://xplorist.tech/2020/10/22/74bbd9242c43/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论