[Blog Note] - Hexo NexT 小筆記

發表於 2020-03-19 更新於 2024-01-28 分類於 Code ， Hexo 文章字數： 3.5k 所需閱讀時間 ≈ 3 分鐘

Introduction & 前言

這是一篇用來筆記 Hexo 的小攻略，內容是如何修改一些配置設定，日後會不定時的增加，算是給自己一個筆記也給要使用的人一些參考。

Summary & 摘要

內容會提及下列幾項：

如何在網頁加入 Fork Me on GitHub(GitHub Corners)
如何加入 版權聲明
如何在頁尾加入 本文结束感謝您的閱讀
如何修改頁尾的 Tag

如何在網頁加入 Fork Me on GitHub(GitHub Corners)

首先到這個網頁挑選喜歡的樣式 -> 傳送門

以第一個白底黑貓為例子，複製後先貼到空白處，然後要修改掉那串程式碼最前面的 href 內的 https://your-url ，內容替換成你的 GitHub 頁面網址。

<a href="https://your-url" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>...略</svg> 
// ...略

隨後把下代碼複製貼至 /themes/next/layout/_layout.swig 文件中 div 的 class name 為 headband 的下面。

1	<div class="headband"></div>

再回去看看就會出現啦！

如何加入版權聲明

原本的做法比較複雜，需要自己去新建文件(詳情可見主題文件)，不過在 NexT 6.6.0 開始直接到 /themes/next/_config.yml 裡搜尋 creative_commons 然後修改要顯示在 sidebar 還是 post 還是全都要就可以了，如下設定：

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: deed.zh_TW

順帶一提，language 並非文字在文章內顯示的語言喔！而是你導向 creative commons 網址時，你的版權聲明顯示的語言，預設是英文，如果改成 deed.zh_TW 就會顯示中文，如何看你的語言呢？在版權聲明網站內中間有一個語言 select 下拉後在看網址最後帶的是什麼，·比如說中文是 deed.zh_TW 而日文就是 deed.ja。

如何在頁尾加入本文结束感謝您的閱讀

先到 /themes/next/layout/_macro 下查看有無 passage-end-tag.swig 這隻檔案，沒有就自己手動建立一個，隨後在內文貼上下列程式碼：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>

之後至 /themes/next/layout/_macro/post.swig 文件中 div 的 class name 為 post-footer 內有中括弧 %- endfor % 的下面貼上下列程式碼：

// 貼在這整段的下面
<footer class="post-footer">

// ...略
{%- endfor %}

// 程式碼貼在這邊 ->
{{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}

// ...略
</footer>

再回去看看就會出現啦！

如何修改頁尾的 Tag

舊版的設定比較麻煩，必須自己到 /themes/next/layout/_macro/post.swig 內修改 # 為 <i class="fa fa-tag"></i> 但是當到這個文件查看時，會發現上面是帶有判斷式的，有中括弧的 %- if theme.tag_icon % ，而且 <i class="fa fa-tag"></i> 也已經在程式碼內。

現在你唯一需要做的事情只有一樣，就是到 /themes/next/_config.yml 裡搜尋 tag_icon 並且將它改為 tag_icon: true ，結果將會為下圖。

因為只是多了個 icon ，身為有強迫症的前端，還是想要美化一下，原本想要弄個書籤樣式，但怕做壞了，就用最簡單的美化方式吧。

找到 /themes/next/source/css/_common/components/post/post-tags.styl 這隻檔案，把下面程式碼蓋上去：

.post-tags {
  margin-top: 40px;
  text-align: center;

  a {
    display: inline-block;
    font-size: $font-size-smaller;
    
    //- 客製化CSS
    box-shadow: 2px 2px 3px 1px #757575;
    border: 1px solid #000;
    padding: 1px 10px;
    border-radius: 20px;
    transition: all .3s linear;

    &:not(:last-child) {
      margin-right: 5px;
    }

    //- 客製化CSS
    &:hover {
      transform: scale(1.1);
      box-shadow: 3px 4px 5px 1px #757575;
    }
  }
}

Conclusion & 結論

這是接觸 Hexo 的第二個主題 NexT，其實最一開始是使用 hexo-theme-archer 這個主題，我想第一次用 Hexo 都會想找炫一點的主題，但是有些比較算獨立維護的，可能功能上就沒有那麼齊全，像是很多設定，在 NexT 的 _config.yml 裡面就有了，你只需要改成 true 其實就能用了，但是比較冷門的主題或是沒有那麼多人維護的主題就必須要自己建立檔案，或是東加西加，這也是為什麼後來我選用 NexT。的原因。

因為之前換過主題中間也加了一些東西導致 Hexo 爆開(真心建議新手不要亂動文件也記得勤於備份)，所以重新用了三四次，所以寫篇文章把一些功能記下來，希望日後能快速找到方法不用再到處去爬文了，也希望這篇文章能幫助到您，之後也會不定時的加一些筆記進來。