教程··0 次阅读·33 分钟·总字数 9,791
butterfly主题魔改
魔改前请备份，要不然出错了又不知道怎么改就完啦！！！
1. [博客魔改教程一](https://hexo.seln.cn/posts/e7f6bd97/)
2. [博客魔改教程二](https://hexo.seln.cn/posts/f38acf51/) ⇦当前位置🪂
### 标题霓虹灯效果
查看教程
1. 在custom.css中添加如下代码，默认左上角标题、中间标题和副标题，还有文章页头的标题有循环霓虹灯
```css
/* 夜间模式生效 */
[data-theme="dark"] #site-name,
[data-theme="dark"] #site-title {
animation: light_15px 10s linear infinite;
}
[data-theme="dark"] #site-subtitle {
animation: light_10px 10s linear infinite;
}
[data-theme="dark"] #post-info {
animation: light_5px 10s linear infinite;
}
/* 白天模式生效 */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title {
animation: light_15px 10s linear infinite;
}
[data-theme="light"] #site-subtitle {
animation: light_10px 10s linear infinite;
}
[data-theme="light"] #post-info {
animation: light_5px 10s linear infinite;
}
```
2. 刷新页面即可看到效果，如果你不想在白天模式开，那就更改白天模式的部分：
```css
/* 白天模式不生效 */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
animation: none;
}
```
### 页面鼠标魔改
查看教程
* 可以看到我的鼠标是蓝色小点，你们可以根据我的代码进行换色
1. 新建source\js\cursor.js，或者使用原来的js，，在里面写上如下代码：
```js
/* 鼠标*/
var CURSOR;
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
const getStyle = (el, attr) => {
try {
return window.getComputedStyle
? window.getComputedStyle(el)[attr]
: el.currentStyle[attr];
} catch (e) {}
return "";
};
class Cursor {
constructor() {
this.pos = {curr: null, prev: null};
this.pt = [];
this.create();
this.init();
this.render();
}
move(left, top) {
this.cursor.style["left"] = `${left}px`;
this.cursor.style["top"] = `${top}px`;
}
create() {
if (!this.cursor) {
this.cursor = document.createElement("div");
this.cursor.id = "cursor";
this.cursor.classList.add("hidden");
document.body.append(this.cursor);
}
var el = document.getElementsByTagName('*');
for (let i = 0; i < el.length; i++)
if (getStyle(el[i], "cursor") == "pointer")
this.pt.push(el[i].outerHTML);
document.body.appendChild((this.scr = document.createElement("style")));
// 这里改变鼠标指针的颜色 由svg生成
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,") 4 4, auto}`;
}
refresh() {
this.scr.remove();
this.cursor.classList.remove("hover");
this.cursor.classList.remove("active");
this.pos = {curr: null, prev: null};
this.pt = [];
this.create();
this.init();
this.render();
}
init() {
document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
document.onmousemove = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
document.onmouseenter = e => this.cursor.classList.remove("hidden");
document.onmouseleave = e => this.cursor.classList.add("hidden");
document.onmousedown = e => this.cursor.classList.add("active");
document.onmouseup = e => this.cursor.classList.remove("active");
}
render() {
if (this.pos.prev) {
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
this.move(this.pos.prev.x, this.pos.prev.y);
} else {
this.pos.prev = this.pos.curr;
}
requestAnimationFrame(() => this.render());
}
}
(() => {
CURSOR = new Cursor();
// 需要重新获取列表时，使用 CURSOR.refresh()
})();
// 如果当前页有评论就执行函数，评论表情放大
if (document.getElementById('post-comment')) owoBig();
// 表情放大
function owoBig() {
let flag = 1, // 设置节流阀
owo_time = '', // 设置计时器
m = 3; // 设置放大倍数
// 创建盒子
let div = document.createElement('div'),
body = document.querySelector('body');
// 设置ID
div.id = 'owo-big';
// 插入盒子
body.appendChild(div)
// 构造observer
let observer = new MutationObserver(mutations => {
for (let i = 0; i < mutations.length; i++) {
let dom = mutations[i].addedNodes,
owo_body = '';
if (dom.length == 2 && dom[1].className == 'OwO-body') owo_body = dom[1];
// 如果需要在评论内容中启用此功能请解除下面的注释
// else if (dom.length == 1 && dom[0].className == 'tk-comment') owo_body = dom[0];
else continue;
// 禁用右键（手机端长按会出现右键菜单，为了体验给禁用掉）
if (document.body.clientWidth <= 768) owo_body.addEventListener('contextmenu', e => e.preventDefault());
// 鼠标移入
owo_body.onmouseover = (e) => {
if (flag && e.target.tagName == 'IMG') {
flag = 0;
// 移入300毫秒后显示盒子
owo_time = setTimeout(() => {
let height = e.target.clientHeight * m, // 盒子高 2023-02-16更新
width = e.target.clientWidth * m, // 盒子宽 2023-02-16更新
left = (e.x - e.offsetX) - (width - e.target.clientWidth) / 2, // 盒子与屏幕左边距离 2023-02-16更新
top = e.y - e.offsetY; // 盒子与屏幕顶部距离
if ((left + width) > body.clientWidth) left -= ((left + width) - body.clientWidth + 10); // 右边缘检测，防止超出屏幕
if (left < 0) left = 10; // 左边缘检测，防止超出屏幕
// 设置盒子样式
div.style.cssText = `display:flex; height:${height}px; width:${width}px; left:${left}px; top:${top}px;`;
// 在盒子中插入图片
div.innerHTML = `
`
}, 300);
}
};
// 鼠标移出隐藏盒子
owo_body.onmouseout = () => { div.style.display = 'none', flag = 1, clearTimeout(owo_time); }
}
})
observer.observe(document.getElementById('post-comment'), { subtree: true, childList: true }) // 监听的 元素 和 配置项
}
```
2. 在source\css\custom.css添加如下代码：
```css
/* 鼠标样式 */
#cursor {
position: fixed;
width: 16px;
height: 16px;
/* 这里改变跟随的底色 */
background: rgb(58, 204, 194);
border-radius: 8px;
opacity: 0.25;
z-index: 10086;
pointer-events: none;
transition: 0.2s ease-in-out;
transition-property: background, opacity, transform;
}
#cursor.hidden {
opacity: 0;
}
#cursor.hover {
opacity: 0.1;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}
#cursor.active {
opacity: 0.5;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
}
```
### 页面调节
查看教程
这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式，如本站所示
1. 复制以下代码进去自定义的文件，
```css
/* 亚克力模糊 */
:root {
--trans-light: rgba(255, 255, 255, 0.88);
--trans-dark: rgba(25, 25, 25, 0.88);
--border-style: 1px solid rgb(169, 169, 169);
--backdrop-filter: blur(5px) saturate(150%);
}
/* 首页文章卡片 */
#recent-posts > .recent-post-item {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border-radius: 25px;
border: var(--border-style);
}
/* 首页侧栏卡片 */
#aside-content .card-widget {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border-radius: 18px;
border: var(--border-style);
}
/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border: var(--border-style);
border-radius: 20px;
}
/* 导航栏 */
#page-header.nav-fixed #nav {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: var(--backdrop-filter);
}
[data-theme="dark"] #page-header.nav-fixed #nav {
background: rgba(0, 0, 0, 0.7) !important;
}
/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
background: var(--trans-dark);
}
/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
background: transparent !important;
}
[data-theme="dark"] #page-header::before {
background: transparent !important;
}
/* 阅读模式 */
.read-mode #aside-content .card-widget {
background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
background: rgba(158, 204, 171, 0.5) !important;
}
/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}
```
2. 参数说明：
* --trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；
* --trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;
* --border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;
* --backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;
* 可以自行调节，我调的几乎透明了，不要学我
3. 如果你已经引入了css那就不用管，没有引入的记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件：
```yml
inject:
head:
-
```
4. 重启看看效果
```bash
hexo cl;hexo s
```
### 首页文章显示设置
查看教程
blue
### 导航栏居中
查看教程
blue
### 引入阿里iconfont自定义图标
查看教程
blue
```yml
inject:
head:
-
bottom:
-
```
2. 可以在自定义`CSS`中添加如下样式来控制图标默认大小和颜色等属性（**若已经在项目设置中勾选了彩色选项，则无需再定义图标颜色**）
```css
.iconfont {
font-family: "iconfont" !important;
/* 这里可以自定义图标大小 */
font-size: 3em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
三. 菜单栏多色动态图标
**请确保您已经完成了前置教程，并实现了在文章中使用`symbol`写法来引入`iconfont`图标**
1. 替换`themes\butterfly\layout\includes\header\menu_item.pug`为以下代码，本方案默认使用观感最佳的悬停父元素触发子元素动画效果，默认动画为`faa-tada`。注意：可以把之前的代码注释掉，再在后面加上如下代码，以便于回滚
```pug
if theme.menu
.menus_items
each value, label in theme.menu
if typeof value !== 'object'
.menus_item
- const valueArray = value.split('||')
a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
if valueArray[1]
i.fa-fw(class=trim(valueArray[1]))
- var icon_value = trim(value.split('||')[1])
- var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
if icon_value.substring(0,2)=="fa"
i.fa-fw(class=icon_value + ' ' + anima_value)
else if icon_value.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_value)
use(xlink:href=`#`+ icon_value)
span=' '+label
else
.menus_item
- const labelArray = label.split('||')
- const hideClass = labelArray[3] && trim(labelArray[3]) === 'hide' ? 'hide' : ''
a.site-page.group.faa-parent.animated-hover(class=`${hideClass}` href='javascript:void(0);')
if labelArray[1]
- var icon_label = trim(label.split('||')[1])
- var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
if icon_label.substring(0,2)=="fa"
i.fa-fw(class=icon_label + ' ' + anima_label)
else if icon_label.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_label)
use(xlink:href=`#`+ icon_label)
span=' '+ trim(labelArray[0])
i.fas.fa-chevron-down
ul.menus_item_child
each val,lab in value
- const valArray = val.split('||')
li
a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0])))
if valArray[1]
- var icon_val = trim(val.split('||')[1])
- var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
if icon_val.substring(0,2)=="fa"
i.fa-fw(class=icon_val + ' ' + anima_val)
else if icon_val.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_val)
use(xlink:href=`#`+ icon_val)
span=' '+ lab
```
2. 以下是填写示例，在`_config.butterfly.yml`中修改。`icon-xxx`字样的为`iconfont`的`symbol`引入方案的`id`值，可以在你的`iconfont`图标库内查询，其中hide属性也是可以用的。
```yml
menu:
首页: / || icon-home || faa-tada
文章 || icon--article || faa-tada || hide:
归档: /archives/ || icon-guidang1 || faa-tada
标签: /tags/ || icon-sekuaibiaoqian || faa-tada
分类: /categories/ || icon-fenlei || faa-tada
```
3. 这里的动态图标是`svg.icon`的标签，因此上面调节`.iconfont`的css并不适用，需要在`custom.css`里加上一些样式来限制图标的大小和颜色等，具体大小自行调节。
```css
svg.icon {
width: 1.28em;
height: 1.28em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
```
修改完在手机上是默认展开二级栏的，可以在后面➕hide:收起，例：
```yml
文章|| icon-book || faa-tada || hide:
归档: /archives/ || icon-archive || faa-tada
标签: /tags/ || icon-tag || faa-tada
分类: /categories/ || icon-fenlei || faa-tada
```
4. 重启项目即可看到效果：
```bash
hexo cl;hexo g;hexo s
```
### 顶部加载条
查看教程
blue
### 博客添加弹窗公告
查看教程
blue
\n \n \n \n \n
\n \n \n
Title
\n
Text
\n
"),o.innerHTML=a.html?a.text:d.escapeHtml(a.text||"").split("\n").join("
"),a.text&&d.show(o),a.customClass?(d.addClass(r,a.customClass),r.setAttribute("data-custom-class",a.customClass)):(n=r.getAttribute("data-custom-class"),d.removeClass(r,n),r.setAttribute("data-custom-class","")),d.hide(r.querySelectorAll(".sa-icon")),a.type&&!u.isIE8()){var o=function(){for(var e=!1,t=0;t{
welcome()
})
```
倒计时3秒关闭版本：
```js
// 公告
function welcome(){
let welcome_text = '欢迎光顾mccsjs的小窝~'
if(document.referrer!==''){
let referrer=document.referrer.split("/")[2];
welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名
}
swal({
title: " 欢迎！",
text: welcome_text+'\n欢迎',//欢迎文本，可自行修改
imageUrl: "/img/head.jpg",//图片，自行修改位置
timer: 3000,//弹出时间，延长到5秒以便用户阅读
});
}
$(document).ready(()=>{//若未引用JQuery，请引用
welcome()
})
```
融合版本
```js
// 公告
function welcome(){
let welcome_text = '欢迎光顾mccsjs的小窝~'
if(document.referrer!==''){
let referrer=document.referrer.split("/")[2];
welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名
}
swal({
title: " 欢迎！",
text: welcome_text+'\n近期将更换域名至hexo.seln.cn',//欢迎文本，可自行修改
imageUrl: "/img/head.jpg",//图片，自行修改位置
timer: 5000,//弹出时间，延长到5秒以便用户阅读
showConfirmButton: true, // 显示确认按钮
confirmButtonText: "OK", // 按钮文字设为OK
closeOnConfirm: true // 点击OK后关闭
});
}
$(document).ready(()=>{//若未引用JQuery，请引用
welcome()
})
```
4. 适配自定义字体
我的公告只使用少部分时间，我自己没加
在`custon.css`中添加以下代码
```css
.custom-swal-popup {
font-family: "你的自定义字体", sans-serif;
}
.custom-swal-title {
font-family: "你的自定义字体", sans-serif;
font-size: 1.5em;
}
.custom-swal-content {
font-family: "你的自定义字体", sans-serif;
font-size: 1.1em;
line-height: 1.4;
}
.custom-swal-confirm {
font-family: "你的自定义字体", sans-serif;
font-size: 1em;
}
```
5. 结尾
注意，三者只能存其一
接下来三连试试效果
```bash
hexo c;hexo g;hexo s
```
