Hexo创建博客笔记

因为在创建的过程之中频繁用到CMD命令的输入,有些人可能已经忘记了如何快速的打开CMD终端窗口,那么这先教你如何快速的打开CMD窗口。有时间的时候在多写一些关于CMD的常用命令如何使用来提高你的工作效率…..

小技巧:

快速在当前目录下打开CMD命令行

  1. Alt+d
  2. 输入CMD回车

下面开始正式创建博客了,介绍的是用HEXO

STEP 1 在github注册GitHub,建立仓库如下:**

下载并安装[Git](https://git-scm.com/download/) ,默认安装即可。

STEP 1.1 配置并验证密钥如下

1
2
git config --global user.name "yxhsiao" #注册的用户名
git config --global user.email "yxhsiao@gmail.com" #注册邮箱

STEP1.2 生成密钥文件并验证

1
ssh-keygen -t rsa -C "yxhsiao@gmail.com"
  • 找到生成的密钥文件:C:\Users\yxhsi\.ssh\id_rsa.pub用记事本打开并将全部内容复制。
  • 打开GitHub_Settings_keys 页面,新建new SSH Key
  • Title:随意,Key:粘贴刚才复制的。add ssh key
  • CMD中验证密钥是否成功。
1
ssh git@github.com

执行后如果显示:PTY allocation request failed on channel 0,Hi RunDouble!You've successfully authenticated......表示OK

STEP 2 下载并安装 Nodejs ,默认即可。安装后检测是否安装成功

1
2
node -v
npm -v

如果以上两个命令执行后都分别显示一个版本号,则OK。如果NO,则卸载重来,重装之前还应该手动删除安装文件夹下的目录文件等。

STEP3 安装Hexo

在要存放本地博客文件的盘符下创建目录,可命名为Blog。在D:\Blog目录下打开CMD

1
npm install hexo-cli -g

STEP 4 部署博客

建本地博客。创建新的文件夹 D:\Blog ,并进入到该目录下。打开CMD,初始化博客

1
2
3
4
5
hexo init blog
cd blog
npm install
hexo g
hexo s

hexo 的常用命令

1
2
3
4
5
6
7
8
9
10
hexo init [folder] # 新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout ,默认使用 _config.yml 中的 default_layout 参数代替
hexo generate # 生成静态文件,该命令可以简写为 hexo g
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。 在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,
hexo render <file1> [file2] ... # 渲染文件
hexo server # 启动服务器,http://localhost:4000/
hexo deploy # 部署网站,该命令可以简写为 hexo d您可能需要运行该命令
hexo list <type> # 列出网站资料
hexo publish [layout] # <filename> 发表草稿
hexo version # 显示 Hexo 版本

在浏览器中输入:localhost:4000则能够在本地看到一个网页。这样已经成功了一半了。此时目录:D:\Blog\blog。内部有:

1
2
3
4
5
6
7
8
node_modules
scaffolds
source
themes `主题目录`
gitignore,txt
config.yml `站点配置文件`
package.json
package-lock.json

在D:\Blog\blog\source_posts\下能够看到有个hello-world.md文件,打开看到的和刚才看到的网页内容一样。这是一个默认测试的博客文章,现在看到的是一篇示例博客页面,只有一篇博文,而且功能和页面的渲染原始很LOW

STEP 5 利用MathJax来渲染LaTeX数学公式

安装插件:

1
2
npm install hexo-math --save
npm install --save hexo-deployer-git

修改js文件:D:\Blog\blog\node_modules\marked\lib\marked.js

将:

1
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

替换成:

1
escape: /^\\([`*\[\]()# +\-.!_>])/,
1
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

替换成:

1
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

这样一来MathJax就能与marked.js共存了。

博客中开启mathjax,在文章的抬头中加入:mathjax: true

1
2
3
hexo clean
hexo g
hexo s

STEP 6 推送网站

将Hexo与Github关联起来。打开站点配置文件_config.yml文末如下修改并保存。这是关键的一步。

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

STEP 7 安装GIT部署插件,输入命令即可

1
npm install hexo-deployer-git --save

此时可以部署到网站了。完成下步后浏览器输入:yxhsiao.github.io即可打开网页了看到上线的博客了。

1
2
3
hexo clean
hexo g
hexo d

STEP 8 安装并切换主题,设置、修改两个配置文件

安装主题 NEXT

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站点配置文件 "D:\BLOG\yxhsiao\_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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 # Site 网站
title: 静水深流
subtitle: 'My Note'
description: '逍遥心'
keywords:
author: Xiaoyaoxin
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://yxhsiao.github.io
#permalink: :year/:month/:day/:title
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory 目录
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing 写博文
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: true
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# Home page setting 主页设置
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag 分类和标签
default_category: uncategorized
category_map:
tag_map:

# Metadata elements 元数据
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format 时间格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s) 包含/排除文件
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment 部署
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
# repo: https://github.com/yxhsiao/yxhsiao.github.io.git
repo: git@github.com:yxhsiao/yxhsiao.github.io.git
branch: master

#本地搜索
search:
path: search.xml
field: post
format: html
limit: 10000

# Mathjax 公式渲染
marked:
gfm: true
pedantic: false
breaks: true
smartLists: true
smartypants: true
quotes: '“”‘’'
modifyAnchors: 0
anchorAlias: false
autolink: true
mangle: true
sanitizeUrl: false
dompurify: false
headerIds: true
lazyload: false
prependRoot: true
postAsset: false
external_link:
enable: false
exclude: []
nofollow: false
disableNunjucks: false
descriptionLists: true

# 创建备份
backup:
type: git
message: backup my blog of https://yxhsiao.github.io/
repository:
github: git@github.com:yxhsiao/yxhsiao.github.io.git,backup
coding: git@git.dev.tencent.com:yxhsiao/yxhsiao.git,backup

主题配置文件 "D:\BLOG\yxhsiao\themes\next\_config.yml"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# ---------------------------------------------------------------
# Theme Core Configuration Settings 主题核心配置设置
# See: https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------
cache:
enable: true
# Remove unnecessary files after hexo generate.
minify: false
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
# ---------------------------------------------------------------
# Scheme Settings 方案配置
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
# Dark Mode
darkmode: auto
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
# ---------------------------------------------------------------
# Site Information Settings 网站信息设置
# ---------------------------------------------------------------
favicon:
small: /images/favicon-16x16-next.webp
medium: /images/favicon-32x32-next.webp
apple_touch_icon: /images/apple-touch-icon-next.webp
safari_pinned_tab: /images/logo.svg
#android_manifest: /manifest.json
# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.webp
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
sidebar: false
post: false
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language:

# Open graph settings
# See: https://hexo.io/docs/helpers#open-graph
open_graph:
enable: true
options:
#twitter_card: <twitter:card>
#twitter_id: <twitter:creator>
#twitter_site: <twitter:site>
#twitter_image: <twitter:image>
#google_plus: <g+:profile_link>
#fb_admins: <fb:admin_id>
#fb_app_id: <fb:app_id>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ---------------------------------------------------------------
# Menu Settings 菜单设置
# ---------------------------------------------------------------
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
#Github: https://github.com/yxhsiao/yxhsiao.github.io || fab fa-github
RSS: /atom.xml || fa fa-rss
#E-Mail: mailto:yxhsiao@gmail.com || fa fa-envelope
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# ---------------------------------------------------------------
# Sidebar Settings 侧边栏设置
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------
sidebar:
# Sidebar Position.
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar padding in pixels.
padding: 18
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12

# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif # 图片地址
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true

# Posts / Categories / Tags in sidebar.
site_state: true

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/yxhsiao || fab fa-github
E-Mail: mailto:yxhsiao@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
enable: true
icons_only: false
transition: false

# Blog rolls
links_settings:
icon: fa fa-globe
title: Links
# Available values: block | inline
layout: block

links:
#Title: https://example.com

# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc.
max_depth: 6
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
# ---------------------------------------------------------------
# Footer Settings 页脚设置
# See: https://theme-next.js.org/docs/theme-settings/footer
# ---------------------------------------------------------------

# Show multilingual switcher in footer.
language_switcher: false

footer:
# Specify the year when the site was setup. If not defined, current year will be used.
since: 2020

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:

# Powered by Hexo & NexT
powered: false

# Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
beian:
enable: false
icp:
# The digit in the num of gongan beian.
gongan_id:
# The full num of gongan beian.
gongan_num:
# The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
gongan_icon_url:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# ---------------------------------------------------------------
# Post Settings 贴子设置
# See: https://theme-next.js.org/docs/theme-settings/posts
# ---------------------------------------------------------------
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
separated_meta: true
item_text_total: false

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: false
animation: false
#comment: Buy me a coffee

reward:
#wechatpay: /images/wechatpay.webp
#alipay: /images/alipay.webp
#paypal: /images/paypal.webp
#bitcoin: /images/bitcoin.webp

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
#Twitter: https://twitter.com/username || fab fa-twitter
#Telegram: https://t.me/channel_name || fab fa-telegram
#WeChat: /images/wechat_channel.webp || fab fa-weixin
#RSS: /atom.xml || fa fa-rss

# Related popular posts
# Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
related_posts:
enable: false
title: # Custom header, leave empty to use the default one
display_in_home: false

# Post edit
# Easily browse and edit blog source code online.
post_edit:
enable: false
url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
#url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit

# Show previous post and next post in post footer if exists
# Available values: left | right | false
post_navigation: left
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
# ---------------------------------------------------------------
# Custom Page Settings 自定义页面设置
# See: https://theme-next.js.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------

# TagCloud settings for tags page.
tagcloud:
min: 12 # Minimum font size in px
max: 30 # Maximum font size in px
amount: 200 # Total amount of tags
orderby: name # Order of tags
order: 1 # Sort order

# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
calendar_id: <required> # Your Google account E-Mail
api_key: <required>
orderBy: startTime
showLocation: false
offsetMax: 72 # Time Range
offsetMin: 4 # Time Range
showDeleted: false
singleEvents: true
maxResults: 250
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
# ---------------------------------------------------------------
# Misc Theme Settings 杂项主题设置
# See: https://theme-next.js.org/docs/theme-settings/miscellaneous
# ---------------------------------------------------------------

# Preconnect CDN for fonts and plugins.
# For more information: https://www.w3.org/TR/resource-hints/#preconnect
preconnect: false

# Set the text alignment in posts / pages.
text_align:
# Available values: start | end | left | right | center | justify | justify-all | match-parent
desktop: justify
mobile: justify

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

# Browser header panel color.
theme_color:
light: "#222"
dark: "#222"

# Override browsers' default behavior.
body_scrollbar:
# Place the scrollbar over the content.
overlay: false
# Present the scrollbar even if the content is not overflowing.
stable: false

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

back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

# Reading progress bar
reading_progress:
enable: true
# Available values: left | right
start_at: left
# Available values: top | bottom
position: bottom
reversed: false
color: "#37c6c0"
height: 3px

# Bookmark Support
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false
permalink: https://github.com/yourname
title: Follow me on GitHub

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
# ---------------------------------------------------------------
# Font Settings 字体设置
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
# light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS #---------------------------------------------------------------
font:
enable: false
# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:
# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Lato
size:

# Font settings for site title (.site-title).
title:
external: true
family:
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family:
size: 8

# Font settings for posts (.post-body).
posts:
external: true
family:

# Font settings for <code> and code blocks.
codes:
external: true
family:
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
# ---------------------------------------------------------------
# SEO Settings 搜索引擎优化设置
# See: https://theme-next.js.org/docs/theme-settings/seo
# ---------------------------------------------------------------

# If true, site-subtitle will be added to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: false

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false
# If true, an icon will be attached to each external URL
exturl_icon: true

# Google Webmaster tools verification.
# See: https://developers.google.com/search
google_site_verification:

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmasters
bing_site_verification:

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
baidu_site_verification:
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# ---------------------------------------------------------------
# Third Party Plugins & Services Settings 第三方插件和服务设置
# See: https://theme-next.js.org/docs/third-party-services/
# More plugins: https://github.com/next-theme/awesome-next
# You may need to install the corresponding dependency packages
# ---------------------------------------------------------------

# Math Formulas Render Support
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math:
# Default (false) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in front-matter.
# If you set it to true, it will load mathjax / katex script EVERY PAGE.
every_page: true

mathjax:
enable: true
# Available values: none | ams | all
tags: none
mhchem: true

katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: false

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: false

# A JavaScript library for zooming images like Medium.
# Warning: Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://medium-zoom.francoischalifour.com
mediumzoom: false

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: false

# Pangu Support
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: false

# Quicklink Support
# For more information: https://getquick.link
# Front-matter variable (nonsupport home archive).
quicklink:
enable: false

# Home page and archive page can be controlled through home and archive options below.
# This configuration item is independent of `enable`.
home: false
archive: false

# Default (true) will initialize quicklink after the load event fires.
delay: true
# Custom a time in milliseconds by which the browser must execute prefetching.
timeout: 3000
# Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
priority: true

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
49
50
51
52
53
54
55
56
57
58
59
60
# ---------------------------------------------------------------
# Statistics and Analytics 统计和分析
# See: https://theme-next.js.org/docs/third-party-services/statistics-and-analytics
# ---------------------------------------------------------------
# Google Analytics
# See: https://analytics.google.com
google_analytics:
tracking_id: # <app_id>
# By default, NexT will load an external gtag.js script on your site.
# If you only need the pageview feature, set the following option to true to get a better performance.
only_pageview: false

# Baidu Analytics
# See: https://tongji.baidu.com
baidu_analytics: # <app_id>

# Growingio Analytics
# See: https://www.growingio.com
growingio_analytics: # <project_id>

# Cloudflare Web Analytics
# See: https://www.cloudflare.com/web-analytics/
cloudflare_analytics:

# Microsoft Clarity Analytics
# See: https://clarity.microsoft.com/
clarity_analytics: # <project_id>

# Show number of visitors of each article.
# You can visit https://www.leancloud.cn to get AppID and AppKey.
leancloud_visitors:
enable: false
app_id: # <your app id>
app_key: # <your app key>
# Required for apps from CN region
server_url: # <your server url>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true

# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
enable: false
collection: articles # Required, a string collection name to access firestore database
apiKey: # Required
projectId: # Required

# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye
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
# ---------------------------------------------------------------
# Search Services 搜索服务
# See: https://theme-next.js.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search
# For more information: https://www.algolia.com
algolia_search:
enable: false
hits:
per_page: 10

# 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: false
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
# ---------------------------------------------------------------
# Chat Services 聊天服务
# See: https://theme-next.js.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# A button to open designated chat widget in sidebar.
# Firstly, you need to enable and configure the chat service.
chat:
enable: false
icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
text: Chat # Button text, change it as you wish.

# Chatra Support
# For more information: https://chatra.com
# Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: # Visit Dashboard to get your ChatraID
#embed: # Unfinished experimental feature for developers. See: https://chatra.com/help/api/#injectto

# Tidio Support
# For more information: https://www.tidio.com
# Dashboard: https://www.tidio.com/panel/dashboard
tidio:
enable: false
key: # Public Key, get it from dashboard. See: https://www.tidio.com/panel/settings/developer

# Gitter Support
# For more information: https://gitter.im
gitter:
enable: false
room:
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
# ---------------------------------------------------------------
# Tags Settings 标签设置
# See: https://theme-next.js.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bootstrap callout)
note:
# Note tag style values:
# - simple bootstrap callout old alert style. Default.
# - modern bootstrap callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

# Tabs tag
tabs:
# Make the nav bar of tabs with long content stick to the top.
sticky: false
transition:
tabs: false
labels: true

# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
enable: true
# Default height
height: 500px

# Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme:
light: default
dark: dark
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
# ---------------------------------------------------------------
# Animation Settings 动画设置
# ---------------------------------------------------------------

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
enable: true
async: false
transition:
# All available transition variants: https://theme-next.js.org/animate/
post_block: fadeIn
post_header: fadeInDown
post_body: fadeInDown
coll_header: fadeInLeft
# Only for Pisces | Gemini.
sidebar: fadeInUp

# Progress bar in the top during page loading.
# For more information: https://github.com/CodeByZach/pace
pace:
enable: false
# All available colors:
# black | blue | green | orange | pink | purple | red | silver | white | yellow
color: blue
# All available themes:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

# Canvas ribbon
# For more information: https://github.com/hustcc/ribbon.js
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon

其他配置文件1 sit/source/_date/head.njk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/love.js"></script>

<!-- 文章加密 -->
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

其他配置文件2 sit/source/_date/post-body-end.njk

1
2
3
<div>
<div class="end-slogan" style="text-align:center;font-size:22px;letter-spacing:10px;user-seclect:none;color:#bbb">----------- 本文结束<i class="fa fa-star"></i>感谢阅读-----------</div>
</div>

其他配置文件3 sit/source/_date/styles.styl

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// 主页文章添加阴影效果
.post-block {
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

// 避免链接和代码过长,而导致样式问题
.post-block code {
word-break: break-all;
}
.post-block a {
word-break: break-all;
}

// 图片圆角
.post-body img {
border-radius: 1em
}

// 将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

// 适配暗黑模式下博客的 tag
.posts-expand .post-tags a {
border-bottom: none;
padding: 1px 5px;
background: var(--content-bg-color);
}

.my_post_copyright {
// width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
// background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

创建文章模板

Front-matter预定义参数

1
2
3
4
5
6
7
8
title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories: [html, css]
tags: [hexo]
toc: true
mathjax: true
password: "hello"
1
2
3
4
5
6
7
8
9
10
11
12
## 冒号后面有空格:
1. title: 文章模板 //设置博客的标题
2. categories: //博文的分类
\- [html, css] //括号内的两个是上下级关系。1: html,1.1: css。
\- [hexo, front-matter] //有括号的两行内容之前是平行关系,如果没有括号时,则是上下级关系。
3. tags: //博文标签
\- 笔记 //博文的标签
\- 技巧 //博文的标签。多个标签没有上下级的关系。
4. date: //博文创建时间,系统自动生成。
5. update: //博文更新时间,系统自动生成。
6. mathjax: true //数学公式开关打开
7. password: 阅读密码

公式渲染

安装

1
npm install hexo-renderer-marked --save

如果安装了其他的渲染引擎,要卸载掉:

1
npm uninstall *** --save

配置:相关的站点配置文件 _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
marked:
gfm: true
pedantic: false
breaks: true
smartLists: true
smartypants: true
quotes: '“”‘’'
modifyAnchors: 0
anchorAlias: false
autolink: true
mangle: true
sanitizeUrl: false
dompurify: false
headerIds: true
lazyload: false
prependRoot: true
postAsset: false
external_link:
enable: false
exclude: []
nofollow: false
disableNunjucks: false
descriptionLists: true

在文章的Metadata 中配置

1
mathjax: true

实现嵌入pdf 功能

安装

1
npm install --save hexo-pdf

更改配置 关联的主题配置文件

1
2
3
4
pdf:
enable: true
# Default height
height: 500px

使用方法

1
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
1
{% pdf ./bash_freshman.pdf %}

添加搜索

安装

1
npm install hexo-generator-search --save

修改配置:关联的站点配置文件

1
2
3
4
5
6
#本地搜索
search:
path: search.xml
field: post
format: html
limit: 10000