buttfly主题魔改
參考【源碼開放】Hexo+Github 博客butterfly 和 matery 主題 搭建完全教程【整理】 | 超逸の博客 (yangchaoyi.vip)
1.1跟更新番劇列表
防止請求次數過多插件不再自動獲取番劇數據，所以請根據自己的需要在 hexo generate 或 hexo deploy 之前使用
命令更新番劇數據！
hexo bangumi -u $ hexo bangumi -u INFO Validating config INFO Getting bilibili bangumi, please wait... INFO 9 bangumis have been loaded in 1092 ms刪除數據命令:
hexo bangumi -d |
1.1.1live2d
npm install --save hexo-helper-live2d
npm install live2d-widget-model-haruto暗轉模型
$ npm install --save hexo-helper-live2d npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated hexo-bunyan@1.0.0: Please see https://github.com/hexojs/hexo-bunyan/issues/17 npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated node-fetch-npm@2.0.4: This module is not used anymore, npm uses minipass-fetch for its fetch implementation now npm WARN deprecated libnpmconfig@1.2.1: This module is not used anymore. npm config is parsed by npm itself and by @npmcli/config npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! network Socket timeout npm ERR! network This is a problem related to network connectivity.出現network proxy問題解決方案 npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\韓東平\AppData\Local\npm-cache\_logs\2023-02-01T03_20_19_952Z-debug-0.log解決
npm config set proxy false npm cache verify成功
1.1.2豆瓣
npm install hexo-douban --save
https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的個人ID了。
obito (douban.com)
我的id為232927159
插曲
INFO Can't find bilibili bangumi data, please use 'hexo bangumi -u' command to get data WARN 用戶ID輸入錯誤 INFO books have been loaded in 1210 ms WARN 用戶ID輸入錯誤 INFO movies have been loaded in 1185 ms1.1.3添加全局吸底APlayer
第一步
第二步
Author: Pscgylotti
1.1.4貢獻日歷
考慮到最近很多小伙伴詢問我這個貢獻日歷是怎么添加的，現在來出一份教程，廢話留在文末尾，到時候再看。現在進入正文：
由于某些原因，原教程已刪，提供原大佬鏈接：https://zfe.space/post/6948.html 大家可以去溜達溜達，大佬文章是最新版的！Zfour/hexo-github-calendar: 基于hexo的github calendar貢獻插件
主要配置教程
前往” 根目錄 \themes\butterfly\layout” 文件夾將資源包中的”gitcalendar.pug” 復制到文件夾中。
將”index.pug” 復制并重命名為”index-re.pug” 作為備份。
將資源包 pug 文件夾的 Original 中的”index.pug” 覆蓋進行替換，如果你使用磁貼請使用 Magnet Plus 文件夾的”index.pug”。
或者打開”index.pug” 按照以下代碼進行修改。修改的起始點為”#recent-posts.recent-posts”。
CODE
參考Zfour (github.com)
2.1主頁詳情頁
2.1.1主頁封面圖片
最痛的問題可以考慮圖床 或者上傳githubhttps://github.com/xpssssss/xpssssss.github.io/commit/e05560b069a70d462cf33914bc08f8f7f2296b42#diff-86c86140aa94fe3e1e153e4756464b0c6668ae08ef59948f60dfdb2ac74c8a8a 圖片可以用云圖片鏈接或者放在本地文件夾位置：/themes/butterfly/source/img# The banner image of home page index_img: /img/background.jpg1.上傳到GitHub上
https://github.com/xpssssss/xpssssss.github.io/blob/main/%E4%B8%BB%E9%A1%B5%E5%A3%81%E7%BA%B8.jpg
2.上傳到圖云
# the banner image of home page
index_img: https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
注冊
Register - SM.MS - Simple Free Image Hosting (smms.app)
3.本地更換背景圖片
背景圖片參考網址：
https://wallhaven.cc/
https://wall.alphacoders.com/
https://bz.zzzmh.cn/index
本方法解決的是多次同步到GitHub上背景圖片未成功的情況
直接更改原文件
圖片所在目錄：hexo/themes/landscape/source/css/images/
圖片名稱：banner.jpg
4.使用typore
(2條消息) 【Hexo】GitHub+Typora寫博客+圖片上傳_Q大帥的博客-CSDN博客_hexo如何上傳圖片
2.2.2社交圖標
social:fab fa-github: https://github.com/xxxxx || Githubfas fa-envelope: mailto:xxxxxx@gmail.com || Email圖標名可在這尋找: https://fontawesome.com/icons?from=io
設置標簽(3條消息) Hexo博客之優雅使用阿里iconfont圖標_DreamyTZK的博客-CSDN博客
2.2.3圖庫
在souce中添加
<!-- {% gallery %}{% endgallery %} --> <div class="gallery-group-main"> {% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %} {% galleryGroup '漫威' '關于漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %} {% galleryGroup 'OH MY GIRL' '關于OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %} </div>3.1、文章封面
每篇文章都可以設置一張封面，可以為每篇文章設置默認封面
也可以修改每個md文件的front-matter的cover屬性，會覆蓋上面的默認封面。修改主題配置文件_config.butterfly.yml： cover:index_enable: true # 是否展示文章封面aside_enable: truearchives_enable: trueposition: both # 封面展示的位置 left/right/both# 當沒有設置cover時，默認展示的文章封面default_cover:# 當配置多張圖片時，會隨機選擇一張作為 cover. 此時寫法為- https:- http:- http:- http:- http:- http:原文鏈接：https://blog.csdn.net/YR_112233/article/details/122778691
3.2社交
social:fab fa-github: https://githubfast.com/lyr233 || Githubfa fa-book-open: https://blog.csdn.net/YR_112233 || CSDN 打開qq鏈接fab fa-qq: tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2367009534&website=www.oicqzone.com || QQfuin代表主動添加的一方，uin是被加的一方，你也可以去掉fuin，如：fas fa-envelope-open-text: mailto:728831102@qq.com || Email3.3字數統計
npm install hexo-wordcount --save3.4評論
二、評論功能
修改主題配置文件_config.butterfly.yml：
Hexo 集成 Gitalk 評論系統
官方中文文檔： https://github.com/gitalk/gitalk/blob/master/readme-cn.md
（1）在github上注冊新應用
申請GitHub OAuth application流程： 1、打開github網站登陸后，點擊右上角的用戶圖標，選擇Settings 2、 在Settings頁面選擇Developer settings選項。 3、在Developer settings選擇OAuth Apps,然后會在頁面右邊有一個New OAuth App按鈕，點擊這個按鈕就進入到新建OAuth application頁面 4、也可以直接代開這個鏈接：https://github.com/settings/applications/new 進入新建頁面 參數說明：一些個描述
Application name： # 應用名稱，可以隨意 Homepage URL： # 網站URL，要求不嚴格，可以是自己的網站地址 Application description # 描述，隨意 Authorization callback URL：# 網站URL，填自己要使用Gitalk的博客地址，不可亂填 填寫完成可以得到Client ID和Client Secret（2）申請一個倉庫做評論存儲，記住倉庫名，到時需要填入hexo的_config.yml配置中
（3）修改主題配置文件_config.butterfly.yml
# gitalk
OAuth application settings (github.com)申請地址
# https://github.com/gitalk/gitalk
gitalk:client_id: #你的client idclient_secret: #你的client_secretrepo: #你的倉庫名owner: #你的github用戶名admin: #該倉庫的擁有者和協作者language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ruperPage: 10 # Pagination size, with maximum 100.distractionFreeMode: false # Facebook-like distraction free mode.pagerDirection: last # Comment sorting direction, available values are last and first.createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automaticallyoption:創建id
3傳送報錯
fatal: unable to access 'https://github.com/xpssssss/xpssssss.github.io.git/': Recv failure: Connection was reset FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.htmlError: Spawn failedat ChildProcess.<anonymous> (D:\myblog\node_modules\hexo-util\lib\spawn.js:51:21)at ChildProcess.emit (node:events:513:28)at cp.emit (D:\myblog\node_modules\cross-spawn\lib\enoent.js:34:29)at ChildProcess._handle.onexit (node:internal/child_process:291:12)Error: Spawn failed錯誤
總結一下：
問題大多是因為git 進行push或者hexo d的時候改變了一些.deploy_git文件下的內容。
解決辦法：
刪除.deploy_git文件夾;
輸入git config --global core.autocrlf false
git config --global core.autocrlf false然后，依次執行：
hexo clean
hexo g
hexo d
問題解決。暴力直接，有效
pug語法學習？？
ERROR Process failed: layout/includes/head/config.pug Error: D:\myblog\themes\butterfly\layout\includes\head\config.pug:4:362| var algolia = 'undefined';3| var env = process.env;> 4| if (theme.algolia_search.enable) { ------------------------------------------^5| algolia = JSON.stringify({6| appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID,7| apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey,這是一個Pug模板引擎錯誤，具體來說是 "Error: D:\myblog\themes\butterfly\layout\includes\head\config.pug:4:36"。這意味著在 "D:\myblog\themes\butterfly\layout\includes\head\config.pug" 文件中， "theme.algolia_search.enable" 變量未定義或不存在。請檢查代碼并確保 "theme.algolia_search.enable" 變量是否已正確定義。如果 "theme" 未定義，請先定義 "theme" 變量。4.插件
4.1aplayer是可以單獨插入在博客內容里
Hexo博客使用aplayer音樂播放插件 - 閃閃の小窩 (moechun.fun)
在Hexo框架中，自定義添加HTML內容的地方通常在主題的layout文件夾中，例如： layout/post.ejs文件：用于自定義每篇文章的HTML模板 layout/page.ejs文件：用于自定義獨立頁面的HTML模板 您可以在相應的文件中添加您想要的HTML代碼。最后，請記住重新生成和部署您的Hexo博客，以使更改生效。添加如下內容：
custom_html: '<!--aplayer--><link rel="stylesheet" href="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.css"><div id="aplayer"></div><script src="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.js"></script><script src="https://你的域名/js/useaplayer.js"></script>'然后：
pm2 delete 0 hexo g pm2 start hexo_run.js5.綁定自己的域名
博客地址：https://www.likecs.com/show-30474.html
綁定之后你就有有一個自己專屬的博客了。
買一個域名，可以一塊錢白嫖，但是續費貴的飛天！！！
注意請謹慎綁定，想我就會出現提交一次 (hexo d) ,需要重新綁定域名
還有問題
cdn
使用GitHub倉庫作為圖床，存在的問題是國內訪問github的速度很慢，可以利用 jsDelivr CDN 來加速訪問。jsDelivr 是一個免費開源的 CDN 解決方案，該平臺是首個打通中國大陸與海外的免費CDN服務，擁有中國政府頒發的 ICP 許可證，無須擔心中國防火墻問題而影響使用。使用jsDelivr加速訪問，需要將自定義域名設置為https://cdn.jsdelivr.net/gh/用戶名/圖床倉庫名/。
————————————————
版權聲明：本文為CSDN博主「指尖聽戲」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38140292/article/details/118885686
Butterfly添加全局吸底Aplayer教程 | Butterfly
總結
以上是生活随笔為你收集整理的buttfly主题魔改的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 管道轴测图CAD画法
- 下一篇： api接口访问限制