基于Hexo和Butterfly创建个人技术博客，(9) 优化butterfly主题配置文章版本

news2024/10/7 10:14:02

Butterfly官方网站，请 点击进入

本章目标：
掌握butterfly主题对文章的配置，熟悉并可按需配置到个人的博客站点中，本章内容是一个必会章节，不仅包括文章的UI美化、SEO相关配置还包括其它增加的功能，内容不多但很重要，庆幸的是这些配置只需配置一次即可；

一、文章版面设计

先来了解下文章的版面有哪些内容。

1、列表页

主要包括cover图、标题、摘要、meta信息，以及右侧目录结构显示，如下图所示：
在这里插入图片描述

2、详情页

文章详情页，主要包含三部分：头、内容、脚三部分，详细如下图所示：

头部区

包含标题、meta信息、top图三块内容
在这里插入图片描述

内容区

主要包括过期提醒、编辑按钮以及文章目录。如下图是在侧边栏显示文章目录的例子。

在这里插入图片描述

脚部区

这块的内容比较多，主要包括：版本、分享、打赏、分页、相关推荐。详细可参考下图红框内的说明：
在这里插入图片描述

接下来就挨个实现上述版本面的设计

二、列表页

cover封面图设计

也可以称为文章的缩略图片，主要在一些列表地方显示，显示顺序是:文章的cover属性>配置文件的 default_cover，如果不需要显示设置cover=false。当配置多张图片时会随机选择一张作为cover。

cover:
  index_enable: true  # 主页是否显示文章封面图
  aside_enable: true # 侧栏是否显示文章封面图
  archives_enable: true # 归档页面是否显示文章封面图
  position: both # 封面顯示的位置，三個值可配置 left , right , both(一左一右)
  default_cover:
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-2.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-1.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-3.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-6.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-5.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-4.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-7.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-9.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-8.png
    - https://file.crazywong.com/gh/jerryc127/CDN/img/material-10.png

有时这里的default_cover不太好用，可以在文章中配置coverl图，如下：

---
title: Hello World
abbrlink: 4a17b156
cover: https://file.crazywong.com/gh/jerryc127/CDN/img/Butterfly-docs-02-cover.png
---

meta信息

把文章的一些meta信息显示在网页上，这个信息会同时显示在列表页，也会显示在详情页上。

post_meta: # 页面meta显示
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: relative # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: created # 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 顯示描述性文字

摘要信息

是否需要在列表或主页等缩略图的地方显示文章的概述信息，值取自description的值或是自动取文章前多少个字；

index_post_content: # 主页显示文章节选，1：显示描述；2、自动；3、截取一部分正文
  method: 2
  length: 500

method的可选值有4个，但建设配置为2，然后每个文章好好写写描述值，因为这与seo有关。

  1. description： 只顯示description
  2. both： 優先選擇description，如果沒有配置description，則顯示自動節選的內容
  3. **auto_excerpt：**只顯示自動節選
  4. false： 不顯示文章內容

三、详情页

1、头部区

top顶图

此处配置的是默认的top图，还可以通过文章的cover和top_img参数进行修改，如果全站不需要显示top图，可直接配置 disable_top_img: true，文章页頂部图的获取順序：各自配置的 top_img > cover > 配置文件的 default_top_img 。

# 页面顶图配置
# category_per_img和tag_per_img，可配置多张，每次会随机取一张
# format:
#  - category name: xxxxx
disable_top_img: false

default_top_img: https://file.crazywong.com/gh/jerryc127/butterfly_cdn@2.1.0/top_img/index.jpg
archive_img: https://file.crazywong.com/gh/jerryc127/butterfly_cdn@2.1.0/top_img/archive.jpg
tag_img: https://file.crazywong.com/gh/jerryc127/butterfly_cdn@2.1.0/top_img/tag.png
tag_per_img:
category_img: https://file.crazywong.com/gh/jerryc127/butterfly_cdn@2.1.0/top_img/category.jpg
category_per_img:

以上配置中的参数值除配置图片外还可以配置以下几个选项：

1、不配置，则不显示；top_img: 
2、url图片；top_img: /img/top_bg.png
3、颜色：top_img: orange
4、渐变色：top_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'
配置解釋
index_img主頁的 top_img
default_top_img默認的 top_img，當頁面的 top_img 沒有配置時，會顯示 default_top_img
archive_img歸檔頁面的 top_img
tag_imgtag 子頁面 的 默認 top_img
tag_per_imgtag 子頁面的 top_img，可配置每個 tag 的 top_img
category_imgcategory 子頁面 的 默認 top_img
category_per_imgcategory 子頁面的 top_img，可配置每個 category 的 top_img

2、内容区

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。会在文章最上面提示一个弹出框说明过期信息

noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # 距离更新时间多少天才显示文章过期提醒
  position: top # position: top/bottom
  message_prev: It has been  # 天数之前的文字
  message_next: days since the last update, the content of the article may be outdated.  #天数之后的文字

文章是否可编辑

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章目录显示toc设置

这是一个全局配置。设置文章的目录显示。这个值可在文章的Front-matter进行覆盖。

toc: # 文章目录显示位置
  post: true #文章页是否显示 TOC
  page: false #普通页面是否显示 TOC
  number: true #是否显示章节数
  expand: false #是否展开 TOC
  style_simple: false # 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
  scroll_percent: true #是否显示滚动进度百分比

3、脚部区

版本信息

# 文章底部
copy: # 复制配置，开启后复制内容后会加入版权信息
  enable: true
  copyright:
    enable: true
    limit_count: 50 #复制行数多于50行时会默认添加版本信息

post_copyright: # 版权配置
  enable: true
  decode: false  #true来显示中文网址
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

打赏配置

这里可配置多个打赏二维码图片

reward: # 文章底部的打赏功能
  enable: false
  QR_code:
  #    - img: https://wechat.jpg
  #      link:
  #      text: 微信

下一篇上一篇导航(分页)

# 推送文章分页，1表示左侧推送上一篇，2表示左侧推送上一篇
post_pagination: 1

文章分享

这是一个全局的配置，在你每篇文章的结尾，可以添加打赏按钮。以下配置二选一

sharejs: # Share System (分享)
  enable: true
  sites: facebook,twitter,wechat,weibo,qq

addtoany: # Share System (分享)
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

推荐文章

当文章封面设置为 false 时，或者没有获取到封面配置，相关文章背景将会显示主题色。相关文章推荐的原理是根据文章tags的比重来推荐。

related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

四、其它设置

1、页面锚点

开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换(注意: 每替换一次，会留下一个历史记录。所以如果一篇文章有很多锚点的话，网页的历史记录会很多。

anchor: # 开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换
  button:
    enable: false
    always_show: false
    icon:
  auto_update: false

2、代码样式

highlight_theme: light # 代码高亮：darker、light、ocean、mac、pale night、mac light
highlight_copy: true # 代码支持复制
highlight_shrink: false #代码框是否默认展开，true表示不展开，需点击 '>' 打开，可选值还有none，不显示 '>'
highlight_lang: true #是否显示语言
code_word_wrap: false # 代码自动换行，不会出现滚动条，但如果上传代码的人代码不规范格式可能会乱；同时也要改动_config.yml中相应高亮显示代码配置的 line_number 设置成false
highlight_height_limit: false # unit: px，代码高度配置，超出部分会隐藏

3、图片标题

如果开启图片Figcaption描述文字显示功能，则优先显示图片的 title 属性，然后是 alt 属性

photofigcaption: true

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/652045.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

英语不好能不能学编程？

英语不好能不能学编程？

入门教程、案例源码、学习资料、读者群 请访问： python666.cn 大家好，欢迎来到 Crossin的编程教室 ！ 常有人问我：我英语不好，想学编程行不行？ 这个问题需要分情况讨论。 1. 可以学 如果你因为担心自己英语不…
阅读更多...
chatgpt赋能python：Python怎么用？Python编程的入门指南

chatgpt赋能python：Python怎么用？Python编程的入门指南

Python怎么用？Python编程的入门指南 Python是一种流行的高级编程语言，它被广泛应用于数据分析、机器学习、Web开发、自动化测试等领域。Python语言非常容易学习和使用，因此非常适合初学者和有经验的开发人员。在这篇文章中，我们将…
阅读更多...
手把手教你在CentOS7.9上使用docker 安装MySQL5.7

手把手教你在CentOS7.9上使用docker 安装MySQL5.7

前言 大家好，又见面了，我是沐风晓月，本文主要讲解如何用docker在centos7.9系统上安装MySQL5.7，以及如何设置MySQL的远程登录。 文章收录到【容器管理】和【数据库入门到精通专栏】，此专栏是沐风晓月对linux云计算架构…
阅读更多...
chatgpt赋能python：Python怎么清除动点轨迹？

chatgpt赋能python：Python怎么清除动点轨迹？

Python怎么清除动点轨迹？ 引言 在数据科学和可视化的领域中，动点轨迹是很有用的工具。动点轨迹可以轻松地显示数据点的时间序列，这可以帮助分析者发现有关数据集的有用信息。然而，当轨迹过于密集和复杂时，这种可视化…
阅读更多...
Spring Cloud Alibaba - Sentinel源码分析(一)

Spring Cloud Alibaba - Sentinel源码分析(一)

目录 一、Sentinel核心源码分析 1、Sentinel核心概念 1.1、Node之间的关系 2、Sentinel源码入口 2.0、Sentinel源码启动 2.1、SlotChain解析 2.2、NodeSelectorSlot解析 2.3、ClusterBuilderSlot解析 2.4、StatisticSlot解析 2.5、FlowSlot解析 2.6、DegradeSlot解析…
阅读更多...
白鲸优化算法优化VMD参数，最小包络熵为适应度函数，提取最小包络熵对应的IMF分量，采集最佳IMF分量的9种时域指标，提取特征向量。以西储大学数据为例，附MATLAB代码

白鲸优化算法优化VMD参数，最小包络熵为适应度函数，提取最小包络熵对应的IMF分量，采集最佳IMF分量的9种时域指标，提取特征向量。以西储大学数据为例，附MATLAB代码

大家看到这篇文章，肯定会有疑问，难道本篇文章和上一篇文章不是一个意思嘛，这是来凑数的嘛……其实不然，如果各位读者仔细看，就会发现本篇文章和上一篇文章大有不同，这篇文章也是我一直以来想在上一篇文章基…
阅读更多...
chatgpt赋能python：Python断言：如何断言等于两个值其中一个？

chatgpt赋能python：Python断言：如何断言等于两个值其中一个？

Python断言：如何断言等于两个值其中一个？ Python是一种广泛使用的编程语言，而断言是它的一个重要功能。在编程中，我们可以使用断言来验证代码是否按照预期工作。但是，在某些情况下，我们可能想要断言两个值…
阅读更多...
快速上手kettle（四）壶中可以倒出些啥？

快速上手kettle（四）壶中可以倒出些啥？

快速上手kettle（四）壶中可以倒出些啥 前言一 、kettle 这壶里能倒出啥？二 、Access输出2.1 Access输出设置2.2 启动转换，查看输出 三 、Excel输出3.1 选择excel扩展名3.2 1 将表中数据分别写入到excel中 四、JSON output4.1 JSON …
阅读更多...
常见骨干网络介绍

常见骨干网络介绍

骨干网络 骨干网络（backbone network）顾名思义，是深度学习中最核心的网络组成。本文按时间顺序，简要介绍几种影响重大的backbone设计思路，我们或许可以从窥探前人的设计思路中获得启发和灵感。 1.1 AlexNet, 2012 这…
阅读更多...
10倍|中科院再传好消息：比英伟达还快，“新技术”实现弯道超车

10倍|中科院再传好消息：比英伟达还快，“新技术”实现弯道超车

中科院再传好消息：在光芯片上有了重大突破，李明-祝宁华团队研制出了一款超高集成度光学卷积处理器。 这种方案具有高算力密度、超高的线性扩展性！ 基于这种技术的，光芯片的性能将再次提升，光芯片是用于AI,如果能变成现…
阅读更多...
每日算法（第二十四期）

每日算法（第二十四期）

先来回顾一下上期的问题及答案： 2023年6月15日 「电话号码的字母组合」（Letter Combinations of a Phone Number）。以下是题目的描述： 给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的…
阅读更多...
记录--前端如何优雅导出多表头xlsx

记录--前端如何优雅导出多表头xlsx

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 xlsx导出是比较前后端开发过程中都比较常见的一个功能。但传统的二维表格可能很难能满足我们对业务的需求，因为当数据的维度和层次比较多时,二维表格很难以清晰和压缩的方式展现所有的…
阅读更多...
macOS Ventura 13.5beta3（22G5048d）发布

macOS Ventura 13.5beta3（22G5048d）发布

系统介绍 黑果魏叔 6 月 16 日消息，苹果今日向 Mac 电脑用户推送了 macOS 13.5 开发者预览版 Beta 3 更新（内部版本号：22G5048d），本次更新距离上次发布隔了 15 天。 macOS Ventura 带来了台前调度、连续互通相机、Fa…
阅读更多...
【Axure 教程】中继器（进阶篇）

【Axure 教程】中继器（进阶篇）

一、修改、删除指定行 首先我们还是在 Axure 页面中拖入一个【中继器】，并双击打开，在默认的【矩形】后面加上【修改】和【删除】按钮： 然后我们给修改按钮添加【中继器事件】，选择【更新行】： 可以看到，由…
阅读更多...
Axure RP 9 基础教程 元件基础3

Axure RP 9 基础教程 元件基础3

11、组合元件 Axure中可以将多个元件组合起来，组合可以被命名，也可以被当成一个元件来进行交互，调整位置和大小等。选中多个元件，在顶部菜单中点击组合图标即可。选中一个组合，点击取消组合，可以就地解散。…
阅读更多...
多传感器融合分类及对比

多传感器融合分类及对比

1.多传感器融合的体系结构 在多传感器融合中，按照对原始数据处理方法的不同，多传感器融合系统的体系结构可以分为三种：集中式，分布式和混合式(混合式又分为有反馈结构和无反馈结构)。 集中式融合：将各传感器获得的原始…
阅读更多...
软件设计的核心方法及实例解析

软件设计的核心方法及实例解析

李连杰电影版《倚天屠龙记》里有个经典的名场面，祖师爷爷张三丰花了三分钟教张无忌太极拳，张无忌学成打败了对手。三丰爷爷的教学思路是这样的：爷爷演示太极拳让张无忌跟着练，边练边问张无忌记住了多少，等张无忌把所有…
阅读更多...
网络系统安全——MS15_034漏洞利用与安全加固

网络系统安全——MS15_034漏洞利用与安全加固

Kali 192.168.124.162 Windows server 2008 192.168.124.169 检查2008服务器的IIS网站是否正常，进入2008服务器，使用ie浏览器访问本机地址 切换到kali，使用命令ping来测试他们的连通性 然后使用使用命令curl测试，测试&#x…
阅读更多...
FTP协议，带你了解FTP协议

FTP协议，带你了解FTP协议

目录 一、FTP的概述 1.FTP的理念 2.FTP数据连接模式 3.连接模式分类 4.主动和被动模式的工作原理 二、配置FTP服务 1、配置匿名用户FTP服务 1. 1安装FTP服务器软件 1.2 配置FTP服务器 1.3 重启FTP服务器 1.4 测试FTP服务器 2.关闭防火墙安装vsftpd软件包 3.开启FTP…
阅读更多...
单片机中移植lua解释器

单片机中移植lua解释器

一、基本开发环境 开发环境基于野火STM32开发板。 前测试的 Lua 解释器版本为 5.4.2。 官网下载lua资源包，下载地址如下： https://www.lua.org/ https://github.com/rjpcomputing/luaforwindows/releases lua: Lua 国内镜像 (gitee.com)‍ 二、移植Lua解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023