自己动手修改完善yilia主题

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

内容简介:自己动手修改Yilia主题,这有什么难的,简单修修模板,改改CSS?自从本站建站以来,一直在用Yilia主题,所以对Yilia主题或多或少有一些自己的理解,现在想分享一下怎么修改Ylila主题。这篇文章都是我自己一路踩坑踩过来的,遇到不明白的问题欢迎在评论区留言讨论(但请一定要准确说明问题,含含糊糊什么都说不清的话,我也不可能知道你遇到了什么问题),想要参考的话,请在我的

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

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

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

Clone

修改的第一步,我们需要先Fork一份Yilia主题,这一步可以在 GitHub 上完成。

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

从源码构建Yilia

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

从源码构建,可以参考 Yilia源码目录结构及构建须知

首先需要搞定开发环境,安装好 nodenpm

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主题 微信


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

查看所有标签

猜你喜欢:

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

激荡十年,水大鱼大

激荡十年,水大鱼大

吴晓波 / 中信出版社 / 2017-11-1 / CNY 58.00

【编辑推荐】 知名财经作者吴晓波新作,畅销十年、销量超过两百万册的《激荡三十年》续篇,至此完成改革开放四十年企业史完整记录。 作为时代记录者,吴晓波有意识地从1978年中国改革开放伊始,记录中国翻天覆地的变化和对我们影响至深的人物与事件,串成一部我们每个人的时代激荡史。而最新的这十年,无疑更壮观,也更扑朔迷离。 很多事情,在当时并未有很深很透的感受,回过头来再看,可能命运的轨迹就......一起来看看 《激荡十年,水大鱼大》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具