相关站点
构建环境
- npm 6.5.0
- node 10.15.0
- webpack 1.13.2
- debian 9 (stretch)
目录结构
- layout - 模板目录
- languages - 语言配置目录
- source-src - 源文件目录，编译到 source 目录
- source - Hexo 加载主题资源的主目录，需要编译生成
一般来说，如果想修改页面的 html，可以到 layout 文件夹里直接修改。如果想修改 css、js，则需要到 source-src 文件夹里修改，并通过后面介绍的构建步骤，将源码编译到 source 目录下。
拉取 Yilia 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| # 进入Hexo的主题目录
# cd /blog-root/themes
# 克隆Yilia代码
# git clone https://github.com/litten/hexo-theme-yilia.git
# 进入Yilia的根目录
# cd hexo-theme-yilia
# 清理NPM模块的目录
# rm -rf node_modules
# 安装NPM模块
# npm install
|
执行构建操作
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
| # 进入Yilia的根目录
# cd hexo-theme-yilia
# 清理编译目录（非必要），如果博客已上线一段时间，且考虑到旧用户浏览器的缓存问题，此时必须保留旧的编译文件，否则页面在旧用户的浏览器上可能会显示不正常
# rm -rf source/*
# 开发可以执行以下命令，此时会用webpack打包，并把文件编译到source目录下，但编译后的文件不会经过压缩处理
# 由于webpack打包完成后，不会自动退出，当看到以下日志信息，则代表编译成功，可以使用快捷键 Crtl + C 强制退出
# npm run dev
> yilia@4.0.0 dev /usr/local/hexo-develop/themes/hexo-theme-yilia
> webpack
Hash: 05a7eebef4ac3b6cddcb
Version: webpack 1.15.0
Time: 16582ms
Asset Size Chunks Chunk Names
img/scrollbar_arrow.png 3.06 kB [emitted]
img/default-skin.png 547 bytes [emitted]
img/preloader.gif 866 bytes [emitted]
fonts/iconfont.b322fa.eot 20 kB [emitted]
fonts/iconfont.8c627f.woff 13.2 kB [emitted]
fonts/iconfont.16acc2.ttf 19.7 kB [emitted]
fonts/iconfont.45d7ee.svg 27.5 kB [emitted]
fonts/default-skin.b257fa.svg 1.55 kB [emitted]
fonts/tooltip.4004ff.svg 492 bytes [emitted]
main.be3dc1.js 179 kB 0 [emitted] main
mobile.3bc8c9.js 337 kB 1 [emitted] mobile
slider.0bdfac.js 177 kB 2 [emitted] slider
main.be3dc1.css 73.7 kB 0 [emitted] main
../layout/_partial/script.ejs 115 kB [emitted]
../layout/_partial/css.ejs 80 bytes [emitted]
[0] multi mobile 40 bytes {1} [built]
+ 441 hidden modules
Child html-webpack-plugin for "../layout/_partial/script.ejs":
+ 3 hidden modules
Child html-webpack-plugin for "../layout/_partial/css.ejs":
+ 3 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 5 hidden modules
Child extract-text-webpack-plugin:
+ 8 hidden modules
# 发布最终版本可以执行以下命令，此时编译后会经过压缩处理
# npm run dist
# 查看编译后的文件列表
# tree source
source
├── fonts
│ ├── default-skin.b257fa.svg
│ ├── iconfont.16acc2.ttf
│ ├── iconfont.45d7ee.svg
│ ├── iconfont.8c627f.woff
│ ├── iconfont.b322fa.eot
│ └── tooltip.4004ff.svg
├── img
│ ├── default-skin.png
│ ├── preloader.gif
│ └── scrollbar_arrow.png
├── main.45052c.css
├── main.45052c.js
├── mobile.4c76cb.js
└── slider.daf231.js
|
通过 Hexo 测试构建结果
1
2
3
4
5
6
7
8
9
10
11
12
13
| # 进入博客的根目录
# cd /blogroot
# 通过Hexo清理Public目录
# hexo clean
# 通过Hexo构建静态文件
# hexo generate
# 通过Hexo启动服务
# hexo server
# 浏览器打开博客页面，查看构建结果是否生效
|
