自己动手修改完善yilia主题

栏目: CSS · 发布时间: 6年前

内容简介：自己动手修改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主题

目录解析

前面讲了从源码构建，勉勉强强算是把开发环境搞好了，咱们接着来研究一下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阻塞的一下问题。

赏

请作者吃辣条

自己动手修改完善yilia主题支付宝

自己动手修改完善yilia主题微信

本文作者： MonoLogueChi
本文链接： https://www.xxwhite.com/2019/your-own-yilia-1.html
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Using Google App Engine

Charles Severance / O'Reilly Media / 2009-5-23 / USD 29.99

With this book, you can build exciting, scalable web applications quickly and confidently, using Google App Engine - even if you have little or no experience in programming or web development. App Eng......一起来看看《Using Google App Engine》这本书的介绍吧!

码农工具