内容简介:自己动手修改Yilia主题,这有什么难的,简单修修模板,改改CSS?自从本站建站以来,一直在用Yilia主题,所以对Yilia主题或多或少有一些自己的理解,现在想分享一下怎么修改Ylila主题。这篇文章都是我自己一路踩坑踩过来的,遇到不明白的问题欢迎在评论区留言讨论(但请一定要准确说明问题,含含糊糊什么都说不清的话,我也不可能知道你遇到了什么问题),想要参考的话,请在我的
自己动手修改Yilia主题,这有什么难的,简单修修模板,改改CSS?
自从本站建站以来,一直在用Yilia主题,所以对Yilia主题或多或少有一些自己的理解,现在想分享一下怎么修改Ylila主题。
这篇文章都是我自己一路踩坑踩过来的,遇到不明白的问题欢迎在评论区留言讨论(但请一定要准确说明问题,含含糊糊什么都说不清的话,我也不可能知道你遇到了什么问题),想要参考的话,请在我的 GitHub 上查看我的修改。
Clone
修改的第一步,我们需要先Fork一份Yilia主题,这一步可以在 GitHub 上完成。
Fork之后Clone到本地,然后就可以开始了。
从源码构建Yilia
Yilia需要使用webpack构建生成,所以在此之前,需要有一定的webpack基础,如果没有也不要紧,马上百度去了解一下还来得及。
从源码构建,可以参考 Yilia源码目录结构及构建须知
首先需要搞定开发环境,安装好 node
和 npm
npm install
但是直接这样做你可能会遇到非常大的一个坑,因为作者的开发环境已经很老了,webpack这一套东西的更新速度实在是太快了,而且淘汰也非常的快,即使你跟着百度一步一步搞完了,后面打包的时候也会遇到很多的坑,所以我建议你直接从我的 仓库 里拷贝 package.json
postcss.config.js
webpack.config.js
三个文件到你的项目里,然后再执行
npm install
如果长时间卡死,建议使用淘宝源
npm install --registry=https://registry.npm.taobao.org
搞好之后,尝试构建一下
npm run dist
目录解析
前面讲了从源码构建,勉勉强强算是把开发环境搞好了,咱们接着来研究一下Yilia主题
./ |-- languages |-- layout | `-- _partial | `-- post |-- source | |-- fonts | `-- img `-- source-src |-- css | | `-- core | | `-- fonts | `-- img `-- js
首先看几个文件夹,
language layout source source-src
简单修改
我们举两个简单的例子,来说明一下怎么从源码修改
取消统计代码
用过Yilia主题的都知道,一段统计代码总是拉低你的加载速度,不得已,需要自己去注释掉,我们现在说一下怎么从源码上删掉这段统计代码,首先看目录结构
.\source-src\js\ |-- Q.js |-- anm.js |-- aside.js |-- browser.js |-- fix.js |-- main.js |-- mobile.js |-- report.js |-- share.js |-- slider.js |-- util.js `-- viewer.js
一眼扫过去,再简单分析一下,就知道,统计上报的代码写在了 report.js
里
修改 main.js
,将其注释掉,然后使用webpack打包 npm run dist
// 样式 import '../css/main.scss' // 上报 //import './report' // 图片查看器 import Viewer from './viewer'
完成,新生成的main.xxxxxx.js里已经没有了统计代码了。
增加Valine评论
目前我的博客引入Valine评论的方式稍有复制,先来介绍一下最简单的引入方式
修改 layout/_partial/article.ejs
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %> <section id="comments" class="comments"> <style> .comments{margin:30px;padding:10px;background:#fff} @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}} </style> <%- partial('post/valine', { key: post.slug, title: post.title, url: config.url+url_for(post.path) }) %> </section> <% } %>
添加 layout/_partial/post/valine.ejs
<div id="vcomment"></div> <script src="//cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script> <script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script> <script> var notify = '<%= theme.valine.notify %>' == true ? true : false; var verify = '<%= theme.valine.verify %>' == true ? true : false; new Valine({ av: AV, el: '#vcomment', notify: notify, verify: verify, app_id: "<%= theme.valine.appid %>", app_key: "<%= theme.valine.appkey %>", placeholder: "<%= theme.valine.placeholder %>", avatar: "<%= theme.valine.avatar %>", avatar_cdn: "<%= theme.valine.avatar_cdn %>", pageSize: <%= theme.valine.pageSize %> }); </script>
简单的部分就讲完了,剩下的内容稍微有点复制,而且属于魔改系类,算是个人的一些见解,所以就分到了另一节里,下篇文章会稍微讲解一下webpack的配置,还有js后加载和DOM阻塞的一下问题。
请作者吃辣条
支付宝
微信
- 本文作者: MonoLogueChi
- 本文链接: https://www.xxwhite.com/2019/your-own-yilia-1.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Software Design 中文版 01
[日] 技术评论社 / 人民邮电出版社 / 2014-3 / 39.00
《Software Design》是日本主流的计算机技术读物,旨在帮助程序员更实时、深入地了解前沿技术,扩大视野,提升技能。内容涵盖多平台软件开发技巧、云技术应用、大数据分析、网络通信技术、深度互联时代下的移动开发、虚拟化、人工智能等最前沿实践性讲解。以人脑思维模式,激发计算机操控的无限可能;以软件开发技巧,挖掘系统与硬件的最大价值。 《Software Design 中文版 01》的主题为......一起来看看 《Software Design 中文版 01》 这本书的介绍吧!