基于yilia theme的Hexo博客功能优化(一)：博客url自定义、目录、博客插入本地图片、首页折叠文章

  乘着周末偷闲，进行建站以后第一次优化更新。本文首发我的博客-博客更新日志20200426

---

一、文章页面url自定义

默认url为时间+标题，这对于中文网站来说实在是有点不友好，所以我查了资料对其进行了优化。

tip：因为考虑到我发博频率较低，所以有些部分采用的人肉手动标注。

打开根目录下的.config.yml配置文件

ctrl+f找到permalink，将其修改为 :year/:month/:day/:id/

此时设置已经完毕，使用的时候请这样操作：

打开命令行，先输入’hexo clean’ 清除模板缓存

输入hexo new <文件名>（此处<文件名>意为自定义文件名，可直接输入中文），hexo自动生成markdown文件，并带上时间

在网站项目文件目录source\ _posts\ 中找找到新建的文件，用markdown编辑工具打开（此处我使用Typora）

在灰色区域（实际上是–区域）加上一行：id: 年月日时分秒

cmd执行hexo s -g在本地运行服务器，浏览器中输入：127.0.0.1:4000 进行查看

如果发现url已经变更为日期加id就说明配置成功

二、页面添加目录

在theme模板中找到配置文件并打开，此处我用的是yilia

ctr+f找到toc_hide_index，将其值设置为true

theme中找到当前模板的layou文件夹，进入_patial，找到article.ejs文件

在此文件末尾添加以下代码

	<!-- 目录内容 -->
	<% if (!index && post.toc){ %>
	    <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
	    <span class="btn-bg"></span>
	    <span class="btn-text">文章导航</span>
	    </p>
	    <div id="toc-article" class="toc-article">
		<span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
		<strong class="toc-title">文章目录</strong>
		<%- toc(post.content) %>
	   </div>
	   <script type="text/javascript">
	    function showToc(){
		var toc_article = document.getElementById("toc-article");
		var show_toc_btn = document.getElementById("show-toc-btn");
		toc_article.setAttribute("style","display:block");
		show_toc_btn.setAttribute("style","display:none");
		};
	    function showBtn(){
		var toc_article = document.getElementById("toc-article");
		var show_toc_btn = document.getElementById("show-toc-btn");
		toc_article.setAttribute("style","display:none");
		show_toc_btn.setAttribute("style","display:block");
		};
	   </script>
	<% } %>     
	<!-- 目录内容结束 -->

在根目录下找到source文件夹，进入_posts，随意点开一个博客markdown文件（注意要有设置有标题的，要不然看不到效果）

在当前文件中灰色部分设置：toc: true

保存文件，在本地部署hexo，点开浏览器输入：127.0.0.1:4000，找到我们编辑的博客，如果看到以下效果，就说明配置成功

三、yilia模板显示图片设置

在根目录中找到_config.yml文件，打开

在当前文件中ctrl+f找到post_asset_folder，并将其值设置为true

打开cmd，在网页目录下输入hexo clean

至此，就设置好了，接下来让我们来使用

随意打开一个博客文件（新建也可）

在灰框外输入

{% asset_img 图片名.图片后缀 [title] %} （图片名.图片后缀自定义）

保存，打开浏览器刷新

此时我们就可以看到图片了

tip：如果之前有安装过hexo-asset-image，就使用npm uninstall hexo-asset-image --save卸载；卸载了才可以看到如上效果

四、站点优化的一些小tip

1.首页折叠文章

找到模板配置文件_config.yml，打开找到excerpt_link，确认非false

随意打开一个博客文件（新建也可），在要需要折叠的地方写上<!-- more -->

做完上述操作就搞定了，接下来看看效果

2.动态url默认设定（无需自配id）

在根目录配置文件中找到permalink_defaults在后面填上:year/:month/:day/:year:month:day/

此举优点是会自动生成url（非中文）

---

关于hexo博客优化，你还可以看：
基于yilia theme的Hexo博客功能优化(二)：豆瓣书影音、留言板、访问数量文章数量统计、归档
在hexo博客系统中接入docsify文档管理系统


参考/摘录：
  1.yilia theme作者博客备份
  2.记录hexo无法加载图片及修改yilia主题组件
  3.hexo官方文档

文章中有错误的地方欢迎指出，大家共同进步~

                                                字   数：1313
                                                用   时：3h
                                                完成时间：2020年04月26日