Butterfly安装文档(三)主题配置-1(二)

简介: Butterfly安装文档(三)主题配置-1(二)

社交图标 (Social Settings)

Butterfly支持 font-awesome v6 图标.

书写格式 图标名:url || 描述性文字 || color

social:
  fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#000000"

PC:

Mobile:

头像

avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

顶部图

如果不要显示顶部图,可直接配置 disable_top_img: true

顶部图的获取顺序,如果都没有配置,则不显示顶部图。

  1. 页面顶部图的获取顺序:
    各自配置的 top_img > 配置文件的 default_top_img
  2. 文章页顶部图的获取顺序:
    各自配置的 top_img > cover > 配置文件的 default_top_img

其它页面 (tags/categories/自建页面)和 文章页 的 top_img ,请到对应的 md 页面设置front-matter中的top_img

以上所有的 top_img 可配置以下值

3.2.0 以下版本的配置只支持

  • 留空,true 和 false - 显示默认的顔色
  • img链接 - 显示所配置的图片

tag_per_img 和 category_per_img 是 3.2.0 新增的内容,可对 tag 和 category 进行单独的配置

并不推荐为每个 tag 和每个 category 都配置不同的顶部图,因为配置太多会拖慢生成速度

tag_per_img:
  aplayer: https://xxxxxx.png
  android: ddddddd.png
category_per_img:
  随想: hdhdh.png
  推荐: ddjdjdjd.png

top_img: false

top_img: orange

top_img: ‘linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)’

文章封面

文章的 markdown 文档上,在 Front-matter 添加 cover ,并填上要显示的图片地址。

如果不配置 cover,可以设置显示默认的 cover。

如果不想在首页显示 cover, 可以设置为 false。

文章封面的获取顺序 Front-matter 的 cover > 配置文件的 default_cover > false

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时,默认的封面显示
  default_cover: 

当配置多张图片时,会随机选择一张作为cover.此时写法应为

default_cover:
  - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg3.png

left

right

both

页面 meta 显示

post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

主页

文章页


date_format 是 3.2.0 新增的内容,配置时间显示明确时间还是相对时间


相关文章
|
安全 前端开发 物联网
现代 API 的类型划分
【2月更文挑战第28天】
|
前端开发 容器 API
基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师 梁神 一、背景 粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器、脚本来控制其整体或单个的运动,模拟出现真实的效果。
3522 0
|
5月前
|
机器学习/深度学习 人工智能 数据可视化
基于YOLOv8的共享单车/自行车随意停放识别项目|完整源码数据集+PyQt5界面+完整训练流程+开箱即用!
本项目基于YOLOv8模型与PyQt5界面,实现共享单车/自行车乱停放的智能检测。支持图片、视频、文件夹及摄像头输入,提供实时检测与结果保存功能。配套完整源码、训练数据集与权重文件,开箱即用,适合城市管理、交通执法等场景。项目包含详细训练教程与部署指南,助力AI学习者快速上手,推动智慧城市应用开发。
基于YOLOv8的共享单车/自行车随意停放识别项目|完整源码数据集+PyQt5界面+完整训练流程+开箱即用!
|
4月前
|
存储 编解码 数据可视化
3D-Genome:认识接触矩阵(contact matrix)
3D-Genome:认识接触矩阵(contact matrix)
|
11月前
|
前端开发 JavaScript
React 标签组件 Tag
在现代Web开发中,标签(Tag)是常见的UI元素,用于分类、标记或表示状态。本文基于React框架,介绍如何创建和管理标签组件,涵盖基础使用、样式处理及常见问题与易错点。通过函数式组件定义标签,并使用CSS或CSS-in-JS进行样式处理。常见问题包括样式冲突、事件绑定错误和可关闭标签逻辑错误,提供解决方案如命名空间、CSS模块化和正确事件绑定方法。掌握这些内容有助于提高开发效率和代码质量。
306 27
ENVI Classic:如何进行图像融合(HSV变换/Brovey变换/PC变换)?
ENVI Classic:如何进行图像融合(HSV变换/Brovey变换/PC变换)?
3214 0
|
JavaScript 定位技术 异构计算
WebGis——从零开始vue使用cesium添加点线(四)
WebGis——从零开始vue使用cesium添加点线(四)
|
数据安全/隐私保护 Windows
Windows使用远程桌面连接树莓派
Windows使用远程桌面连接树莓派
1353 0
Windows使用远程桌面连接树莓派
|
机器学习/深度学习 算法 TensorFlow
使用Python实现基于深度学习的图像分类器
本文介绍了如何使用Python编写一个基于深度学习的图像分类器。我们将使用TensorFlow框架和Keras库来建立模型,并使用MNIST手写数字数据集进行训练和测试。通过本文,您将了解到如何设计和训练一个卷积神经网络(CNN),并将其应用于图像分类任务中。
|
监控 关系型数据库 数据库
rds跨账号迁移
rds跨账号迁移
501 2
下一篇
oss云网关配置