这一期咱们接着来说自定义Yilia主题的事。
本文涉及到的修改稍微有一点点复杂,可以参考我的GitHub仓库。
修改webpack打包路径➴
为了方便管理代码,也是为了看起来干净一点,我简单修改了一下主题文档结构,把资源文件放在了assets
目录下
修改webpack.config.js
的output
模块
1 | output: { |
删除文章中那一堆无用的代码➴
使用yilia主题,每篇文章中都会出现一坨js代码,至今为止我也不知道是什么作用,删掉貌似也没有什么影响,每个页面能精简七八十K吧。
删掉source-src\scrept.ejs
中的
1 | <% for (var asset in compilation.assets) { %><% if (asset.indexOf('mobile') >= 0) { %><%= compilation.assets[asset].source() %><% } %><% } %> |
Js后加载➴
新建模板layout\_partial\load-scrept.ejs
1 | <script>function loadScript(e,t){d=document,o=d.createElement("script"),s=d.getElementsByTagName("head")[0].appendChild(o),o.setAttribute("src",e),t&&o.addEventListener("load",function(e){t(e)}),s.parentNode.insertBefore(o,s)}</script> |
上面的代码是已经压缩的,直接放进页面就可以
降新建的模板放入head部分,在layout\_partial\head.ejs
后面加入
1 | <('load-script') > - partial |
有了这段代码,我们就可以使用loadScript
加载各种Js文件了。
首先是主题本身的Js文件,也就是slider.js
,先分离scrept.ejs
,创建一个main.ejs
main.ejs
1 | <'<%=' > var left = |
script.ejs
1 | <script> |
webpack.config.js
,修改plugins
,增加main部分
1 | new HtmlWebpackPlugin({ |
在layout\_partial\head.ejs
中再加入
1 | <('main') > - partial |
为了优化其他js文件的加载速度,将不必要的js放在页面尾部,也就是after-footer.ejs
,具体修改可以参考我的GitHub仓库
优化中英文混排➴
优化中英文混排,可以引入pangu.js
,创建模板layout\_partial\pangu.ejs
1 | <% if (theme.pangu){ %> |
在after-footer.ejs
中引入
1 | <('pangu') > - partial |
在主题的配置文件_config.yml
中添加
1 | #pangu.js,中英文混排优化 |
更优雅的方式引入valine➴
上一篇文章写了引入valine,但是这样做并不是最佳方式,修改模板layout\_partial\post\valine.ejs
(需要用到上面提到的js后加载方式)
1 | <div id="vcomment"></div> |
上篇文章里的主题样式,我放到了comment.scss
中(这里为了方便管理,并没有把移动端代码放到mobile.scss
中)
1 | #vcomment{margin:30px;padding:10px;background:#fff} |
更多骚操作➴
更多骚操作请看我GitHub仓库中的修改。
- 本文作者: MonoLogueChi
- 本文链接: https://blog.xxwhite.com/2019/your-own-yilia-2.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!