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

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

主页文章节选(自动节选和文章页description)

因为主题UI的关係,主页文章节选只支持自动节选和文章页description。

在butterfly里,有四种可供选择

  1. description: 只显示description
  2. both: 优先选择description,如果没有配置description,则显示自动节选的内容
  3. auto_excerpt:只显示自动节选
  4. false: 不显示文章内容
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

description在front-matter里添加

页面锚点

开启页面锚点后,当你在进行滚动时,页面链接会根据标题ID进行替换

(注意: 每替换一次,会留下一个历史记录。所以如果一篇文章有很多锚点的话,网页的历史记录会很多。)

# anchor
# when you scroll in post , the url will update according to header id.
anchor:
  button:
    enable: false
    always_show: false
    icon: # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: false # when you scroll in post, the URL will update according to header id.

图片描述

可开启图片Figcaption描述文字显示

优先显示图片的 title 属性,然后是 alt 属性

photofigcaption: true

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50

添加版权信息后

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.
作者: Jerry
连结: http://localhost:4000/posts/bd3c650b/#Paragraph
来源: Butterfly
着作权归作者所有。商业转载请联络作者获得授权,非商业转载请注明出处。

文章页相关配置

文章版权

post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

文章打赏

reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

TOC

toc:
  post: true
  page: true
  number: true
  expand: false
  style_simple: false # for post
  scroll_percent: true

为特定的文章配置

在你的文章md文件的头部,加入toc_number和toc,并配置true或者false即可。

主题会优先判断文章Markdown的Front-matter是否有配置,如有,则以Front-matter的配置为准。否则,以主题配置文件中的配置为准

相关文章

当文章封面设置为 false 时,或者没有获取到封面配置,相关文章背景将会显示主题色。

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

文章过期提醒

# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  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.

limit_day: 距离更新时间多少天才显示文章过期提醒

message_prev : 天数之前的文字

message_next:天数之后的文字

文章编辑按钮
# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章分页按钮

# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

Footer 设置

博客年份

footer:
  owner:
    enable: true
    since: 2018

页脚自定义文本

custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

ICP

custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号:xxxxxx</span></a>

侧边栏设置 (aside)

侧边排版

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # Order of tags, random/name/length
    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

访问人数 busuanzi (UV 和 PV)

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

如果需要修改 busuanzi 的 CDN 链接,可通过 主题配置文件 的 CDN 中的 option 进行修改

CDN:
  option:
    busuanzi: xxxxxxxxx

运行时间

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

最新评论

# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true

自定义添加栏目

https://butterfly.js.org/posts/ea33ab97/

右下角按钮 (Bottom right button)

简繁转换

translate:
  enable: true
  # 默认按钮显示文字(网站是简体,应设置为'default: 繁')
  default: 简
  #网站默认语言,1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #当文字是简体时,按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时,按钮显示的文字
  msgToSimplifiedChinese: "简"

閲读模式

readmode: true

夜间模式

# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false
  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
  start: # 8
  end: # 22

滚动状态百分比

# show scroll percent in scroll-to-top button
rightside_scroll_percent: true

按钮排序

# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重复
rightside_item_order:
  enable: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment

标签外挂(Tag Plugins)

https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89

Gallery相册图库

https://butterfly.js.org/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A%E5%9C%96%E5%BA%AB

原文地址:https://butterfly.js.org/


相关文章
|
5月前
WordPress软件下载主题Inpandora
Inpandora(中文名为潘多拉)是一款基于软件下载站定制的WordPress主题,帮助站长使用WordPress快速搭建一个专业的WordPress软件博客。Inpandora这款WordPress主题可以说是因软件而生,从UI设计到后台设置功能,都充分体现出这款主题的专业性。
54 2
|
11月前
hexo主题集成pug
hexo主题集成pug
71 1
|
6月前
|
搜索推荐
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
92 0
|
前端开发
Butterfly安装文档(三)主题配置-1(一)
Butterfly安装文档(三)主题配置-1
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(二)
|
数据采集 搜索推荐 数据挖掘
Hexo(3)-安装自己喜欢的主题
我们之前使用 Hexo 生成的博客使用的是 Hexo 的默认主题:Landscape。怎么说呢,这个主题猛地一看还行,仔细一看还不如猛地一看,所以我决定另寻归宿。
butterfly主题的下载及美化
butterfly主题的下载及美化
202 0
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
181 0
|
前端开发
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?可以使用阿里巴巴iconfont来拓展啦,今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。
570 0