跳至主要內容

自己动手修改完善yilia主题（上）

MonoLogueChi建站笔记大约 4 分钟

自己动手修改 Yilia 主题，这有什么难的，简单修修模板，改改 CSS？

自从本站建站以来，一直在用 Yilia 主题，所以对 Yilia 主题或多或少有一些自己的理解，现在想分享一下怎么修改 Ylila 主题。

这篇文章都是我自己一路踩坑踩过来的，遇到不明白的问题欢迎在评论区留言讨论（但请一定要准确说明问题，含含糊糊什么都说不清的话，我也不可能知道你遇到了什么问题），想要参考的话，请在我的GitHubopen in new window上查看我的修改。

Clone

修改的第一步，我们需要先 Fork 一份 Yilia 主题，这一步可以在GitHubopen in new window上完成。

Fork 之后 Clone 到本地，然后就可以开始了。

从源码构建 Yilia

Yilia 需要使用 webpack 构建生成，所以在此之前，需要有一定的 webpack 基础，如果没有也不要紧，马上百度去了解一下还来得及。

从源码构建，可以参考 Yilia 源码目录结构及构建须知open in new window

首先需要搞定开发环境，安装好node和npm

npm install

但是直接这样做你可能会遇到非常大的一个坑，因为作者的开发环境已经很老了，webpack 这一套东西的更新速度实在是太快了，而且淘汰也非常的快，即使你跟着百度一步一步搞完了，后面打包的时候也会遇到很多的坑，所以我建议你直接从我的仓库open in new window里拷贝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-srcjs 和 css 源码文件都在这里，需要修改 js 和 css 就要从这里修改。

简单修改

我们举两个简单的例子，来说明一下怎么从源码修改

取消统计代码

用过 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 阻塞的一下问题。