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

MonoLogueChi2019年1月26日大约 4 分钟

自己动手修改 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-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 阻塞的一下问题。