博客魔改教程总结(1)-瀚星阁

博客宽屏适配

在[BlogRoot]\source\css\custom.css中引入如下css代码，然后在主题配置文件_config.butterfly.yml中引入该文件：
此代码在博客魔改教程总结(一)

CODE

/* 全局宽度 */
.layout {
max-width: 1400px;
}

/* 侧边卡片栏宽度 */
.aside-content {
max-width: 318px;
min-width: 300px;
}

/* 平板尺寸自适应(不启用侧边栏宽度限制) */
@media screen and (max-width: 900px) {
.aside-content {
max-width: none !important;
padding: 0 5px 0 5px;
}
}

这个是以轻笑大佬的宽屏适配代码,在这个基础上进行修改

CODE

.layout.hide-aside{
max-width: 1400px;
}

三连即可

魔改加载条

为你的Butterfly添加顶部加载进度条
在主题配置文件_config.butterfly.yml中引入此配置

CODE

preloader:
enable: true
# source
# 1. fullpage-loading
# 2. pace (progress bar)
source: 2
# pace theme (see https://codebyzach.github.io/pace/)
pace_css_url: https://fastly.jsdelivr.net/gh/xlenco/JS-X@main/pace.js/pace.css

三连即可

首页轮播图

新版首页轮播图
安装此插件代码

CODE

npm install hexo-butterfly-swiper-marcus –save

以下为写法示例在站点配置文件_config.yml或者主题配置文件下引入此配置(以下为写法示例):

CODE

swiper:
enable: true # 开关
randomenable: true # 创造力开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: home_top
index: 1
category:
– name: 前端
path: /categories/前端/
shadow: var(–marcus-shadow-blue)
class: blue
icon: fas fa-dove
– name: 中学
path: /categories/中学/
shadow: var(–marcus-shadow-red)
class: red
icon: fas fa-burn
– name: 生活
path: /categories/生活/
shadow: var(–marcus-shadow-green)
class: green
icon: fas fa-book
above_title: 人间值得
below_title: 未来可期
subtitle: BLOG.MARCUS233.TOP
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiper.min.css #swiper css依赖
swiper_js: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiper.min.js #swiper js依赖 #swiper js依赖
custom_css: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiperstyle.min.css # 适配主题样式补丁
custom_js: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiper_init.min.js # swiper初始化方法
categorygroup_css: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/categoryGroup.min.css

首页显示文章的方法,在文章里面cv一下,记得得按照以下代码填入

CODE

—
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，需填非负整数，数字越大越靠前
top_group_index: 1 #右侧磁帖顺序，需填非负整数，数字越大越靠前
—

在[Blogroot]\themes\butterfly\layout\includes\layout.pug中写入(不同版本有不同的写法),if要与main对齐

CODE

if page.type !== ‘404’
#body-wrap(class=pageType)
include ./header/index.pug

+ if is_home()
+ #home_top
main#content-inner.layout(class=hideAside)
if body
div!= body
else
block content

创造力无法正常显示可以去这篇文章新版首页轮播图
三连即可

导航栏魔改

导航栏魔改
在[BlogRoot]\source\css\custom.css中引入如下css代码

CODE

/* 一级菜单居中 */
#nav .menus_items {
position: absolute !important;
width: fit-content !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
/* 子菜单横向展示 */
#nav .menus_items .menus_item:hover .menus_item_child {
display: flex !important;
}
/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
left: -125px;
}

三连即可

首页分类磁贴新版(店长)

安装插件,在博客根目录[BlogRoot]下打开终端，运行以下指令：

CODE

npm install hexo-butterfly-categories-card –save

在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加以下代码，注意要根据他的默认描述排序改为你自己对应的分类名字(以下为写法示例)：

CODE

categoryBar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
layout: # 挂载容器类型
type: id
name: recent-posts
index: 2
column: odd # odd：3列 | even：4列
row: 1 #显示行数，默认两行，超过行数切换为滚动显示
message:
– descr: bbtalk部署
cover: https://images.boysec.cn/cover1.webp
– descr: artitalk部署
cover: https://images.boysec.cn/cover2.webp
– descr: 博客魔改
cover: https://www.anxkj.top//Cover/cover01.jpg
custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

三连即可

关于界面魔改的一部分修改

在[BlogRoot]themes/butterfly/source/css/_custom/about/about.css中在的第786-791行的位置中,把var的设置改成自己的var,也可以删除掉。这个代码导致了所有页面在移动端都变透明了。

  .layout > div:first-child:not(.recent-posts) {
    /* border-radius: 0; */
    padding: 0 1rem !important;
    box-shadow: none !important;
    background: var(--anzhiyu-background);
  }

三连即可

文章版权归作者所有，未经允许请勿转载。

WWW.ANXKJ.TOP