Hexo+yilia主題實現文章目錄和新增視訊
阿新 • • 發佈：2019-01-02
一、說明
二、文章目錄功能
1、新增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 2、修改article.ejs檔案
- 使用的是
Hexo的toc函式 - 開啟
themes\yilia\layout\_partial資料夾下的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>
<% } %>
<!-- 目錄內容結束 -->- 然後若想要文章顯示目錄，在每篇文章開頭加入：
toc: true
3、最終效果
(1) 電腦端
-
-
(2) 手機端
-
-
三、新增視訊
- 是在之前相簿功能的基礎之上，相簿功能的實現點選這裡檢視
1、新增視訊樣式css
- 開啟當前部落格
source\photos資料夾下的ins.css檔案 - 加入如下內容
/* ====== video ===== */
.video-container {
z-index: 1;
position: relative;
padding-bottom: 56.25%;
margin: 0 auto;
}
.video-container iframe, .video-container object, .video-container embed {z-index: 1;position: absolute;top: 0;left: 7%;width: 85%;height: 85%;box-shadow: 0px 0px 20px 2px #888888;}
2、新增視訊
- 我這裡新增的是優酷上面的視訊
- 在當前部落格
source\photos資料夾下建立videos.ejs檔案 - 內容如下：
---
layout: post
slug: "photos"
title: "相簿"
noDate: "true"
comments: "true"
reward: "true"
open_in_new: false
---
<link rel="stylesheet" href="./ins.css">
<div class="photos-btn-wrap">
<a class="photos-btn" href="/photos">Photos</a>
<a class="photos-btn active" href="/photos/videos.html">Videos</a>
</div>
<center><h1>指彈_女兒情</h1></center>
<hr/>
<center>
<div class="video-container">
<iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng=="
frameborder=0 allowfullscreen>
</iframe>
</div>
</center>
<hr/>
<center><h1>指彈_友誼地久天長</h1></center>
<hr/>
<center>
<div class="video-container">
<iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ5MDExOTY2MA=="
frameborder=0 allowfullscreen>
</iframe>
</div>
</center>
<hr/>
<center><h1>指彈_Always with me</h1></center>
<hr/>
<center>
<div class="video-container">
<iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ4MDQyNTQ0MA=="
frameborder=0 allowfullscreen>
</iframe>
</div>
</center>
