AnsChen's Home

Welcome to AnsChen's Home

0%

Start with Hexo

Posted on Edited on

依赖环境准备

Node.js安装

Hexo是基于Node.js安装的，因此需要先安装Node.js, 安装地址为 Node.js

安装Node.js会包含环境变量及npm的安装, 安装完成后可以检查Node.js是否安装成功 

1
node -v
检查npm是否安装成功 
1
npm -v
检测成功后就安装完成了

Hexo安装及初始化

Hexo是搭建个人网站的框架，安装方式如下 

1
2
3
4
5
6
## 安装hexo
sudo npm install hexo-cli -g

## cd到希望建立博客的文件夹目录下, 初始化blog文件夹
hexo init blog
cd blog

Hexo本地使用

Hexo基本使用命令

1
2
3
4
5
6
7
8
9
10
11
12
## 新建一篇博客
hexo n my_first_site
# hexo new post --path filepath name  # 指定生成md的地址

## 生成静态文件
hexo g

## 本地运行server
hexo s

## 清除缓存
hexo clean

  • 运行完hexo n my_first_site后，可以在 blog/source/_posts文件夹下发现多了一个my_first_site.md文件，此文件即我们编辑网页内容的主要源文件

  • 运行完hexo s之后，terminal会返回我们本地访问的网址，可以在上面查看预览样式 

    1
    2
    3
    INFO  Validating config
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

Hexo主题的选择

Next主题

  1. 下载next主题 
    1
    2
    ## 下载next主题到blog/themes/下
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  2. 修改Hexo配置文件使主题生效，将blog/_config.yml文件中的theme设定成next 
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

完成之后重新运行Hexo g以及Hexo s即可预览验证主题是否生效

Hexo 的远程部署

github 创建自己用户名的个人仓库

ref: 从零开始，一步一步教你用 Github 快速搭建免费的个人主页

Hexo 和远程git仓库绑定

将blog/_config.yml文件中的deploy设定成指定的远程部署网页即可, 如下所示 

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/{username}/{username}.github.io
  branch: master

Hexo 在远程网页上部署

在生成好静态网页之后，直接运行命令 

1
2
# 部署网页
Hexo d

这样最简单的网页部署就完成了，后面只需要修改blog/source/_posts/*.md文件即可。

Hexo高级配置

一般主题配置

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
43
44
45
46
47
48
## 修改作者, 文件名: (/_config.yml)
author: fishermanxx


## 修改标题下方菜单栏, 添加tag以及category栏, 文件名: (/themes/next/_config.yml)
##（另外需要新建一个tags页面去展示, 此时未生效, detail见 文章分类/分类展示 ）
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

## 添加浏览次数等统计量
### Step1. 修改/themes/next/_config.yml文件中的busuanzi_count:
busuanzi_count:
  enable: true
  total_visitors: false
  total_visitors_icon: fa fa-user
  total_views: false
  total_views_icon: fa fa-eye
  post_views: true  ## 文章访问量
  post_views_icon: fa fa-eye
### Step2. 统计字数等， 安装插件， bash运行
npm install hexo-symbols-count-time --save 
### Step3. 在/_config.yml中配置
symbol_count_time:
  symbols: true  # 是否统计字数
  time: false  # 是否统计阅读时长
  total_symbols: false  #总字数
  total_time: false  #总时长


## 添加文章结束标志
### Step1. 在/themes/next/layout/_macro 新建 passage-end_tag.swig, 并添加一下内容
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------------The END-------------------</div>
    {% endif %}
</div>
### Step2. 在/themes/next/layout/_macro/post.swig文件中，在 END POST BODY之后输入
<div>
  {% if not is_index %}
      {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
### Step3. 在/themes/next/_config.yml 末尾添加
passage_end_tag:
  enabled: true

自定义hexo new生成模板

hexo new (post/page/draft) $filename的模板，修改 /scaffolds/post.md文件(page.md和draft.md文件同理) 

1
2
3
4
5
6
7
8
title: {{ title }}
date: {{ date }}
tags:                #标签
categories:      #分类
copyright: true #版权声明
permalink: 01  #文章链接，有默认值
top: 0              #置顶优先级
password:      #密码保护

文章分类

分类展示

此处仅展示tags的设置, categories同理设定即可 1. 建立分类展示的静态页面 

1
hexo new page tags
发现生成一个/source/tags/index.md文件

  1. 设置页面类型, 直接在index.md文件中输入: 

    1
    2
    3
    4
    5
    6
    ---
    title: Tags
    date: 2022-03-21 00:50:56
    type: "tags"
    comments: false
    ---

  2. 修改菜单栏, 修改themes/${theme_name}/_config.yml文件，修改下列设置 

    1
    2
    3
    4
    menu:
      home: /
      archives: /archives
      tags: /tags

  3. 修改tags页面的字体大小, 修改文件themes/${theme_name}/_config.yml, 如下 

    1
    2
    3
    4
    5
    6
    7
    8
    # TagCloud settings for tags page.
    tagcloud:
      # All values below are same as default, change them by yourself.
      min: 30 # Minimun font size in px
      max: 50 # Maxium font size in px
      start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
      end: "#111" # End color (hex, rgba, hsla or color keywords)
      amount: 200 # Amount of tags, change it if you have more than 200 tags

  4. 修改文章末尾的tag的图标, 修改文件/themes/next/layout/_macro/post.swig,替换 

    1
    <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
    为 
    1
    <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

分类存储

通过修改配置文件blog/_config.yml中的new_post_name来让创建的文件按照时间分类，也可以按照(hexo new post --path filepath name)来创建，示例如下 

1
2
permalink: :year/:month/:day/:title/
new_post_name: :year/:month/:title.md # File name of new posts

文章加密访问

简单方法

  1. 打开主题目录下layout/_partials/head.swig文件,在meta标签后面插入这样一段代码 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script>
        (function(){
            if('{{ page.password }}'){
                if (prompt('请输入文章密码') !== '{{ page.password }}'){
                    alert('密码错误！');
                    history.back();
                }
            }
        })();
    </script>
  2. 在每篇文章md的开头添加 password: pwd, 即可以激活 
    1
    2
    3
    4
    5
    6
    ---
    title: Start with Hexo
    date: 2022-03-19 00:06:40
    tags: hexo
    # password: mypwd
    ---
    ### 安装插件方法 ref: hexo博客文章加密

  3. 安装插件 

    1
    npm install --save hexo-blog-encrypt

  4. 在/_config.yml中输入响应配置 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Security
    encrypt: # hexo-blog-encrypt
      silent: true
      abstract: 这是一篇加密文章，需要密码才能继续阅读。
      message: 当前文章暂不对外可见，请输入密码后查看！
      tags:
      - {name: private, password: mypwd}
      wrong_pass_message: 抱歉，您输入的密码错误，请检查后重新输入。
      wrong_hash_message: 抱歉, 当前文章不能被校验, 不过您还是可以看看解密后的内容

  5. 解决解密后目录消失问题，找到文件 themes/next/layout/_macro/sidebar.swig ，编辑如下部分： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <aside class="sidebar">
      <div class="sidebar-inner">

        {%- set display_toc = page.toc.enable and display_toc %}
        {%- if display_toc %}
          
          ## Start
          {%- if (page.encrypt) %}
            {%- set toc = toc(page.origin, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
          {%- else %}
            {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
          {%- endif %}
          ## End
          ## 同时删除 set toc这一句！！！

          {%- set display_toc = toc.length > 1 and display_toc %}
        {%- endif %}

插件安装

mermaid流程图

1
2
3
4
5
6
## 安装插件
npm install hexo-filter-mermaid-diagrams

## 在当前使用的主题的.config.yml中开启功能， ./themes/.config.yml
mermaid:
  on: true

Ref

3-hexo-homepage next next主题美化

Welcome to my other publishing channels