客製化 NexT 主題：網站運行時間、文章長度、閱讀時間與搜尋功能
網站運行時間
在 /themes/next/layout/_partials 文件夾下新建一個名稱爲 runtime.swig 的文件，並添加內容如下：
<div id="site-runtime">
<span class="post-meta-item-icon">
<i class="fa fa-clock-o"></i>
</span>
<span id="runtime"></span>
</div>
<script language="javascript">
function isPC() {
var userAgentInfo = navigator.userAgent;
var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for (var i = 0; i < agents.length; i++) {
if (userAgentInfo.indexOf(agents[i]) > 0) {
return false;
}
}
return true;
}
function siteTime(openOnPC, start) {
window.setTimeout("siteTime(openOnPC, start)", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
{%- if theme.runtime.start %}
start = new Date("{{ theme.runtime.start }}");
{%- endif %}
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var diff = now - start;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
if (openOnPC) {
document.getElementById("runtime").innerHTML = "Running: " + diffYears + " years " + diffDays + " days " + diffHours + " hours " + diffMinutes + " mins " + diffSeconds + " secs";
} else {
document.getElementById("runtime").innerHTML = "Running: " + diffYears + "y " + diffDays + "d " + diffHours + "h " + diffMinutes + "m " + diffSeconds + "s";
}
}
# 這邊可以決定要在頁面上顯示的時間精度，我覺得顯示到小時比較順眼，因此我從+ diffHours + " hours " 後面分鐘與秒鐘的部分就刪掉了（未來要加回來再看這篇文就好ＸＤ這就是寫文章的好處）
var showOnMobile = {{ theme.runtime.mobile }};
var openOnPC = isPC();
var start = new Date();
siteTime(openOnPC, start);
if (!openOnPC && !showOnMobile) {
document.getElementById('site-runtime').style.display = 'none';
}
</script>
編輯文件 /themes/next/layout/_partials/footer.swig，在文件底部添加這幾行：
{%- if theme.runtime.enable %}
{% include 'runtime.swig' %}
{%- endif %}
更改 Next 主题的配置文件 themes/next/_config.yml，在文件底部添加以下内容：
# Site Runtime
runtime:
enable: true
# The time of the site started running. If not defined, current time of local time zone will be used.
# You can specify the time zone by adding the `+HOURS` or `-HOURS` format time zone.
# If not specify the time zone, it will use `+0000` as default.
# ex: "2015-06-08 07:24:13 +0800", `+0800` specify that it is the time in the East Eight Time Zone.
start: 2022-01-20 18:00:00 +0800 # 部落格開始運行的時間
# Whether to show on the mobile side
mobile: false
完工後就會顯示在網站最下面囉。
添加文章字數與所需閱讀時間
要實現自動產生文章字數與所需閱讀時間這個功能我們要使用一個plug-in：hexo-symbols-count-time，先到Blog專案目錄npm安裝
npm install hexo-symbols-count-time --save
打開theme/next/_config.yml
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true # 是否獨立一行
item_text_post: true # page
item_text_total: true # footer
打開hexo根目錄的_config.yml，加入以下內容：
# count
symbols_count_time:
symbols: true # page字數顯示
time: true # page時間顯示
total_symbols: true # footer字數統計顯示
total_time: true # footer閱讀時間顯示
exclude_codeblock: false # 字數統計是否排除程式碼
awl: 4 # 平均文字長度
wpm: 275 # 一分鐘閱讀字數
在部署或開啟local端server前若沒有先clean再生成，所需閱讀時間很可能會出現NaN的字樣
完成後大概會長這樣。
搜尋功能
要實現在網站內搜尋這個功能我們要使用另外一個plug-in：hexo-generator-searchdb，先到Blog專案目錄npm安裝。
npm install hexo-generator-searchdb --save
接著到themes/_config.yml將enable改為true就可以了。
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
完成後就會看到邊欄上多了一個搜尋可選，點擊後就可以搜尋站內文章資訊了。
