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

设置头像

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

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

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

所有文章

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

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

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

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: 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>

参考博客：Buzhibujue