干技术怎么能不搭建个人博客呢（三❤ hexo主题Yilla使用）
下载使用
1、Yilla主题下载到theme目录中
git clone https://github.com/litten/hexo-theme-yilia.git
2、Yilla配置主题【找到上一层的_config.yml这个文件】
theme: hexo-theme-yilia
3、Yilla将属性值改为刚刚下载的主题名，将文件进行保存
hexo clean //清除一下缓存
hexo g //生成静态页面
hexo s //开启本地服务器
4、Yilla给页面设置过多内容时候隐藏一部分
<!-- more -->
5、Yilla文章显示目录
themes/yilia/\_config.ym
中进行配置 toc: 2 即可，它会将你 Markdown 语法的标题，生成目录，目录查看在右下角。
6、Yilla文件配置_config.yml
主题的配置文件:和 Hexo配置文件不同，主题配置文件修改时会自动更新，无需重启 Hexo Server。
7、Yilla语言配置languages
8、Yillasource文件夹
资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略。
如果文件可以被渲染的话，会经过解析然后储存到 public 文件夹，否则会直接拷贝到 public 文件夹
9、配置图片资源
- 添加图片资源文件夹。 路径为
themes/yilia/source/下，可添加一个assets文件夹，里面存放图片资源即可 - 配置文件中直接引用即可。路径为
themes/yilia/_config.yml，找到如下即可
10、文章显示摘要
问题。点击主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数
解决办法。 在你 MD 格式文章正文插入 <!-- more -->即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复
# excerpt_link: more
11、增加归档菜单
修改 themes/yilia/_config.yml
menu:
主页: /
归档: /archives/index.html
12、添加顶部加载条
用编辑器打开 BLOG\themes\yilia\layout\_partial\head.ejs 配置文件。
在这段代码末尾添加
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="<%= config.url %>">
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
background: #6d6d6d; /*进度条颜色*/
height: 2px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #6d6d6d; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #6d6d6d; /*上边框颜色*/
border-left-color: #6d6d6d; /*左边框颜色*/
}
</style>
19、添加左侧显示文章数
20、添加总文章数
21、鼠标点击小红心
!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);
配置小红心
hexo/themes/yilia/layout/_partial/footer.ejs
<!--页面点击小红心-->
<script type="text/javascript" src="/love.js"></script>
22、hexo主题-标签页面
23、Hexo yilia 随笔
“随笔” 其实就是文章的一个 tags(标签)，如果你想把文章作为随笔的话，请在文章的首部写个 tags 为 “随笔” 的标签。如下图：
24、hexo添加about导航栏
- 创建用于关于导航栏的网页，通过命令
hexo new page "about"创建，即在source下创建about文件夹，该文件夹下新建index.md，根据普通文章正文要求对其书写即可。 - 接下来，就需要将该新网页绑定在新的导航栏上面。修改 theme/使用主题 目录下对应的**_config.yml**主题配置文件
# Header
menu: #站点导航栏，按照如下格式添加: 右侧为public文件夹下的路径，索引至index.md
#从上至下依次显示在右上角从左至右处
Home: / #主页导航栏
All-lists: /archives #所有列表导航栏
Resume: /Shengjie #个人简历导航栏
About: /about #关于导航栏
在你想插入的位置上插入关于导航栏(支持中文)，然后将新创建的/about作为其路径，即可导航至你自定义的index.md。
