惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

MyScale Blog
MyScale Blog
A
About on SuperTechFans
G
Google Developers Blog
B
Blog RSS Feed
F
Fortinet All Blogs
WordPress大学
WordPress大学
Recent Announcements
Recent Announcements
Hugging Face - Blog
Hugging Face - Blog
Y
Y Combinator Blog
MongoDB | Blog
MongoDB | Blog
小众软件
小众软件
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
T
The Blog of Author Tim Ferriss
Jina AI
Jina AI
IT之家
IT之家
P
Proofpoint News Feed
美团技术团队
量子位
Microsoft Azure Blog
Microsoft Azure Blog
Engineering at Meta
Engineering at Meta
B
Blog
有赞技术团队
有赞技术团队
U
Unit 42

定の栈

AI 写得出功能,写不好 Dockerfile:Next.js 自托管踩坑记录 多个 AI 一起写代码时,我给它们划的边界 9 个 commit,没有一个人类作者:AI 独自写完一个项目之后 Next.js 渲染模式排查笔记:force-dynamic、hydration 与构建期没有数据库 让 Claude 少写错数据层:Prisma、Drizzle 和几条结构化做法 我的 CLAUDE.md 只有一行:约定文件到底该写多少 同一个月,把主页搬出 Next.js,又把 Hugo 站搬进来 macOS Tahoe 如何用自己的视频做动态壁纸(替换 Aerial 方法) Podman Compose 常用命令速查 创建 Swap 文件 Cursor 2025 Hugo 中文阅读时间计算模版 手动重加载不蒜子计数 入坑舞萌 DX 历时两月终抵 w0 与首鸟加 多邻国 600 天连胜 原神五周年纪念 Asuna 成年生日 告别绝区零 站长18周岁啦! 一位动漫迷的追番日志与热情之旅 起飞日志 Reflector 镜像列表更新常用命令与配置文件 个人自用 rsync 文件同步常用命令 历时千日原神,深渊终抵满星 Arch Linux 个人常用命令记录 《三体III:死神永生》 《三体II:黑暗森林》 《千恋*万花》与现代物理学概念奇妙碰撞后产生出的糟糕想法 Minecraft 15 周年骨折价补票入正 网页添加 Live2D 看板娘
基于 Butterfly 主题的轮播插件美化
Asuna · 2023-08-19 · via 定の栈

插件的安装教程请参照店长这篇文章:Swiper Bar

进行美化微调之前请确保你的博客使用的是Hexo框架Butterfly主题,如果其他框架或主题可能并不适用

添加样式代码

往你的自定义 CSS 文件中添加以下样式代码:

/* 文章置顶滚动栏(店长) */
.blog-slider {
  height: 260px !important;
}

.blog-slider__img {
  width: 40% !important;
  height: 100% !important;
}

@media screen and (max-width: 600px) {
  .blog-slider {
    padding: 0 !important;
  }

  .blog-slider__img {
    width: 100% !important;
    height: 40% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

以上代码作用是将电脑端的文章封面图片从原先正方形调整成长方形,移动端则变成覆盖满左右边框,显得更加顺眼,

可在以上已有元素中或自行 F12 打开使用 开发者工具 寻找对应元素的 ID 继续添加自己喜欢的样式代码

前后预览

电脑端

调整前

调整后

移动端

调整前

调整后

鸣谢

Akilarの糖果屋SwiperBar

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 定の栈

赞助

  • 微信

    微信

  • 支付宝

    支付宝


avatar

Asuna

LINK START!

前往主页