技术的路上奔跑

入门

0%

hexo搭建中的学习笔记

发表于 更新于 分类于 ， Valine：
本文字数： 3.8k 阅读时长 ≈ 3 分钟

一、安装

1. ubuntu

1.1. 安装nodejs和npm

1
2
3
curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install nodejs

1.2. 安装hexo和hexo-cli

1
2
sudo npm install hexo -g
sudo npm install hexo-cli -g

1.3. 迁移博客代码到另一台电脑

  • 先安装hexo和hexo-cli的环境
  • 然后执行
1
2
3
# 安装所有组件忽略脚本
sudo npm install --ignore-scripts
sudo npm audit fix

二、配置

1. 自定义css样式

  • 修改主题的配置文件themes/next/source/css/main.styl
  • 在下面语句后面加css样式即可，如下面把代码块的tab宽度改成4个空格
1
2
3
// Custom Layer
// --------------------------------------------------
pre {tab-size: 4;}

三、插件和操作

1. 博客置顶

单纯置顶

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
  • 然后在需要置顶的文章的Front-matter中加上top属性即可，根据top属性的大小排序，越大越靠前。比如下面这篇文章：
1
2
3
4
5
6
---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: 5
---

2. pdf插件

安装

  • 在博客bash中执行下列命令安装
1
npm install --save hexo-pdf

展示

  • 使用外部文章网页链接
1
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
  • 本地

需要创建一个同名的文件夹，放我们要上传的PDF文章

1
{% pdf  test.pdf %}

3. 字数统计和阅读时长(网站底部/文章内)

安装插件

1
npm install hexo-symbols-count-time --save

修改 站点配置文件

1
2
3
4
5
6
7
symbols_count_time:
    #文章内是否显示
    symbols: true
    time: true
    # 网页底部是否显示
    total_symbols: true
    total_time: true

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
    separated_meta: true
    #文章中的显示是否显示文字（本文字数|阅读时长）
    item_text_post: true
    #网页底部的显示是否显示文字（站点总字数|站点阅读时长）
    item_text_total: false
    # Average Word Length (chars count in word)
    awl: 4
    # Words Per Minute
    wpm: 275

4. latex公式支持

Next主题中自带latex插件

修改_config.xml文件即可

注意事项

1. 表格中不能使用\|，需要使用latex中的\mid来代替

示例

1
2
3
4
| 描述       | 代码              |
| ---------- | ----------------- |
| 使用`\|`   | a            \| b |
| 使用`\mid` | a $ \mid $ b      |

效果

描述代码
使用|a | b
使用\mida $ \mid $ b
2. latex公式在hexo中不能写注释，并且换行使用\\无效，需要使用\\\\，大括号需要使用\\{才可使用
3. latex公式在hexo中，出现没有解析成公式的情况，仔细对照代码和显示的代码，找到少的那个特殊字符（如_），给它加上\

5. sitemap生成工具

5.1. google

1
npm i hexo-generator-sitemap --save

5.2. baidu

1
npm i hexo-generator-baidu-sitemap --save

6. baidu站点自动提交

1
npm install hexo-baidu-url-submit --save

修改_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
deploy:
- type: git
  repository: git@github.com:Githubwyb/Githubwyb.github.io.git
  branch: master
- type: baidu_url_submitter

#设置百度主动推送
baidu_url_submit:
  count: 500                   # 比如200，代表提交最新的200个链接
  host: githubwyb.github.io    # 在百度站长平台中注册的域名，这个改为你自己的域名
  token: xxxxxx                # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt         # 文本文档的地址， 新链接会保存在此文本文档里，这个默认

7. plantuml支持

1
npm install --save hexo-filter-kroki

hexo-filter-kroki文档

7.1. 配置

  • 不配置就是默认的配置
  • 注意不能替换成plantuml搭建的服务器，因为默认是base64加密，和plantuml不一致
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
kroki:
  # the kroki free service server, you may switch to your self-hosted sever.
  server: "https://kroki.io/"       # 服务器地址，想要自己搭建就 docker pull yuzutech/kroki
  # Available values
  # "inline": <svg>xxx<svg/>
  # "inlineUrlEncode": <img src='data:image/svg+xml;>
  # "inlineBase64": <img src='data:image/svg+xml;base64>
  # "localLink": <img src="/assert/puml/xxxx.svg">
  # "externalLink": <img src="http://www.plantuml.com/plantuml/svg/xxx">
  link: "externalLink"

  # common options: svg/png
  outputFormat: "svg"
  # the generated img will have a default class name.
  className: 'kroki'

  # append some fragment per diagram, used for the theme or else config
  inserts:
    - diagram: plantuml
      after: 1
      # see https://plantuml.com/en/theme
      fragment: '!theme sketchy-outline'
    - diagram: mermaid
      after: 0
      # see https://mermaid-js.github.io/mermaid/#/theming
      fragment: "%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%"

7.2. 搭建kroki本地服务器

1
2
docker pull yuzutech/kroki
docker run -d -p 8000:8000 yuzutech/kroki

效果

在markdown中写入

1
2
3
4
5
6
7
` ``plantuml
@startuml
a->b
b->c
c->a
@enduml
```
$2aabbcc

踩坑记

1. latex注意事项

2. 自建域名在博客部署后解析失败

原因

  • 博客部署到github上时，如果使用自建域名需要添加CNAME文件到根目录下
  • hexo在部署时会把远程仓库整个覆盖掉，导致CNAME文件缺失而解析失败

解决方法

  • 在\hexo\source目录下放入CNAME文件即可
  • 所有source目录下的除了规定格式的会解析，其余文件都会原封不动放入仓库