构建Hexo主题Yilia的源码

相关站点

构建环境

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 代码

# 进入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

执行构建操作

# 进入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 测试构建结果

# 进入博客的根目录
# cd /blogroot

# 通过Hexo清理Public目录
# hexo clean

# 通过Hexo构建静态文件
# hexo generate

# 通过Hexo启动服务
# hexo server

# 浏览器打开博客页面，查看构建结果是否生效

本文作者： Clay
发布时间： 2019-03-12 20:22:43
最后更新： 2020-01-11 00:32:50
本文链接： https://www.techgrow.cn/posts/4cd11af0.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！