Clay

用进废退 | 工字不出头

  • 主页
  • 归档
  • 随笔
  • 搜索
所有文章

Clay

用进废退 | 工字不出头

  • 主页
  • 归档
  • 随笔

构建Hexo主题Yilia的源码

发表于:2019-03-12
字数统计:743
阅读量统计:

相关站点

  • Yilia Github
  • Yilia 官方构建文档
  • Yilia 构建常见问题
  • Yilia 升级 Webpack 版本

构建环境

  • 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

# 浏览器打开博客页面,查看构建结果是否生效
本文作者: Clay
发布时间: 2019-03-12 20:22:43
最后更新: 2020-04-23 15:32:26
本文链接: https://www.techgrow.cn/posts/4cd11af0.html
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
赏

谢谢你的支持

支付宝
微信
  • 前端

扫一扫,分享到微信

微信分享二维码
Docker之十八镜像瘦身
Linux解决libstdc++的版本问题
© 2021 Clay
本站总访问量  人次
载入天数...载入时分秒...
粤ICP备19024664号
  • 所有文章

显示标签:

  • AI
  • C/C++
  • CI/CD
  • CentOS
  • Centos
  • Docker
  • HarmonyOS
  • Java
  • Linux
  • Manjaro
  • Python
  • Web服务器
  • 企业面试
  • 分布式
  • 前端
  • 区块链
  • 开发工具
  • 开源
  • 微服务
  • 数据库
  • 架构
  • 树莓派
  • 爬虫
  • 版本控制
  • 知识图谱
  • 算法与数据结构
  • 缓存
  • 网络攻防
  • 随笔

    [^_^] 出错啦!请重新刷新页面!