hexo博客優化以及添加新功能

一、hexo在右上角添加圖標

左上角實現fork me on github或者github圖標鏈接自己的github主頁

挑選自己喜歡的樣式點擊 GitHub Ribbons 和 GitHub Corners ，並複製代碼

然後粘貼剛纔複製的代碼到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，並把href改爲你的github地址

 <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>
    <a href="https://github.com/pythonTaotao" 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><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"> {%- include '_partials/header.swig' %} </div>

二、添加讚賞功能

將自己的讚賞碼圖片上傳到themes/next/source/images/下面

vi themes/next/_config.yml

# Reward
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

三、增加搜索功能

1，安裝hexo-generator-searchdb，在站點的根目錄下執行以下命令：

npm install hexo-generator-searchdb --save

2，添加站點的配置config

search:
 path: search.xml
 field: post
 format: html
 limit: 10000

3,修改主題配置configg

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

四、設置中文，修改基礎信息

修改站點配置文件config

# Site
title: Hexo
subtitle: ''
description: '願有歲月可回首，且以深情共白頭'           #站點描述
keywords:
author: ytliangc   John Doe     #設置作者
language: zh-Hans             #設置語言
timezone: 'Asia/Shanghai'     #配置時區

五、設置菜單

修改主題配置文件

menu:
  home: / || home
  #about: /about/|| user
  tags: /tags/|| tags
  #categories: /categories/ || th
  archives: /archives/|| archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

六、設置頭像

修改主題配置文件

avatar: /images/avatar.jpg       #設置文件名稱和路徑
rounded: true                    #鼠標放在頭像上時是否旋轉
opacity: 1                       #頭像放縮指數 
rotated: false                   #頭像是否設爲圓形，否則爲矩形

七、設置文章結束標誌

在路徑 \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文件，在post-body 之後(END POST BODY)， post-footer 之前添加如代碼：

    {#####################}
    {### END POST BODY ###}
    {#####################}

  <div>
    {% if not is_index %}
     {% include 'passage-end-tag.swig' %}
    {% endif %}
  </div>

    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

然後打開主題配置文件（_config.yml),在末尾添加

# 文章末尾添加“本文結束”標記
passage_end_tag:
  enabled: true

八、hexo添加外部鏈接

編輯主題配置 themes/next/_config.yml

social:
  GitHub: https://github.com/pythonTaotao || github
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  CSDN: https://csdn.com || copyright
  E-Mail: [email protected] || envelope
  微博: http://sahdlad || weibo

social_icons:
  enable: true      
  icons_only: false    #是否只是顯示圖標
  transition: false

九、爲hexo添加RSS訂閱

在根目錄執行以下命令

npm install hexo-generator-feed --save

編輯站點配置文件_config.yml

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  
參數含義：
type: RSS的類型(atom/rss2)
path: 文件路徑,默認是atom.xml/rss2.xml
limit: 展示文章的數量,使用0或則false代表展示全部
hub:
content: 在RSS文件中是否包含內容 ,有3個值 true/false默認不填爲false
content_limit: 指定內容的長度作爲摘要,僅僅在上面content設置爲false和沒有自定義的描述出現
content_limit_delim: 上面截取描述的分隔符,截取內容是以指定的這個分隔符作爲截取結束的標誌.在達到規定的內容長度之前最後出現的這個分隔符之前的內容,，防止從中間截斷.

編輯主題配置文件themes/next/_config.yml

rss: /atom.xml

十、底部顯示建站時間

修改主題配置文件

# Specify the date when the site was setup
since: 2020   # 建站年份

十一、新增分類和標籤功能，並在文件添加分類

！！！瀏覽器訪問分類和標籤出現錯誤 Cannot GET /tags/     Cannot GET /categories/

1、生成"分類"
hexo new page "categories"

2、添加tpye屬性
vim source/categories/index.md

---
title: 文章分類
date: 2017-05-27 13:47:40
type: "categories"
---

3、給文章添加“categories”屬性
hexo new "docker"                #新建文章

---
title: docker.md
date: 2020-06-19 10:41:55
categories: 
- docker
---

注意：hexo一篇文章只能屬於一個分類，也就是說如果在“- docker”下方添加“-xxx”，hexo不會產生兩個分類，而是把分類嵌套（即該文章屬於 “- docker”下的 “-xxx ”分類）。
==============================================================

4、生成"標籤"頁
hexo new pag "tags"

5、添加tpye屬性
vim source/tags/index.html
---
title: 文章分類
date: 2017-05-27 13:47:40
type: "tags"
---

5、給文章添加"tags"屬性
---
title: docker.md
date: 2020-06-19 10:41:55
categories: 
- docker
tags:
- 容器
- 安裝
- 驗證
---

這兩個的設置幾乎一模一樣！是的，沒錯，思路都是一樣的。所以我們可以打開scaffolds/post.md文件，在tages:上面加入categories:,保存後，之後執行hexo new 文章名命令生成的文件，頁面裏就categories:項了。這個是後面新建文章的模板文件


scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

十二、給文章添加圖片

安裝插件
npm install hexo-asset-image --save

然後每次新建文章的時候會創建對應文章名的目錄，將圖片存儲在對應目錄下，然後進行相對路徑引用即可