有的時候博客內容會有變動,首發博客是最新的,其他博客地址可能會未同步,認準https://blog.zysicyj.top
可點擊鏈接https://blog-1253652709.cos.ap-guangzhou.myqcloud.com//picgo/202401180921373.png 解答疑問
官網地址:https://docs.techgrow.cn/v1/wechat/tutorial/hexo/#%E5%89%8D%E8%A8%80
先放下自己的配置,效果
如何實現引流公眾號-1.jpg (15.18 KB, 下載次數: 15)
下載附件
2024-8-2 14:53 上傳
管理后臺
如何實現引流公眾號-2.jpg (25.74 KB, 下載次數: 20)
下載附件
2024-8-2 14:53 上傳
驗證碼解鎖就是關注公眾號獲取的
這是是我的配置
readmore: enable: true blogId: '39259-6450029321246-xxx' name: '程序員朱永勝' keyword: '1' qrcode: 'https://blog-1253652709.cos.ap-guangzhou.myqcloud.com/blog/202308142242856.jpg' height: 'auto' expires: 365 interval: 60 random: 1 allowMobile: false前言
<hr>Hexo 博客建議安裝 hexo-readmore (opens new window) 插件,將 TechGrow (opens new window) 的免費微信公眾號引流工具整合到博客中,用戶掃碼關注微信公眾號后可以解鎖全站文章,讓微信公眾號的粉絲數躺著增長。
特色功能
<hr>
- 兼容主流的 Hexo 主題
- 支持隨機為博客添加引流功能
- 支持關閉某篇文章的引流功能
- 支持查詢用戶解鎖文章的歷史記錄
- 支持自定義或者動態計算文章內容的預覽高度
- 支持自定義 CSS 樣式,輕松適配不同風格的博客
- 支持開放 API,靈活接入第三方私有化部署的應用服務
注冊博客
<hr>瀏覽器訪問 TechGrow (opens new window) 的官網 ,注冊并登錄賬號后,進入博客的后臺管理頁面。首先點擊左側的菜單 博客注冊,然后點擊 新增 按鈕,添加自己博客的信息。博客注冊成功后,記錄下 博客 ID,后面的步驟會使用到
如何實現引流公眾號-3.jpg (20.76 KB, 下載次數: 13)
下載附件
2024-8-2 14:53 上傳
設置公眾號
<hr>在微信公眾號的后臺管理頁面,菜單欄里選擇 自動回復 - 關鍵詞回復,啟用 自動回復,然后點擊 添加回復 按鈕
如何實現引流公眾號-4.jpg (35.68 KB, 下載次數: 16)
下載附件
2024-8-2 14:53 上傳
填寫 規則名稱、關鍵詞(當初你在 TechGrow 中設置的)、回復內容 選擇 文字,然后 回復文字 的內容填寫獲取博客解鎖驗證碼的鏈接,如下所示(請自行更改 xxxxx-xxxxxxxxx-xxx 為你申請到的博客 ID)
<a href="https://open.techgrow.cn/#/readmore/captcha/generate?blogId=xxxxx-xxxxxxxxx-xxx">點擊鏈接,獲取博客解鎖驗證碼</a>
如何實現引流公眾號-5.jpg (45.56 KB, 下載次數: 21)
下載附件
2024-8-2 14:53 上傳
此時,當讀者關注你的微信公眾號,并輸入關鍵詞后(比如我設置的關鍵詞就是 tech),那么讀者就會自動接收到獲取博客解鎖驗證碼的鏈接
安裝插件
<hr>
npm install hexo-readmore --save 配置 Hexo
<hr>編輯 Hexo 自身的 _config.yml 配置文件,新增插件的配置信息(請自行更改博客相關的信息),如下所示:
readmore: # 是否啟用 enable: true # 已申請的博客 ID blogId: '18762-1609305354821-257' # 已申請的微信公眾號名稱 name: '全棧技術驛站' # 已申請的微信公眾號回復關鍵詞 keyword: 'tech' # 已申請的微信公眾號二維碼圖片 qrcode: 'https://www.techgrow.cn/img/wx_mp_qr.png' # 自定義的 JS 資源鏈接,可用于 CDN 加速 libUrl: 'https://qiniu.techgrow.cn/readmore/dist/readmore.js' # 自定義的 CSS 資源鏈接,可用于適配不同風格的博客 cssUrl: 'https://qiniu.techgrow.cn/readmore/dist/hexo.css' # 命令行終端是否輸出日志信息 debug: true # 文章內容的預覽高度(例如 300) height: 'auto' # 文章解鎖后憑證的有效天數 expires: 365 # 定時校驗憑證有效性的時間間隔(秒) interval: 60 # 是否添加微信公眾號引流工具到移動端頁面 allowMobile: false # 獲取文章主體內容的 JS 選擇器,在博客啟用了 Pjax 的情況下才需要根據不同的主題進行配置 pjaxSelector: '' # Pjax 支持重載的 Css 類名(例如 'pjax'),在博客啟用了 Pjax 的情況下才需要根據不同的主題進行配置 pjaxCssClass: '' # 每篇文章隨機添加微信公眾號引流工具的概率,有效范圍在 0.1 ~ 1 之間,1 則表示所有文章默認都自動添加引流工具 random: 1 或者打開 TechGrow 的博客后臺管理頁面 (opens new window),點擊博客列表中右側的 使用 鏈接,將窗口里的 YAML 配置內容復制到 Hexo 自身的 _config.yml 配置文件即可。
參數說明
<hr>參數
| 類型
| 必填
| 默認值
| 說明
| enable
| Boolean
| 是
| false
| -
| blogId
| String
| 是
|
| -
| name
| String
| 是
|
| -
| keyword
| String
| 是
|
| -
| qrcode
| String
| 是
|
| -
| libUrl
| String
| 否
| https://qiniu.techgrow.cn/readmore/dist/readmore.js
| -
| cssUrl
| String
| 否
| https://qiniu.techgrow.cn/readmore/dist/hexo.css
| -
| debug
| Boolean
| 否
| true
| -
| height
| String / Number
| 否
| auto
| -
| expires
| Number
| 否
| 365
| -
| interval
| Number
| 否
| 60
| -
| allowMobile
| Boolean
| 否
| false
| -
| pjaxSelector
| String
| 否
|
| -
| pjaxCssClass
| String
| 否
|
| -
| random
| Number
| 否
| 1
| -
| excludes
| Array
| 否
|
| -
|
構建 Hexo
<hr>
- 運行 hexo clean 命令清理本地博客
- 運行 hexo generate 命令構建本地博客
- 運行 hexo server 命令啟動本地博客服務
驗證插件效果
<hr>打開文章頁面,若文章自動隱藏了部分內容,并且出現了 閱讀全文 按鈕,則說明引流插件正常運行,如下圖所示:
如何實現引流公眾號-6.jpg (37.7 KB, 下載次數: 15)
下載附件
2024-8-2 14:53 上傳
點擊 閱讀全文 按鈕,會彈出微信公眾號的二維碼窗口,如下圖所示:
如何實現引流公眾號-7.jpg (59.36 KB, 下載次數: 13)
下載附件
2024-8-2 14:53 上傳
取消閱讀限制
<hr>若希望關閉某篇文章的微信公眾號導流功能,可以在文章的頭模板中使用 readmore: false 配置屬性,如下所示:
---title: Hexo版本升級教程tags: [Hexo]readmore: falsekeywords: [Hexo, 版本升級]date: 2022-01-12 22:25:49updated: 2022-01-12 22:25:49--- 若希望關閉部分文章的微信公眾號引流功能,可以使用插件的 excludes 參數來實現,支持使用路徑、通配符的匹配規則。
# 排除 URL 為 `/notes/637e7b8f.html` 的文章readmore: .... excludes: - '/notes/637e7b8f.html'
- 根據 URL 通配符,關閉某個目錄下所有文章的引流功能
# 排除 URL 以 `/fontend` 開頭的文章# 排除 URL 為 `/backend/python/io` 的文章readmore: .... excludes: - '/fontend/*' - '/backend/*/io' Pjax 的支持
<hr>如果博客啟用了 Pjax,那么 Hexo 引流插件需要使用 pjaxCssClass 參數指定 Pjax 支持重載的 Css 類名(例如 pjax),同時需要使用 pjaxSelector 參數指定獲取文章主體內容的 JS 選擇器。否則在站點內(如首頁、標簽頁、分類頁、歸檔頁等)通過鏈接訪問文章頁面時,引流工具不會生效,除非是手動刷新一次頁面。值得一提的是,兩者都需要根據不同的 Hexo 主題來配置,其中不同主題的配置示例如下:
主題
| pjaxCssClass 配置
| pjaxSelector 配置
| 說明
| Butterfly (opens new window)
| pjaxCssClass: 'js-pjax'
| pjaxSelector: 'main.layout'
|
| NexT (opens new window)
| pjaxCssClass: 'pjax'
| pjaxSelector: 'div.main-inner'
|
| Tree (opens new window)
| pjaxCssClass: 'pjax'
| pjaxSelector: 'div.article-content'
|
|
配置參數說明
上述 pjaxCssClass 參數的作用是讓 Pjax 重載引流工具的代碼段,而 pjaxSelector 參數的作用是通過 JS 選擇器獲取文章主體內容。當配置了 pjaxSelector 和 pjaxCssClass 參數之后,Hexo 引流插件會往所有渲染后的 HTML 頁面自動添加引流代碼段,包括 page 和 post 的頁面類型。如果兩者都不配置,則 Hexo 引流插件默認只會往渲染后的 post 頁面添加引流代碼段。
特別注意事項
由于 Pjax 非常依賴頁面布局的一致性,因此請確保通過 pjaxSelector 參數指定的 JS 選擇器在所有頁面(包括 page 和 post)都能夠獲取到唯一的 HTML 標簽元素,否則會導致部分頁面的 Pjax 或者引流功能不會生效。如果無法滿足這一點,則需要手動更改 Hexo 主題的模板代碼,使 JS 選擇器在所有頁面都能夠獲取到唯一的 HTML 標簽元素。Hexo 主題模板代碼的修改可以參考 NexT (opens new window),然后設置 pjaxSelector 的參數值為 div.post-container,并設置 pjaxCssClass 的參數值為 pjax。
自定義樣式
<hr>插件默認使用了定義在 hexo.css (opens new window) 的 CSS 樣式,你可以使用以下兩種方式自定義自己的樣式:
- 第一種方式:更改博客主題的 CSS 源碼文件,將自定義的那部分 CSS 樣式添加到里面
- 第二種方式:根據 hexo.css (opens new window) 創建自己的 CSS 文件(完整的),并將其存放在自己的博客里,同時通過插件的 cssUrl 配置參數來指定其訪問的 URL 路徑
提示:為了方便日后維護,強烈建議使用第二種方式來添加自定義樣式
開放 API
<hr>若不希望依賴 TechGrow 官方提供的系統服務,可以選擇使用開放 API 的方式,讓引流插件直接使用私有化部署的后端應用服務,詳細介紹請看這里。
已兼容的主題
<hr>主題
| GitHub 倉庫
| NexT
| https://github.com/next-theme/hexo-theme-next (opens new window)
| Yilia
| https://github.com/litten/hexo-theme-yilia (opens new window)
| Icarus
| https://github.com/ppoffice/hexo-theme-icarus (opens new window)
| Matery
| https://github.com/blinkfox/hexo-theme-matery (opens new window)
| Fluid
| https://github.com/fluid-dev/hexo-theme-fluid (opens new window)
| Stun
| https://github.com/liuyib/hexo-theme-stun (opens new window)
| Butterfly
| https://github.com/jerryc127/hexo-theme-butterfly (opens new window)
| Tree
| https://github.com/rqh656418510/hexo-theme-tree (opens new window)
|
常見問題
<hr>問題一
Hexo 安裝插件后,瀏覽器的控制臺輸出警告或者錯誤信息,且引流工具無法生效
瀏覽器訪問 Hexo 博客后,按下 F12 快捷鍵調出調試工具,然后切換到 控制臺,最后將警告或者錯誤信息截圖,并發送到 官方微信群 (opens new window) 或者 656418510@qq.com 郵箱,建議留言備注 Hexo 與 Hexo 主題的版本號。
問題二
Hexo 安裝插件后,移動端的引流工具無法生效,而 PC 端卻生效
考慮到用戶體驗的問題,在移動端默認是關閉引流功能的。若希望在移動端啟用引流功能,可以通過 Hexo 引流插件的 allowMobile: true 配置參數來實現。 |
|