自己动手修改完善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主题 微信


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

查看所有标签

猜你喜欢:

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

Software Design 中文版 01

Software Design 中文版 01

[日] 技术评论社 / 人民邮电出版社 / 2014-3 / 39.00

《Software Design》是日本主流的计算机技术读物,旨在帮助程序员更实时、深入地了解前沿技术,扩大视野,提升技能。内容涵盖多平台软件开发技巧、云技术应用、大数据分析、网络通信技术、深度互联时代下的移动开发、虚拟化、人工智能等最前沿实践性讲解。以人脑思维模式,激发计算机操控的无限可能;以软件开发技巧,挖掘系统与硬件的最大价值。 《Software Design 中文版 01》的主题为......一起来看看 《Software Design 中文版 01》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具