hexo-butterfly魔改記錄

本文轉載自查看原文 2021-11-11 22:50 4397 hexo-butterfly/ 博客相關

使用hexo-butterfly框架搭建個人博客

這里記錄一下我自己搭建（魔改/照搬他人）個人博客的步驟，日后查找起來也方便。

歡迎訪問我的個人博客點擊這里預覽效果

留言板信封

出自https://akilar.top/posts/e2d3c450/

這里直接npm安裝配置拿來用了。這里轉載一下安裝方法：

博客根目錄執行

npm install hexo-butterfly-envelope --save

在站點配置文件或者主題配置文件添加配置項（對，兩者任一均可。但不要都寫）

# envelope_comment
# see https://akilar.top/posts/58900a8/
envelope_comment:
  enable: true #開關
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信箋封面圖
  message: #信箋內容，支持多行
    - 有什么想問的？
    - 有什么想說的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告訴我哦~
  bottom: 自動書記人偶竭誠為您服務！ #信箋結束語，只能單行
  height: #調整信箋划出高度，默認1050px
  path: #【可選】comments 的路徑名稱。默認為 comments，生成的頁面為 comments/index.html
  front_matter: #【可選】comments頁面的 front_matter 配置
    title: 留言板
    comments: true

字體樣式修改

修改字體樣式直接引入css文件和字體包即可。

1、首先尋找喜歡的字體，有些字體很好看並且是免費非商用的，我們可以拿來用。

這里推薦幾個網址供參考：方正字庫，第一字體網，字體天下，字體家，自由字體

2、將需要使用的字體文件放入博客目錄下，我這里是放在blog/source/butterfly/css下，方便css文件引入。

3、如有有css文件，就在最下面繼續寫；如果沒有，則新建一個css文件，文件名任取

@font-face{
  font-family: 'FZFW' ;  /* 自定義字體名稱 */
  src: url('FZFWZhu.ttf'); /* 引入字體文件的路徑 */
}
/*應用在body體里，放在第一個，font-family會按順序使用字體族。如果第一個沒找到就會找第二個，以此類推。*/
body {
font-family: FZFW,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif
}

鼠標樣式修改

這里使用的是小康博客的鼠標樣式。如果只想修改鼠標樣式，在css文件添加下方代碼，然后引入即可。

/*指針樣式*/
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
/*鏈接小手樣式*/
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

小康博客css修改

我這里是直接使用大佬現成的文件，主題配置中inject引入css文件。

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css">

圖片透明度修改

這里使用的是Akilar大佬的修改方案，個人傾向於一圖流，比較符合我的審美。

/* 頁腳透明 */
#footer{
  background: transparent!important;
}
/* 頭圖透明 */
#page-header{
  background: transparent!important;
}
/*top-img黑色透明玻璃效果移除，不建議加，除非你執着於完全一圖流或者背景圖對比色明顯 */
#page-header.post-bg:before {
  background-color: transparent!important;
}
/*夜間模式偽類遮罩層透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

由於前面使用了小康博客的css，頁腳的模糊毛玻璃效果沒去掉，在頁面F12審查元素之后發現是#footer, #footer:before這個選擇器有問題，修改如下：

#footer, #footer:before {
    background: transparent!important
}

這樣頁腳就透明了。

背景音樂添加

這里參考作者的全局吸底Aplayer教程，為方便后續自己查閱，特摘抄出來。

首先安裝hexo-tag-aplayer插件,官方github；

博客根目錄安裝：

npm install --save hexo-tag-aplayer

由於需要全局都插入aplayer和meting資源，為了防止插入重復的資源，需要把asset_inject設為false

在hexo的配置文件中

aplayer:
  meting: true
  asset_inject: false

在主題配置文件中，enable設為true和per_page設為true

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

然后把代碼插入到頁腳中

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

運行Hexo就可以看到網頁左下角出現了Aplayer

最后，如果你想切換頁面時，音樂不會中斷。把主題配置文件的pjax設為true即可。

參數解釋：

選項	默認值	描述
data-id	必須值	歌曲 id / 播放列表 id / 相冊 id / 搜索關鍵字
data-server	必須值	音樂平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
data-type	必須值	`song`, `playlist`, `album`, `search`, `artist`
data-fixed	`false`	開啟固定模式
data-mini	`false`	開啟迷你模式
data-loop	`all`	列表循環模式：`all`, `one`,`none`
data-order	`list`	列表播放模式： `list`, `random`
data-volume	0.7	播放器音量
data-lrctype	0	歌詞格式類型
data-listfolded	`false`	指定音樂播放列表是否折疊
data-storagename	`metingjs`	LocalStorage 中存儲播放器設定的鍵名
data-autoplay	`true`	自動播放，移動端瀏覽器暫時不支持此功能
data-mutex	`true`	該選項開啟時，如果同頁面有其他 aplayer 播放，該播放器會暫停
data-listmaxheight	`340px`	播放列表的最大長度
data-preload	`auto`	音樂文件預載入模式，可選項： `none`, `metadata`, `auto`
data-theme	`#ad7a86`	播放器風格色彩設置

隨機背景圖

參考Akilar大佬的修改方案。

原版的算法生成0的幾率很小，所以我把生成隨機數的算法改成了Math.floor

首先必須設置網站背景圖，在主題配置中找到並且配置。我這里是配置成了'#efefef'

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

配置之后，主頁使用#web_bg的div來存放背景圖片，使用#page-header來存放banner圖片。使用js隨機選擇一張圖片，然后根據id取值重設即可做到每次切換或刷新時，隨機背景圖片。

我這里在blog/source/butterfly/js下新建了rdmbkg.js文件

//隨機背景圖片數組,圖片可以換成圖床鏈接，注意最后一條后面不要有逗號
var backimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//獲取背景圖片總數，生成隨機數
var bgindex =Math.floor(Math.random() * (backimg.length));
//重設背景圖片
document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
//隨機banner數組,圖片可以換成圖床鏈接，注意最后一條后面不要有逗號
var bannerimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//獲取banner圖片總數，生成隨機數
var bannerindex =Math.ceil(Math.random() * (bannerimg.length-1));
//重設banner圖片
document.getElementById("page-header").style.backgroundImage = bannerimg[bannerindex];

最后在主題配置文件中引入js

inject:
  head:
  bottom:
    - <script async data-pjax src="/js/randombg.js"></script>

最后在主題配置文件中引入js

inject:
  head:
  bottom:
    - <script async data-pjax src="/js/randombg.js"></script>

側邊欄時鍾

參考這里，我直接npm安裝之后拿來用了，下面內容均摘自原博客。

博客根目錄執行命令

npm install hexo-butterfly-clock --save

在hexo配置，或者主題配置中任選一個添加如下配置信息即可。二選一，不要都添加。

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 開關
  priority: 5 #過濾器優先權
  enable_page: all # 應用頁面
  exclude:
    # - /posts/
    # - /about/
  layout: # 掛載容器類型
    type: class
    name: sticky_layout
    index: 0
  loading: /img/loading.gif #加載動畫自定義

參數說明

參數	備選值/類型	釋義
priority	number	【可選】過濾器優先級，數值越小，執行越早，默認為10，選填
enable	true/false	【必選】控制開關
enable_page	path/all	【可選】填寫想要應用的頁面的相對路徑（即路由地址）,如根目錄就填’/‘,分類頁面就填’/categories/‘。若要應用於所有頁面，就填’all’，默認為all
exclude	path	【可選】填寫想要屏蔽的頁面，可以多個。寫法見示例。原理是將屏蔽項的內容逐個放到當前路徑去匹配，若當前路徑包含任一屏蔽項，則不會掛載。
layout.type	id/class	【可選】掛載容器類型，填寫id或class，不填則默認為id
layout.name	text	【必選】掛載容器名稱
layout.index	0和正整數	【可選】前提是layout.type為class，因為同一頁面可能有多個class，此項用來確認究竟排在第幾個順位
loading	URL	【可選】電子鍾加載動畫的圖片

添加評論

最開始使用的是utterances，現在改為Twikoo

具體配置參見：Twikoo

我使用的是Vercel部署，主要是因為免費。作者為我們提供了視頻的部署教程，點擊查看

我為了偷懶，Vercel使用github登錄， MongoDB使用google帳號登錄。

補充說明

這里補充幾點：

Vercel添加環境變量MONGODB_URI之后，想要環境變量生效，記得要重啟服務（在Deployments里，點擊Redeploy ）
配置文件的修改在MONGODB控制台中，點擊Browse Collections

關於代碼高亮，需要在配置中配置HIGHLIGHT:true

語法：
```
<pre><code class="language-css">p { color: red }</code></pre>
```
其中class="language-css"換成需要的語言。

另外twikoo支持md語法，所以直接使用md語法添加代碼塊同樣可行。

利用企業微信實現twikoo新消息提醒：

文章參考：

操作步驟如下：

1 注冊企業微信

進入企業微信創建一個企業。每個普通用戶都可以創建企業，不需要很麻煩，但是需要填寫一些基本信息。

2 企業微信創建應用

在 “企業微信 —— 應用管理” 底部的 “自建” 應用處，新建一個 “應用”。

創建完成后，記錄下應用頁面的AgentId和Secret。查看Secret需要安裝一個企業微信，查看完可以卸載。

在 “企業微信 —— 我的企業” 底部，記錄下企業 ID。

3 部署 API 雲函數

我之前使用vercel部署過twikoo，因此不需要再創建新的雲函數。如果你不是使用vercel，參考這里

找到你的twikoo github倉庫，clone到本地，進入api/，執行以下命令：

pip install pipenv
pipenv install requests

然后在該目錄創建一個python.py文件，內容如下：

from http.server import BaseHTTPRequestHandler
import json
import requests
from urllib.parse import parse_qs

class handler(BaseHTTPRequestHandler):
    

    def do_GET(self):
        def getTocken(id, secert, msg, agentId):
            url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=" + \
                id + "&corpsecret=" + secert

            r = requests.get(url)
            tocken_json = json.loads(r.text)
            # print(tocken_json['access_token'])
            sendText(tocken=tocken_json['access_token'], agentId=agentId, msg=msg)

        def sendText(tocken, agentId, msg):
            sendUrl = "https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=" + tocken
            # print(sendUrl)
            data = json.dumps({
                "safe": 0,
                "touser": "@all",
                "msgtype": "text",
                "agentid": agentId,
                "text": {
                    "content": str(msg)
                }
            })
            requests.post(sendUrl, data)
            
        try:
            params = parse_qs(self.path[12:])
            apiid = params['id'][0]
            apisecert = params['secert'][0]
            apiagentId = params['agentId'][0]
            apimsg = params['msg'][0]
        except:
            apimsg = self.path
        else:
            #try:
            # 執行主程序
            getTocken(id=apiid, secert=apisecert,
                        msg=apimsg, agentId=apiagentId)
            #except:
            #    status = 1
            #    apimsg = '主程序運行時出現錯誤，請檢查參數是否填寫正確。詳情可以參閱：https://blog.zhheo.com/p/1e9f35bc.html'
            #else:
            #    status = 0
        # print(event)
        # print("Received event: " + json.dumps(event, indent = 2))
        # print("Received context: " + str(context))
        # print("Hello world")

        self.send_response(200)
        self.send_header('Content-type', 'text/plain')
        self.end_headers()
        self.wfile.write(apimsg)
        return

注意文件名命名必須是python.py 否則你可能需要更改獲取query parameters部分的代碼。

將改動push到遠程倉庫，等待一會，vercel會自動部署。當Vercel完成部署后，可以使用下面這樣的方式，拼接一個 URL，瀏覽器訪問，看看手機微信能不能接收到消息。

API參數：

參數	類型	必選	描述	示例
id	str	true	企業微信公司id	`ww42a2d7**********`
secert	str	true	企業微信應用的應用secert	`xD_***_6hVymgTBZuTaZviu9i3P4Xd6********`
agentId	int	true	企業微信應用的應用agentId	`1000003`
msg	str	true	需要發送的內容	helloworld

完整的url如下所示：

https://<vercel_app_address>/api/python?id=<企業id>&secert=<secret>&agentId=<agentId>&msg=測試一下吧

將上述url的內容替換成你的信息。其中，vercel_app_address可以在vercel應用界面查看，如下圖：

測試一下你的訪問路徑是否有效，如果能收到消息就說明成功。

4 在twikoo中配置

在twikoo后台管理WECOM_API_URL中添加你拼接的url即可。

注意msg后面不要有參數：

https://<vercel_app_address>/api/python?id=<企業id>&secert=<secret>&agentId=<agentId>&msg=

5 在微信中接收企業微信消息

在“企業微信——我的企業——微信插件”頁面配置，點擊這里查看。

使用微信掃碼，關注你的企業微信，並且在設置中打開允許成員在微信插件中接收和回復聊天消息選項。

大功告成！現在，使用一個非博主的郵箱，去評論一條試試吧。

搜索功能添加

參考這里，我只添加了本地搜索。

根目錄輸入命令安裝

npm install hexo-generator-search --save

然后在hexo的配置文件中添加

search:
  path: search.xml
  field: post
  content: true
  template:

在主題配置文件中打開本地搜索

# Local search
local_search:
  enable: true

頁腳徽標

參考這里，通過shields.io在線生成，

label: 標簽，徽標左側內容
message: 信息，徽標右側內容
color: 色值，支持支持十六進制、rgb、rgba、hsl、hsla 和 css 命名顏色。十六進制記得刪除前面的 #號

輸入相關信息后，點擊 make badge 即可得到徽標的 URL。可以用 img 標簽引用，寫法簡單。不過正式寫法建議用 object 標簽引用，寫法示例如下。

<!-- label=Frame，Message=Hexo，color=blue -->
https://img.shields.io/badge/Frame-Hexo-blue
<!-- 在頁面上可以使用img標簽來引用 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue">
<!-- 部分屬性例如link需要用object標簽來引用 -->
<object data="https://img.shields.io/badge/Frame-Hexo-blue?link=https://hexo.io"></object>

還可以繼續添加參數，在 URL 內添加樣式屬性，在url后面使用 ? 引用，使用 & 連接各屬性。

屬性	說明	示例
style	徽標樣式，默認提供了五種樣式： plastic,flat,flat-square, for-the-badge,social	?style=flat-square
label	覆蓋默認的左側文本（空格或特殊字符需要轉 URL 編碼！）	?label=healthinesses
logo	給左側標簽前插入圖標可以訪問 simpleicons 查詢圖標	?logo=Hexo
logo	自定義圖標，限制較多，不推薦	?logo=data:image/png;base64,url
logoColor	設置徽標的顏色（支持十六進制、rgb、 rgba、hsl、hsla 和 css 命名顏色）。支持命名徽標，但不支持自定義徽標。	?logoColor=violet
logoWidth	給圖標提供的水平空間	?logoWidth=40
link	徽標指向的鏈接，此時需要用 object 標簽引用才能生效寫法看示例代碼	?link=http://example.com
labelColor	左側部分背景色，（支持十六進制、rgb、 rgba、hsl、hsla 和 css 命名顏色）	?labelColor=abcdef 或者？colorA=abcdef
color	右側部分背景色，（支持十六進制、rgb、 rgba、hsl、hsla 和 css 命名顏色）	?color=fedcba 或者？colorB=fedcba

在 [Blogroot]\_config.butterfly.yml 的 footer 配置項中添加徽標，注意事先壓縮一下，使他們只留一行。為了不至於太過緊湊，設置一下行內間隔屬性 margin-inline。

      footer:
        owner:
          enable: true
          since: 2016
-       custom_text:
+       custom_text: <p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架為Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主題采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr為靜態資源提供CDN加速"></a><a style="margin-inline:5px" target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel" title="本站采用雙線部署，默認線路托管於Vercel"></a><a style="margin-inline:5px" target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用雙線部署，聯通線路托管於Coding"></a><a style="margin-inline:5px" target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站項目由Gtihub托管"></a><a style="margin-inline:5px" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知識共享署名-非商業性使用-相同方式共享4.0國際許可協議進行許可"></a></p>
        copyright: false # Copyright of theme and framework
        ICP: # Chinese ICP License

ICP備案的徽標可以通過logo屬性添加，連接如下

https://img.shields.io/badge/%E6%B5%99ICP%E5%A4%87-20210819%E5%8F%B7--1-e1d492?style=flat&logo=data:image/png;base64,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

SEO優化

1 文章路徑

做了一些文章路徑的優化，Hexo默認永久鏈接是 :year/:month/:day/:title/的格式，這樣不美觀，也不利於SEO。

在站點配置文件中修改：

permalink: posts/:hash/	 # 我這里改成posts/:hash

這樣文章的路徑就沒有討厭的年月日格式了。

2 添加站點地圖

我這里使用的是hexo-generator-seo-friendly-sitemap，生成網站地圖。

網站地圖是什么？

網站地圖實際上就像是一個站點的導航文件。網站地圖的重要性：

搜索引擎每天都是讓爬蟲在互聯網爬行來抓取頁面，站點地圖的作用就是給爬蟲爬行構造了一個方便快捷的通道，因為網站頁面是一層一層的鏈接的，其中可能會存在死鏈接的情況，如果沒有站點地圖，爬蟲爬行在某個頁面就因死鏈接爬行不了，那么就不能收錄那些斷鏈接的頁面。
站點地圖的存在不僅是滿足搜索引擎爬蟲的查看，更多是方便網站訪客來瀏覽網站，特別是例如門戶型網站由於信息量太多很多訪客都是通過站點地圖來尋找到自己需要的信息頁面，這也能很好的提高用戶體驗度。
站點地圖可以提高鏈接頁面的權重，因為站點地圖是指向其他頁面的鏈接，此時站點地圖就給頁面增加了導入鏈接，大家知道導入鏈接的增加會影響到頁面的權重，從而提高頁面的權重，頁面權重的提高同時會提高頁面的收錄率。

使用方法：

hexo根目錄下安裝：

npm install hexo-generator-seo-friendly-sitemap --save

在Hexo站點配置文件添加：

sitemap:
    path: sitemap.xml
    tag: false
    category: false

參數	解釋
path	索引地圖的路徑，保持默認就好
tag	false:標簽頁不添加到網站地圖中（推薦）
category	false:分類頁不添加到網站地圖中（推薦）

設置之后，網站地圖就生成完畢了。

以我的站點為例，

網站地圖索引：https://www.yyyzyyyz.cn/sitemap.xml

文章網站地圖：https://www.yyyzyyyz.cn/post-sitemap.xml

頁面網站地圖：https://www.yyyzyyyz.cn/page-sitemap.xml

接下來，我們需要將生成的網站地圖提交到谷歌、百度、必應等站點，注冊賬號，添加你的域名，然后復制剛才生成的網站地圖上傳。之后等待爬蟲抓取就好了。下面是sitemap上傳示例。

百度：

必應：

谷歌：

關於谷歌，有能力的同學可以嘗試一下。

3 自動推送

使用hexo-submit-urls-to-search-engine插件，每次hexo -d時，可自動推送Hexo博客新鏈接至谷歌、百度、必應搜索引擎站長平台以提升網站收錄質量和速度。解放雙手，一勞永逸。

首先在本地hexo根目錄下安裝：

npm install --save hexo-submit-urls-to-search-engine

獲取站長平台API token，關於這部分內容，官方文檔有詳細介紹，點擊查看

假設你已經閱讀了官方文檔，並且獲得了token。獲取token之后，Hexo站點配置文件添加：

hexo_submit_urls_to_search_engine:
  submit_condition: count #鏈接被提交的條件，可選值：count | period 現僅支持count
  count: 10 # 提交最新的10個鏈接
  period: 900 # 提交修改時間在 900 秒內的鏈接
  google: 0 # 是否向Google提交，可選值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可選值：1 | 0（0：否；1：是）
  baidu: 1 # 是否向baidu提交，可選值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文檔名， 需要推送的鏈接會保存在此文本文檔里
  baidu_host: https://cjh0613.github.io ## 在百度站長平台中注冊的域名
  baidu_token: 請按照文檔說明獲取 ## 請注意這是您的秘鑰， 所以請不要把它直接發布在公眾倉庫里!
  bing_host: https://cjh0613.github.io ## 在bing站長平台中注冊的域名
  bing_token: 請按照文檔說明獲取 ## 請注意這是您的秘鑰， 所以請不要把它直接發布在公眾倉庫里!
  google_host: https://cjh0613.github.io ## 在google站長平台中注冊的域名
  google_key_file: Project.json #存放google key的json文件，放於網站根目錄（與hexo _config.yml文件位置相同），請不要把json文件內容直接發布在公眾倉庫里!
  google_proxy: http://127.0.0.1:8080 # 向谷歌提交網址所使用的系統 http 代理，填 0 不使用
  replace: 0  # 是否替換鏈接中的部分字符串，可選值：1 | 0（0：否；1：是）
  find_what: 
  replace_with:

關於谷歌，如果不想提交到谷歌，設置google和google_proxy為0。

配置完成。

接下來只需要hexo clean && hexo generate && hexo deploy即可。

如果推送成功，你會看到如下消息：

Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Bing response:  { d: null }
Baidu response:  {"remain":2992,"success":8}
Google response:  {
  urlNotificationMetadata: {
    url: 'https://www.yyyzyyyz.cn/posts/25075e302733/',
    latestUpdate: {
      url: 'https://www.yyyzyyyz.cn/posts/25075e302733/',
      type: 'URL_UPDATED',
      notifyTime: '2021-11-18T11:16:27.108920085Z'
    }
  }
}

4 添加robots.txt

關於robots協議，可以查看我的這篇博客，簡單來說就是可以指定搜索引擎爬蟲可以抓取什么內容、不可以抓取什么內容。

這些網站可以在線生成robots.txt任選一個即可：tool在線生成，ChinaZ在線生成，dqdv在線生成，w3cschool在線生成

復制生成的內容，新建一個robots.txt將內容粘貼進去，然后將它上傳至網站根目錄下。

可以在這里驗證你的文件是否生效：驗證robots

5 添加rel

為網站使用到的所有外鏈添加rel="noopener external nofollow noreferrer", 可以有效地加強網站SEO和防止權重流失。github

hexo博客根目錄安裝：

npm i hexo-filter-nofollow --save

然后在配置文件添加：

nofollow:
  enable: true
  field: site

使用Github Action自動部署博客

參考這篇文章。

首先，要保證使用git安裝了butterfly主題而不是npm安裝，因為通過npm安裝並不會在themes里生成主題文件夾，而是在 node_modules里生成。

操作步驟如下：

1 獲取token

登錄GitHub，訪問 Github-> 頭像（右上角）->Settings->Developer Settings->Personal access tokens（點擊跳轉），點擊generate new token，創建token，名稱隨意，需要勾選repo權限。

復制這個token備用，token只會顯示這一次，如果忘記需要重新生成。

2 創建存放源碼的私有倉庫

我們需要創建一個用來存放 Hexo 博客源碼的私有倉庫，由於倉庫會保存剛剛生成的token，如果泄露會導致安全問題，因此選擇閉源。用[SourceRepo]表示。

3 創建另一個倉庫存放編譯好的博客文件

這個倉庫可以公開，也可以私有。用[GithubBlogRepo]表示。

4 配置 deploy 項

打開站點配置文件 博客根目錄/_config.yml, 找到 deploy 配置項，使用之前生成的token和github倉庫 URL 來組裝地址。

deploy:
- type: git
  repo:
    gitHub: https://GitHub用戶名:剛剛生成的token@github.com/Github用戶名/[GithubBlogRepo].git,master

5 配置 Github Action

在博客根目錄新建.github 文件夾，注意開頭是有個. 。然后在.github 內新建 workflows 文件夾，再在 workflows 文件夾內新建 autodeploy.yml, 在 [Blogroot]/.github/workflows/autodeploy.yml 里面輸入如下內容：

# 當有改動推送到master分支時，啟動Action
name: 自動部署

on:
  push:
    branches:
      - master

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 檢查分支
      uses: actions/checkout@v2
      with:
        ref: master

    - name: 安裝 Node
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: 安裝 Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g

    - name: 緩存 Hexo
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安裝依賴
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: 生成靜態文件
      run: |
        hexo clean
        hexo generate

    - name: 服務器驗證
      env:
        ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
      run: |
        sudo timedatectl set-timezone "Asia/Shanghai"
        mkdir -p ~/.ssh/
        echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan 10.**.5*.*** >> ~/.ssh/known_hosts  #此處填寫你的服務器IP
        git config --global user.name "yyyz"  #修改為你的用戶名
        git config --global user.email "*********@qq.com" #修改為你的GitHub用戶名郵箱
        
    - name: 部署
      run: |
        git config --global user.name "yyyz"  #修改為你的用戶名
        git config --global user.email "*********@qq.com" #修改為你的GitHub用戶名郵箱
        git clone https://GitHub用戶名:剛剛生成的token@github.com/Github用戶名/[GithubBlogRepo].git .deploy_git
        # 此處務必用HTTPS鏈接。SSH鏈接可能有權限報錯的隱患
        # =====注意.deploy_git前面有個空格=====
        # 這行指令的目的是clone博客靜態文件倉庫，防止Hexo推送時覆蓋整個靜態文件倉庫，而是只推送有更改的文件
        hexo deploy

6 在博客源碼倉庫添加secrets

我們需要在自動部署時使用免密登錄，因此要在剛剛創建的存放源碼的私有倉庫[SourceRepo]內添加一個secrets。

進入私有倉庫點擊settings->secrets->new repository secret，其中Name為HEXO_DEPLOY_PRI；Value為你本地電腦上.ssh文件夾下為服務器生成的免密登錄的私鑰，我這里是id_rsa，復制私鑰內容粘貼即可。

7 重新設置遠程倉庫和分支

博客根目錄下，添加.gitignore文件：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git

在博客根目錄下啟動終端，使用 git 指令重設倉庫地址。

git remote rm origin # 刪除原有倉庫鏈接
git remote add origin git@github.com:Github用戶名/[SourceRepo].git #[SourceRepo]為新的存放源碼的github私有倉庫
git add .
git commit -m "github action update"
git push origin master

前往源碼倉庫查看，如果你發現theme/butterfly文件打不開並且有一個箭頭，是由於我們clone安裝的butterfly主題，這個文件夾里面有.git隱藏文件，github就將他視為一個子系統模塊了。

解決辦法就是：

刪除文件夾里面的.git文件夾
執行git rm --cached theme/butterfly

然后重新add、commit、push即可。

打開 GIthub 存放源碼的私有倉庫，找到 action，查看是否成功上傳博客。

這種方式有一個缺點是每次更新時，你所有的文章更新時間都會改變，於是我干脆把更新時間隱藏了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Butterfly 主題魔改記錄 frp魔改記錄 Hexo博客之butterfly主題優雅魔改系列（持續更新） Hexo博客美化之蝴蝶(butterfly)主題魔改 hexo butterfly優化 Hexo+Butterfly主題美化搭建基於Hexo+Butterfly主題的個人博客站 Git(查看修改記錄) hexo 切換butterfly 主題報錯踩坑處理【Web】Hexo+Butterfly+Github+Coding搭建個人博客