刚开始建设博客，很多功能都不明白，记录一下常用的代码。（没有特殊说明均为主题配置文件下修改）

日后：好乱啊，找个时间整理一下

美化相关

修改网站背景：background: url(/mysource/mainbg.png))

【mysource是在themes\butterfly\source下建立的文件夹用来存储个人资源，直接放在source下更新butterfly时可能被覆盖】

（若使用网络链接，需要用 url(网址) 格式）

修改顶部图占比：index_top_img_height

修改主页顶部图：index_img

（若使用网络连接，直接添加网址即可）

菜单子页面透明：archive_img: rgba(255,255,255,0.2)

（也可以改成其他图片，直接写链接即可；）

其中tags页和category页需要在各自md文件中修改

打字效果（色彩，抖动）activate_power_mode

鼠标点击效果：Mouse click effects

背景动效：canvas_nest

字体：Custom Beautify | Akilar の糖果屋

这里面还有很多魔改美化内容

卡片背景透明化：Hexo之更换背景及透明度 - MoYu-zc - 博客园 (cnblogs.com)

订正

文章里css引用可以直接在主题配置文件里面进行，不需要另外新建一个butterfly.yml

意思就是直接把

1	<link rel="stylesheet" href="/css/mycss.css">

插到主题配置文件的inject里

版权板块美化：butterfly版权美化教程 | 小N博客 (nesxc.com)

使用新字体：

1	<font face="新字体文件名（无需后缀）"></font> //直接在markdown中使用

功能相关

添加顶部轮播图：Swiper Bar | Akilarの糖果屋

在博文配置项添加 swiper_index: 1

评论区：gitalk（多种方式可选）

注意：gitalk配置到butterfly中，repo填仓库名.github.io

主题分类磁贴：参考Butterfly主题美化日记 | Akilarの糖果屋

vercel提供加速：Dashboard – Vercel

（一开始遇到了vercel不能和github同步的问题，此时应该到vercel项目中setting-git-Production Branch中检查默认分支是否为master（或自己设置的默认主分支））

说说配置：建议参考(82条消息) hexo（butterfly）添加说说页面（Artitalk可在线发布）_cungudafa的博客-CSDN博客

真的太折磨了，按照官方文档来做不知道为什么修改不了页面显示（会直接单独建立一个html），感觉默认的很丑。。。。于是按照上文大佬的教程直接在md文件里配置说说了。。。。

时钟：Butterfly主题美化日记 | Akilarの糖果屋

出奇的，没出现任何问题就搞好了。。。。

图床：图床配置 | PicX 图床神器 (xpoet.cn)网页里有教程，实际就是用github

首页导航页面：NianBroken/Personal_Sakura_Guide_Page: 一款好看的樱花个人引导页，基于Dimension的二次修改。普通虚拟主机即可搭建，无需其他环境。把源码上传到服务器，修改index.html里面的代码，访问域名就可以使用。纯Html-Css-JavaScript (github.com)

桌宠（大概是功能？）：见下一篇博客

各界面的透明度设置：配置路径：Blog\themes\butterfly\source\css\mycss.css

参考教程：Butterfly 透明背景设置 | LY’s Blog (gitee.io)

文章密码：在文章md头文件添加：

password: 密码
theme: xray       //可选主题：default/blink/shrink/flip/up/surge/wave/xray
description: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

音乐播放器（单曲）：

1	{% meting "3986040" "netease" "song" "theme:#e6d0b2" "mutex:true" "listmaxheight:340px" "preload:auto" %}

音乐播放器（歌单）：

1	{% meting "7642168633" "tencent" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#b4a7d6"%}

底部栏透明化

初始底部栏是蓝色的，更改网页背景后显得很突兀，难受我很久了却不知道怎么改。。。。

解决方法：博客根目录\themes\butterfly\source\css_layout\footer.stly 将 background: $light-blue注释掉即可透明化，也可以改成其他颜色