普通人开网店赚钱吗_海外销售是做什么的_百度营销推广靠谱吗_商业推广

hexo+butterfly博客功能完善和美化（二）

参考博客：

hexo的butterfly主题美化，2024年初版_hexo 主题-CSDN博客

【Hexo】Hexo搭建Butterfly主题并快速美化_hexo butterfly-CSDN博客

Butterfly 主题的详细配置 | 梁圣磊の博客

基于 Hexo 键入搜索功能 | 唐志远

笔者也是兜兜转转，能用的不能用的，有bug的没bug的都试了一遍，我写的这些都是我实现了的，没实现的都没写，要是有坑的话我一般也会贴上我是咋弄的

1.看板娘添加

具体步骤

前往博客根目录，打开cmd命令窗口执行npm install --save hexo-helper-live2d。

bash
npm install --save hexo-helper-live2d

输入以下命令，下载相应的模型， 替换成你想要的模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者或者Hexo添加Live2D看板娘+模型预览-CSDN博客

bash
npm install --save live2d-widget-model-shizuku

修改站点配置文件_config.yml，添加如下代码：

yml
live2d:enable: truescriptFrom: local # 默认tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中debug: false # 调试, 是否在控制台输出日志model:use: live2d-widget-model-shizuku  #模型选择display:position: right  #模型位置width: 150       #模型宽度height: 300      #模型高度hOffset: 20vOffset: -20mobile:show: false      #是否在手机端显示

重新编译运行，即可看到效果。

2.字数统计

1. 安装插件：在你的博客根目录，打开 cmd 命令窗口执行 npm install hexo-wordcount --save。
2. 开启配置：修改主题配置文件_config.butterfly.yml 中的 wordcount。

wordcount:enable: truepost_wordcount: truemin2read: truetotal_wordcount: true

打开一篇博客即可看到如下效果

3.统计访问人数 (UV 和 PV)

详细信息请查看 busuanzi 官方网站。

Butterfly很贴心地集成了不蒜子计数工具，可以统计网站的访问数据（人数，次数等）。只需要修改主题配置文件即可开启。

修改主题配置文件_config.butterfly.yml。

busuanzi:site_uv: true  # 本站总访客数site_pv: true  # 本站总访问量 page_pv: true  # 本文总阅读量

4.社交图标

Butterfly 支持 font-awesome v6 图标。

修改主题配置文件_config.butterfly.yml。

书写格式：图标名：url || 描述性文字。

social:fab fa-github: https://github.com/Darling-123456 || Github || '#24292e'fa fa-book-open: https://blog.csdn.net/m0_74795952?type=blog || CSDNfas fa-envelope-open-text: mailto:2214050255@qq.com || Email || '#4a7dbe'

这个笔者看了看别人的，qq微信啥的其实也没啥用，感觉有这几个就够用了

5.侧边栏排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

修改主题配置文件_config.butterfly.yml。

aside:enable: truehide: falsebutton: truemobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容position: right # left or right card_author: # 关于博主的一些信息enable: truedescription:button:enable: trueicon: fab fa-githubtext: Follow Melink: https://github.com/xxxxxxcard_announcement:  # 公告信息enable: truecontent: This is my Blogcard_recent_post: # 最新文章enable: truelimit: 5 # if set 0 will show allsort: date # date or updatedsort_order: # Don't modify the setting unless you know how it workscard_categories: # 文章分类enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/falsesort_order: # Don't modify the setting unless you know how it workscard_tags: # 文章标签enable: truelimit: 40 # if set 0 will show allcolor: falsesort_order: # Don't modify the setting unless you know how it workscard_archives: # 文章归档enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allsort_order: # Don't modify the setting unless you know how it workscard_webinfo:  # 网站信息enable: truepost_count: truelast_push_date: truesort_order: # Don't modify the setting unless you know how it works

6.打字效果

传送门：activate-power-mode。

修改主题配置文件_config.butterfly.yml。

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:enable: falsecolorful: true # open particle animation (冒光特效)shake: true #  open shake (抖動特效)mobile: false

7.分享功能

addThis、sharejs、addtoany三个选一个开启

addThis官网：https://www.addthis.com/

# Share System (分享功能)
# --------------------------------------# AddThis
# https://www.addthis.com/
addThis:enable: falsepubid:  #访问 AddThis 官网, 找到你的 pub-id# Share.js
# https://github.com/overtrue/share.js
sharejs:enable: true  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容# AddToAny
# https://www.addtoany.com/
addtoany:enable: falseitem: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

sharejs效果图:

8.搜索功能

我真是个脑瘫，这么个功能弄了半天，服了，下次记得看看人家注释写的啥

1.本地搜索

1.安装搜索插件

npm install hexo-generator-search --save

2.配置_config.yml

#本地搜索开启
search:path: search.xmlfield: postcontent: true

3.主题配置文件 _config.butterfly.yml：

# Local search
local_search:enable: truelabels:input_placeholder: Search for Postshits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

效果图：

顺带一提文章必须得有title，不然的话似乎本地搜索不会将其放进搜索范围？反正我有一篇没写标题就死活搜不到

2.笔者踩得坑，还是看一下吧，毕竟我下的是最新的hexo，后面的大概和我的一样

下面给你们看看笔者的，以及为什么笔者弄了一下午没弄好一个搜索功能，这个是

search:# Choose: algolia_search / local_search / docsearch# leave it empty if you don't need search#use:#placeholder:use: local_searchlocal_search:enable: truehits:per_page: 10labels:input_placeholder: Search for Postshits_empty: "我们没有找到任何搜索结果: ${query}"hits_stats: "找到${hits}条结果（用时${time} ms）"# Preload the search data when the page loads.preload: true# Show top n results per article, show all results by setting to -1trigger: manual  # 触发方式（auto/manual）top_n_per_article: -1# Unescape html strings to the readable one.unescape: trueCDN: # Algolia Searchalgolia_search:enable: falsehits:per_page: 10labels:input_placeholder: Search for Postshits_empty: "我们没有找到任何搜索结果: ${query}"hits_stats: "找到${hits}条结果（用时${time} ms）"# Docsearch# https://docsearch.algolia.com/docsearch:appId:apiKey:indexName:option:

没错，你用哪个方式，你得写出来，不写出来就相当于没有启用搜索功能，所以肯定没有搜索的图标

  use: local_search

3.Algolia Search

想用Algolia Search的可以去看这篇博客，就是新手教程麻烦点，剩下的配的挺快的

基于 Hexo 键入搜索功能 | 唐志远

9.版权、文章内容复制、文章链接

修改主题配置文件_config.butterfly.yml

1.复制的内容后面加上版权信息

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:enable: true # 是否开启网站复制权限copyright:  # 复制的内容后面加上版权信息enable: true  # 是否开启复制版权信息添加limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

2.文章版权信息

post_copyright:enable: truedecode: truelicense: CC BY-NC-SA 4.0license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

效果图：

如果有文章（例如：转载文章）不需要显示版权，可以在文章页 Front-matter 中单独设置。

（front-matter和上传博客有关，下个博客我来讲讲这个东西，当然要是我没学会的话就要鸽掉了）

copyright: false

从 v3.0.0 开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置。

post_copyright:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

3.生成文章唯一链接

Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文。

permalink: :year/:month/:day/:title

1. 前往你的Hexo博客根目录，打开cmd命令窗口执行

   npm install hexo-abbrlink --save
   

2. 修改站点配置文件_config.yml中permalink属性。

   permalink: :year/:month/:day/:title/
   #修改为
   permalink: post/:abbrlink.html # post为自定义前缀
   abbrlink:alg: crc32   #算法： crc16(default) and crc32rep: hex     #进制： dec(default) and hex
   

这个笔者没试，原来的感觉够用，就只是在URL这个部分把自己的网站贴上去了，其他的没管，我发现文章下面的连接可以跳转到自己的博客了，就好了感觉

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://darling-123456.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:trailing_index: true # Set to false to remove trailing 'index.html' from permalinkstrailing_html: true # Set to false to remove trailing '.html' from permalinks

就像这样变成我自己的网站，看着也舒服一点

10.toc

修改主题配置文件_config.butterfly.yml。

toc:post: truepage: truenumber: trueexpand: falsestyle_simple: false # for postscroll_percent: true

属性	解释
post	文章页是否显示 TOC
page	普通页面是否显示 TOC
number	是否显示章节数
expand	是否展开 TOC
style_simple	简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
scroll_percent	是否显示滚动进度百分比

为特定的文章配置

在你的文章md文件的头部，加入toc_number和toc，并配置true或者false即可。

主题会优先判断文章 Markdown 的Front-matter是否有配置，如有，则以Front-matter的配置为准。否则，以主题配置文件中的配置为准。

11.代码块设置

别人的

1. 在_config.butterfly.yml配置文件中可以配置如下功能。

highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条

同时将站点配置文件_config.yml的highlight设置为false。

highlight:enable: falseline_number: falseauto_detect: false

效果图：

别人的不对来看看笔者的

去_config.butterfly.yml找code_blocks:

code_blocks:# Code block theme: darker / pale night / light / ocean / falsetheme: ocean #主题macStyle: false# Code block height limit (unit: px)height_limit: falseword_wrap: true  #代码够了一行自动换行,关闭滚动条# Toolbarcopy: true #复制按钮language: true #显示代码语言# true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the buttonshrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮fullpage: false

12.相关文章

在文章最下面出现推送

# Related Articles
related_post:enable: truelimit: 6 # Number of posts displayeddate_type: created # or created or updated 文章日期顯示創建日或者更新日

13.打赏

给文章结尾设置打赏按钮，可以放上收款二维码

# Sponsor/reward
reward:enable: trueQR_code:- img: /img/wechat.jpglink:text: 微信- img: /img/alipay.jpglink:text: 支付宝
12345678910

这个不是笔者（嘻

14.文章页面

笔者只弄了meta，剩下的没弄，有的不知道啥意思，有的感觉没用，你们想弄的话可以试试

文章meta显示

post_meta:page:date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示date_format: relative # date/relative 显示日期还是相对日期categories: true # true or false 主页是否显示分类tags: true # true or false 主页是否显示标签label: true # true or false 显示描述性文字post:date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示date_format: relative # date/relative 显示日期还是相对日期categories: true # true or false 文章页是否显示分类tags: true # true or false 文章页是否显示标签label: true # true or false 显示描述性文字

文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题 ID 进行替换。

注意：每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。

修改主题配置文件_config.butterfly.yml。

yml
# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

markdown
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:enable: truestyle: flat # style: simple/flatlimit_day: 365 # When will it be shownposition: top # position: top/bottommessage_prev: It has beenmessage_next: days since the last update, the content of the article may be outdated.

limit_day： 距离更新时间多少天才显示文章过期提醒。
message_prev ： 天数之前的文字。
message_next：天数之后的文字。

文章分页按钮

修改主题配置文件_config.butterfly.yml。

yml
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

参数	解释
post_pagination: false	关闭分页按钮
post_pagination: 1	下一篇显示的是旧文章
post_pagination: 2	下一篇显示的是新文章

15.inject

v2.3.0 以上支持。

如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，head (</body> 标签之前)， bottom (</html> 标签之前)。

yml
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:head:- <link rel="stylesheet" href="/xxx.css">bottom:- <script src="xxxx"></script>

16.美化（二）结语

到此就基本告一段落了，网站已经基本成型了，该有的也都有了

后续看笔者精力再加入图片点击放大、评论区、在线聊天之类的功能吧

尽量这周把如何上传博客给大家更新出来（但是今天耽搁一天考研的东西还没学（悲 ）

这是笔者做完上述功能和美化后的，欢迎大家来访问

Darling的妙妙屋

博客也就是为了测试功能随便传了两篇，后续我去试试在本地hexo上传再加hexo d部署和用git直接传到github有啥区别，感觉应该是一样的，如果只是上传博客的话，我完了试试再说

（当然我测试传的那篇就是git使用，感兴趣的可以看看）