从零开始制作一个Butterfly主题

新建本地博客源码目录文件夹

安装 hexo

参考教程: https://blog.anheyu.com/posts/ddae.html

1
2
3
4
npm install hexo-cli -g
hexo init
npm install hexo-deployer-git --save
npm install hexo-renderer-pug hexo-renderer-stylus --save

安装Hexo框架

安装 Butterfly

参考教程: https://butterfly.js.org/posts/21cfbf15/#%E5%AE%89%E8%A3%9D

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装Butterfly主题

修改自定义主题配置

  • 将butterfly文件夹重命名为你的主题名，例如 /…/JARVIS/themes/butterfly/ 修改为 /…/JARVIS/themes/jarvis/

  • 将主题文件夹package.json修改以下内容

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
{
  "name": "hexo-theme-jarvis",   // 修改为你的主题名
  "version": "1.0.0",            // 修改为你的版本号
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "hexo",
    "theme",
    "jarvis",                    // 修改为你的主题名
    "Card UI Design",
    "lanmoyan",                  // 修改为你的名字   
    "hexo-theme-jarvis"          // 修改为你的主题名
  ],
  "repository": {
    "type" : "git",
    "url" : "https://github.com/lanmoyan/jarvis.git"      // 修改为你的Github仓库
  },
  "bugs": {
    "url": "https://github.com/lanmoyan/jarvis/issues",   // 修改为你的Github仓库issues
    "email": "1227124782@qq.com"
  },
  "dependencies": {
    "hexo-renderer-stylus": "^3.0.1",
    "hexo-renderer-pug": "^3.0.0"
  },
  "homepage": "https://jarvis.imoyan.top/",                // 修改为你的博客主页
  "author": "lanmoyan",                                    // 修改为你的名字
  "license": "Apache-2.0"                                  // 修改为你的license
}

修改package前

修改package后

  • 将调试台输出主题名修改

下面这个网站可以自动生成符号艺术字

修改控制台前

修改控制台后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo.on('ready', () => {
  const { version } = require('../../package.json')
  hexo.log.info(`
  ===================================================================

           ##    ###    ########  ##     ## ####  ######
           ##   ## ##   ##     ## ##     ##  ##  ##    ##
           ##  ##   ##  ##     ## ##     ##  ##  ##
           ## ##     ## ########  ##     ##  ##   ######
     ##    ## ######### ##   ##    ##   ##   ##        ##
     ##    ## ##     ## ##    ##    ## ##    ##  ##    ##
      ######  ##     ## ##     ##    ###    ####  ######
  
                            ${version}
  ===================================================================`)
})

修改 _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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 陌颜Hao
subtitle: '愿永不忘初心！'
description: '愿永不忘初心！'
keywords: '懒陌颜,陌颜Hao的博客,博客,懒陌颜博客,Blog,anzhiyu,懒陌颜`Blog,hexo,LANMOYAN, HEXO lanmoyan,Blog,lanmoyan`Blog,💖,懒,陌颜,懒陌颜,In懒陌颜,Go懒陌颜,lanmoyan'
author: 懒陌颜
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://jarvis.imoyan.top/
permalink: posts/:abbrlink.html
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: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  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: jarvis

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  - type: git
    repository:
      # github: git@github.com:anzhiyu-c/anzhiyu-c.github.io.git  #用户名@服务器Ip:git仓库位置
      github: https://lanmoyan@github.com/lanmoyan/jarvis.git,main
    branch: main

# 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
abbrlink:
	alg: crc16   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

# 本地搜索：https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: all
  content: true

# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true

# https://github.com/hexojs/hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20
rss: /atom.xml

# Extensions
plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap

# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  path:
  vmid: 382175696
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: false
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value
cinema: # 追剧设置
  enable: true
  path:
  vmid: 382175696
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value

# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
  meting: true
  asset_inject: false

配置文章链接转数字或字母

参考: https://github.com/rozbo/hexo-abbrlink

1
npm install hexo-abbrlink --save

本地搜索依赖

参考：https://github.com/wzpan/hexo-generator-search

1
npm install hexo-generator-search --save

Sitemap

1
npm install hexo-generator-sitemap --save

Rss

1
npm install hexo-generator-feed --save

追番插件

1
npm install hexo-bilibili-bangumi --save

Aplayer 音乐播放器

1
npm install hexo-tag-aplayer --save
1
2
3
aplayerInject:
  enable: true
  per_page: true
1
2
# aplayer音乐
- <div class="aplayer no-destroy" data-id="8152976493" data-server="netease" data-type="playlist"   data-orde