butterfly美化教程

基本信息修改

首先，修改博客的资料需要在根目录下的_config.yml进行修改

导航栏设置

在_config.butterfly.yml中修改网站的logo，是否显示标题，是否固定：

1
2
3
4
nav:
  logo: #image,可以写图片路径也可以直接写入图片连接
  display_title: true
  fixed: false # fixed navigation bar

随机文章

这个我参考的(随机访问一篇文章的实现 | Leonus)用的非魔改方案(主要还是导航栏按钮在哪添加的问题)，主要是通过自定义js来实现。首先需要安装baidusitemap插件：

1
npm install hexo-generator-baidu-sitemap --save

在自定义js里面添加：

1
2
3
4
5
6
7
8
9
10
11
12
// 发现有时会和当前页面重复，加一个判断
function randomPost() {
    fetch('/baidusitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {
        let ls = data.querySelectorAll('url loc');
        while (true) {
            let url = ls[Math.floor(Math.random() * ls.length)].innerHTML;
            if (location.href == url) continue;
            location.href = url;
            return;
        }
    })
}

添加导航栏的按钮：

在_config.butterfly.yml的menu中添加：

1
" ": javascript:randomPost() || fa-solid fa-shuffle

“”可以改成文字啥的，我留空只显示图标，我感觉这样干净点。

导航栏居中

感觉(buterfly博客导航栏居中 | Leonus)挺好的，简单，准确没毛病。主要用到的是自定义css就能把导航栏居中啦。

思路：我们只需要让他绝对定位，然后让他距离左边50%，然后再往左移动自身的50%即可实现。

代码实现：

1
2
3
4
5
6
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

这是导航栏母菜单居中。接下来是子菜单的居中：

1.变横向：

1
2
3
#nav .menus_items .menus_item:hover .menus_item_child{
  display: flex;
}

2.居中：

1
2
3
4
5
6
7
8
9
10
/* 这里的2是代表导航栏的第二个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
    left: -65px;
}
.menus_items .menus_item:nth-child(3) .menus_item_child {
    left: -40px;
}
.menus_items .menus_item:nth-child(4) .menus_item_child {
    left: -90px;
}

如果有某个子菜单没有居中，就按照以下方法调整：

浏览器打开你的博客按F12

选择自己不居中的子菜单的母菜单

点击右边的:hov:

然后再左边选择ul标签，并在右边的css找到：

修改数值，直到合适就行啦。这种方法的坏处是，如果菜单栏新增一些东西时需要重新调整，但是菜单栏一般改好之后就不会再动啦。