关于hexo yilia主题配置走过的坑

  • 时间:2018-12-21 23:15 作者:Vivian_0430 来源:Vivian_0430 阅读:476
  • 扫一扫,手机访问
摘要:我是一个有强迫症的人,所以在有了博客之后第一件事就是更换主题和调整样式。看了很多主题,热度最火的是next,但是看那么多人用我就不想用了(哈哈哈),比较喜欢简约少量的风格,所以最后选择了yilia。总体来说呢,这个主题还是很好看的,功能也很齐全,标签分类,搜索文章等等等等。废话就说那么多,而后就来分

我是一个有强迫症的人,所以在有了博客之后第一件事就是更换主题和调整样式。看了很多主题,热度最火的是next,但是看那么多人用我就不想用了(哈哈哈),比较喜欢简约少量的风格,所以最后选择了yilia。总体来说呢,这个主题还是很好看的,功能也很齐全,标签分类,搜索文章等等等等。废话就说那么多,而后就来分享一下我配置这个主题走过的坑。

可以先看一下我的博客作为一个示例吧(https://vivian0430.github.io),而后这个主题的GitHub仓库链接( litten/hexo-theme-yilia),readme里面有教程,照着来下载即可以了。


1.配置缺失板块

从GitHub上面clone下来主题之后,点开左下角的一律文章,是没有办法直接显示文章目录的,点开的板块里也有处理的方法,需要配置少量代码。

首先要调出cmd黑窗口,查看自己电脑里安装的node版本(npm会在安装node时自动安装),node下载链接(http://nodejs.cn/download/)。win8和win10安装不了msi的安装包,具体步骤可以百度一下。

而后在博客根目录下左键git bash 执行 npm i? hexo-generator-json-content --save

最后在博客根目录找到_config.yml,不是themes文件夹,themes文件夹下也有一个但是是做其余相关配置的,随意找一个空位放下页面提醒让你放的那一段代码。

博客根目录git bash - hexo clean - hexo g - hexo d;预览效果的话用hexo g之后hexo s,开启服务器,而后本地输入localhost:4000即可以查看了,确认没问题再hexo d上传上去。

2.调整css样式,颜色字体等

emmm,yilia主题自带的颜色个人表示不是很喜欢,不是一个风格的,调这个样式还是花了很多时间的,直接F12用那个小箭头找到自己需要修改样式的元素,控制台那里element style点开即可以看见相关的样式设置了,右上角会有他的来源文件,yilia主题基本样式都是放在themes/yilia/source/main.0cf68a.css里面,用sublime打开直接ctrl +F查找关键词找到你要修改的部分按照自己喜欢的来改即可以了。

3.目录不显示文章标题,tags标签怎样加,文章截断

这个问题真的是困扰了我好久,由于不是在控制台里面生成的md文件,直接写好了放进src/_post文件夹里面上传上去的,这样比较方便,但是!!这样子点击所有文章出来的文章都没有标题,是空白,需要在md文件里面做少量配置:

标题标签配置

在md文件的最顶部写这样的代码,上面和下面的三个杠杠不能少,要注意用英文冒号。

还有一个就是文章截断的问题,不然会默认在主页显示整篇的文章,在你的md文件中(右击记事本打开)需要做截断的地方加上<!-- more -->。

文章截断

4.各种基本配置

头像什么的配置,直接上代码(所有基本配置都在themes/yilia/_config.yml文件里面用编辑软件打开根据提醒直接修改即可以)以下是我设置的:

_config.yml(1)_config.yml(2)_config.yml(3)

该换的链接记得换成自己的。

5.访问量的统计和显示

这里用的是不蒜子,先在\themes\yilia\layout\_partial里面找到after-footer.ejs,引入脚本,放在最后就行了。

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

总阅读量我是插在头像下面的,想插在不同的位置F12找到对应元素再找到对应的ejs修改插入,比较难找比较困难。

left-col.ejs:

统计阅读总量

article.ejs:

统计单篇阅读量

代码看图啦,找中文“总访问量”,“总阅读量”。

阅读量配置是一个巨大的坑,希望能帮到苦苦配置的你。

说不下去了,先这样,之后有想到再补充,前台新人小白,如有错误还望不吝赐教,及时指正。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
【系统环境|软件环境】一步步教你开发、部署第一个去中心化应用 - 宠物商店(2022-03-15 15:13)
【系统环境|软件环境】循序渐进!一文学会高性能开发十大必需掌握的核心技术。(2022-03-15 15:13)
【系统环境|软件环境】Python游戏开发,pygame模块,Python实现贪吃蛇小游戏(2022-03-15 15:13)
手机二维码手机访问领取大礼包
返回顶部