本文主要教友友们如何个性化设置Yilia主题，主要针对我这样没学过网页设计但又想美化自己的博客的小白，俗称又菜又爱玩（bushi

设置头像

首先，将头像照片放进yilia/source/img目录下，改一个自己喜欢的名字，然后去yilia目录下的_config.yml文件中对应处设置如下:

#你的头像url
avatar: /img/头像.png

这个头像.png就是你照片的名字

所有文章

初次点击所有文章时会出现模块缺失，在博客根目录下执行命令：

npm i hexo-generator-json-content --save

在根目录下的_config.yml文件中添加代码

jsonContent:meta: falsepages: falseposts:title: truedate: truepath: truetext: falseraw: falsecontent: falseslug: falseupdated: falsecomments: falselink: falsepermalink: falseexcerpt: falsecategories: falsetags: true

在左侧栏添加时钟：

在yilia/layout/_partial目录下的left-col.ejs文件中添加代码

<!--时钟-->
<br>
<div style="position:absolute; bottom:120px left:auto; width:100%;height:50%"><script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><div id="clock" style="font-family: 'Share Tech Mono', monospace;color: #ffffff;text-align: center;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(50%, 50%);transform: translate(-50%, -50%);color: #4B8CE1;text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);"><p style="margin: 0;padding: 0;letter-spacing: 0.1em;font-size: 15px;">{{ date }}</p><p style="margin: 0;padding: 0;letter-spacing: 0.01em;font-size: 38px;">{{ time }}</p></div><script>var clock = new Vue({el: '#clock',data: {time: '',date: ''}});var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var timerID = setInterval(updateTime, 1000);updateTime();function updateTime() {var cd = new Date();clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + week[cd.getDay()];};function zeroPadding(num, digit) {var zero = '';for (var i = 0; i < digit; i++) {zero += '0';}return (zero + num).slice(-digit);}</script>
</div>

添加不蒜子统计

在yilia/layout/_partial/after-footer.ejs最后添加

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

修改yilia/layout/partial/footer.ejs为

<footer id="footer"><div class="outer"><div id="footer-info">本站访问量<span id="busuanzi_value_site_pv"></span>次&nbsp;本站访客数<span id="busuanzi_value_site_uv"></span>人&nbsp;本页阅读量<span id="busuanzi_value_page_pv"></span>次&nbsp;<div class="footer-left">&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %></div><div class="footer-right"><a href="http://hexo.io/" target="_blank">Hexo</a></div></div></div>
</footer>

添加文章字数统计以及阅读时长

安装hexo-wordcount

npm i --save hexo-wordcount

创建yilia/layout/_partial/post/word.ejs文件

<div style="margin-top:10px;"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-meta-item-text">  字数统计: </span><span class="post-count"><%= wordcount(post.content) %>字</span></span></span><span class="post-time">&nbsp; | &nbsp;<span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-meta-item-text">  阅读时长: </span><span class="post-count"><%= min2read(post.content) %>分</span></span></span>
</div>

打开yilia/layout/_partial/article.ejs文件，在下列代码后

<%- partial('post/title', {class_name: 'article-title_code_ant'}) %><% if (!post.noDate){ %><%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %><% } %>

添加

<% if(theme.word_count && !post.no_word_count){ %><%- partial('post/word') %>
<% } %>

在yilia/_config.yml文件中添加

# 是否开启字数统计
# 不需要使用，直接设置值为false，或注释掉
word_count: True

添加网站运行时间

打开yilia/layout/_partial/footer.ejs文件，在该代码上

<div id="footer-info">

添加

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>var now = new Date(); function createtime() { var grt= new Date("07/03/2019 08:00:00");//此处修改你的建站时间或者网站上线时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; } setInterval("createtime()",250);
</script>

我目前搞得就这么多，能看就行了，还要什么自行车o(︶︿︶)o（附一张老大哥说的话

参考博客：Buzhibujue

hexo博客之yilia主题的个性化设置相关推荐

hexo博客的yilia主题之添加分类
文章目录添加 categories 页面生成index.md文件修改index.md文件添加 categories 到menu菜单 yilia 主题的配置文件 main.826e88.css ...
Hexo博客（Snail主题）搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览笔者搭建博客地址:saltyfishyjk's Blog 文章目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言写作背景定位您在这里 ...
hexo博客搭建及主题优化(一)
个人博客个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客介 ...
Hexo博客搭建之主题构建(melody)
前言上一章主要记录和说明Hexo的基础搭建和使用技巧. 本章, 我们主要记录下Hexo博客中关于主题的使用. 主题的选用后, 其实就是大量的配置. 以及第三方的集成, 是一件苦工, 但不难. 但是实 ...
mysql find next_GitHub - flymysql/hexo-theme-next-flyme: 自己的hexo博客在next主题上做的修改...
这两天花了点时间修改了下自己的next主题的博客变化还是可以的样式表放在了GitHub上喜欢的话可以直接使用直接下载样式表,然后复制到自己主题的themes\next\source\css_cu ...
关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
前言: 有段时间没折腾过博客页面样式了,偶然间看到了一个春节红灯笼的小demo,感觉很棒,所以拿过来了,并且自己新增了一些小挂件,加上了关键帧动画,圣诞树等元素.主题切换按钮原理和以前教程里面提到的暗 ...
Hexo博客之butterfly主题优雅魔改系列（持续更新）
为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页前置说明魔改亮点
Hexo博客搭建之配置文件详解(Melody)
前言之前有2篇关于Hexo博客搭建的文章. 有人给我留言要我使用的配置文件. 我们今天就简单聊聊这个配置文件. 其实, 在前篇Hexo博客搭建之主题构建(melody), 以及作者官方文档内以及有着 ...
hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...

hexo博客之yilia主题的个性化设置