hexo+yilia 归档 + 文章右侧悬浮目录的生成

2018-01-09

× 文章目录

1. 修改css
2. 修改article.ejs
3. 文章title后添加toc
4. 修改后发现没有标号也不能跳转
5. 归档问题

看到一个大佬的hexo，右侧有个悬浮目录，觉得不错，打算来一个，然后照着教程修改。

修改css

打开themes\yilia\source中的main.0cf68a.css文件，在文件末尾，添加

/* 新添加的 */
#container .show-toc-btn,#container .toc-article{display:block}
.toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
.toc-article li ol, .toc-article li ul {
    margin-left: 30px;
}
.toc-article ol, .toc-article ul {
    margin: 10px 0;
}

以上代码来自lawlite19_github

修改article.ejs

打开themes\yilia\layout\_partial下面的article.ejs

<!-- 以下两行来自原始文件 -->
      </header>
    <% } %>
  <!-- 以下内容需要添加，即目录内容部分 -->
	<!-- 目录内容 -->
	<% 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>
		  <% } %>		
	<!-- 目录内容结束 -->
<!-- 以下来自原始文件 -->
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        ……

同来自github

文章title后添加toc

对于需要有右侧悬浮目录的文章，在文章头添加
toc: true
现在hexo g -d重新生成部署下，看看效果如何

修改后发现没有标号也不能跳转

那么请打开themes\yilia下的_config.yml
将

1 2	# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false toc_hide_index: false

改为false即可
或者你自己在你的标题后手动添加
类似：### 3.文章 而不是 ### 文章

归档问题

一直想要归档，但是没有找到在哪儿设置。
今天终于搞定了，首先需要
hexo new page "archives"
然后，打开themes\yilia下的_config.yml
在主页后面添加归档：

1
2
3

menu:
  主页: /
  归档: /archives/

再hexo g -d重新生成部署下，发现就好了。

原因应该是blog根目录下的设置了_config.yml里有个

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives #归档

其中的archive_dir应该就是和归档相关。