Hexo+yilia主题实现文章目录和添加视频

一、说明

• 也可以点击这里查看此文章
• 文章目录功能效果可以点击这里查看
• 视频页面效果可以点击这里查看
• 粗略实现，有问题可以在下方评论区留言，或者留言板留言

二、文章目录功能

1、添加CSS样式

• 打开themes\yilia\source下的main.234bc0.css文件，添加如下代码：
  
  • css样式我也放到了github上：https://raw.githubusercontent.com/lawlite19/Blog-Back-Up/master/css/main.234bc0.css
  • 使用的是别人的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%