butterfly主题的下载及美化

2023-10-10 15:35:22 浏览数 (1)

butterfly主题是我用的最多的一个主题

一，安装butterfly主题

1.在博客的根目录下执行以下命令

代码语言：javascript复制
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2.下载 pug 以及 stylus 的渲染器，否则在项目运行时会报错：

代码语言：javascript复制
npm install hexo-renderer-pug hexo-renderer-stylus --save

3.修改项目根目录下的_config.yml文件（称为站点配置文件），开启主题

代码语言：javascript复制
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: butterfly

二，基础配置

主目录下 _config.yml.这里主目录指的是自己的博客目录

代码语言：javascript复制
# Site
title: Java学习笔记本     	   # 博客名
subtitle:  ''
description: '好好学习天天向上' # 签名
keywords:
author: libinbin
language: zh-CN
timezone: 'Asia/Shanghai'

博主踩过的坑：如果出现乱码，记得看一看自己编辑器使用的是不是utf-8. 在进行配置时可以配置完某一个，立马在本地检查一下效果。再进行下一个配置，这样可以及时发现错误。

三，导航栏配置

1.打开主题下的_config.yml文件进行配置，我的目录：D:bolgthemesbutterfly，命令执行在博客目录下就行

代码语言：javascript复制
menu:
  首页: / || fa fa-home
  归档: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  留言板: /messageboard/ || fa fa-paper-plane
  友链: /link/ || fa fa-link
  日志: /timeline/ || fa fa-bell
  菜单 || fa fa-list:
    - about || /about/ || fa fa-sitemap
    - myself || /myself/ || fa fa-id-card
    - butterfly || https://github.com/jerryc127/hexo-theme-butterfly/ || fa fa-heart

接下来对导航栏进行详细配置

归档

这个页面自带无需进行配置

标签

1、执行命令新建标签页面hexo new page tags 执行后会在博客的source目录下生成对应的文件夹

2、修改：source/tags/index.md

代码语言：javascript复制
---
title: 标签
date: 2022-07-30 08:45:06
type: tags

---

3、以后上传文章的md文件中，可以在标题头中加入tags，包含 标签 文章的例子：

代码语言：javascript复制
---
title: 学习 java 这一篇就够了
tag: 
  - 后端
---

分类

与上面类似：

代码语言：javascript复制
hexo new page categories
代码语言：javascript复制
title: 分类
date: 2022-07-30 08:54:29
type: categories

以后上传文章：

代码语言：javascript复制
---
title: 学习 Java 这一篇就够了
tag: 
	- 后端
categories: 
	- 后端框架
---

留言板

代码语言：javascript复制
hexo new page messageboard
代码语言：javascript复制
---
title: 留言板
date: 2022-07-30 08:58:20
type: messageboard
---

友链

代码语言：javascript复制
hexo new page link
代码语言：javascript复制
title: 友链
date: 2022-07-30 09:00:05
type: link

在Hexo目录中的source目录下新建文件夹_data，创建一个文件link.yml，内容如下

代码语言：javascript复制
class:
  class_name: 友情链接
  link_list:
    1:
      name: 姓名
      link: 链接
      avatar: 图片
      descr: 签名
    2:
      name: 姓名
      link: 链接
      avatar: 图片
      descr: 签名

日志

代码语言：javascript复制
hexo new page timeline
代码语言：javascript复制
title: 日志
date: 2022-07-30 09:02:25
type: timeline

关于

代码语言：javascript复制
title: This is me
date: 2022-07-30 09:04:02
type: myself

四，副标题配置

修改 bufferfly下的 _config.yml

代码语言：javascript复制
subtitle:
  enable: true
  # Typewriter Effect (开启打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 ,
  # 如果有英文双引号' " ',请使用转义字元 "
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - 你在抱怨什么呢
    - 为明天到来的事，说人生像是没有意义
    - 没有选择会是唯一的路
    - 这不是你自己的问题，人终归要好好去生活

副标题字体大小颜色 在themesbutterflysourcecss_layout中的head.styl:中修改，这里就不作演示了。

五，图片设置

图片可以用云图片链接或者放在本地文件夹位置：/themes/butterfly/source/img.以下代码在主题的配置文件中修改

1、网站图标

代码语言：javascript复制
# Favicon（网站图标）
favicon: /img/favicon.png

2、头像

代码语言：javascript复制
avatar:
  img: /img/avatar.jpg #图片路径
  effect: false #头像会一直转圈

3、主页封面图片

代码语言：javascript复制
# The banner image of home page
index_img: /img/background.jpg

4、文章详情页的顶部图片

当没有在front-matter设置top_img和cover的情况下会显示该图 修改主题配置文件_config.butterfly.yml：

代码语言：javascript复制
# If the banner of page not setting, it will show the top_img
default_top_img: /img/default_top_img.jpg #我设置的本地图片

5、归档页顶部图片

代码语言：javascript复制
#归档子标签页图片
# The banner image of archive page
archive_img: /img/archive.jpg

6、tag页顶部图

代码语言：javascript复制
#tag页（标签页）
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: /img/tag_img.jpg

7、文章封面

每篇文章都可以设置一张封面，可以为每篇文章设置默认封面 也可以修改每个md文件的front-matter的cover属性，会覆盖上面的默认封面。修改主题配置文件_config.butterfly.yml：

代码语言：javascript复制
cover:
  index_enable: true #  是否展示文章封面
  aside_enable: true
  archives_enable: true
  position: both # 封面展示的位置 left/right/both
  # 当没有设置cover时，默认展示的文章封面
  default_cover:
    # 当配置多张图片时，会随机选择一张作为 cover. 此时写法为
    - https:
    - http:
    - http:
    - http:
    - http:
    - http:

8、错误页面

配置了该属性后会替换无法展示的图片

代码语言：javascript复制
# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

9、category页顶部图

代码语言：javascript复制
#category页
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: /img/category_img.jpg

六，图片懒加载

1.新增hexo-lazyload-image模块

代码语言：javascript复制
npm install hexo-lazyload-image --save

2.在主目录配置文件_config.yml增加配置

代码语言：javascript复制
lazyload:
  enable: true
  loadingImg: /img/loading.gif

这个就是图片没加载出来的时候，出现一个动图转转转的文章页样式

七，图片大图查看

修改主题配置文件_config.butterfly.yml

代码语言：javascript复制
# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true
网站 博客 后端 配置 日志

0 人点赞