主题config配置项简介
发表于：2022-07-16 | 分类： 前端
字数统计: 1.8k | 阅读时长: 7分钟 | 阅读量：

主题字体图标使用的是

Font Awesome

https://fontawesome.com/

1
2
<i class="fa-solid fa-person"></i>
取 fa-solid fa-person

Emoji表情不需要，也不推荐安装其他插件，推荐这个网站，直接复制粘贴就能显示在IOS，Android，OSX和Windows系统上。

这里推荐一个Emoji网站

图片地址

_config.yml里使用到的图片地址，例如logo参数：

1
logo: http://xxx.png  # 为空则不显示

我们可以使用线上地址, 也可以使用本地地址
首先在source文件夹(根目录下的source文件夹)下创建img文件夹，然后引入：

1
logo: /img/1.jpg # 为空则不显示

注意source是根目录下的，不是主题文件夹下的，主题文件夹不用管
当然，文章里面引用本地地址也行的，例如

1
![图片描述](/img/full.png)

菜单

一开始菜单是注释掉的，我们只需要取消注释就行了，注释是考虑到有些人用npm下载主题.

1
2
3
4
menu:
  Home:
    url: /
    icon: fa fa-home

编辑器里面有取消注释的快捷键，例如vscode使用的是 Ctrl + /
#代表注释

首页轮播图

1
2
swiper:
  on: true # 设置为false, 则首页不显示轮播图

设置false则不显示首页轮播图
在文章中设置swiper: true，会将该篇文章放在首页轮播图中：

1
2
3
4
5
6
7
8
---
title: Bamboo主题-主题config配置项简介（二）
date: 2022-07-16 12:21
swiper: true
swiperImg: https://pica.zhimg.com/80/v2-4dc929a46e9fb56c13911592af0be9dc_1440w.jpg?source=1940ef5c
excerpt: '描述'
---
文章内容

当然，如果没有文章设置swiper: true，则首页轮播图显示默认内容：

1
2
3
4
5
6
7
8
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  defaultImg: 'https://pic3.zhimg.com/80/v2-7e6795a0b7b4fbe87b0a388b8a052f78_1440w.jpg' # 图片，没有则随机选取
  defaultVideo: '/video/quanji.mp4' # video，min-width:992px show
  defaultTile: '竹子' # 标题
  defaultDesc: ['千磨万击还坚劲', '任尔东西南北风'] #描 述，例如 ['煮酒洗净尘嚣，论知交', '万般付之一笑，共偕老']
  defaultLeftBtnText: '阅读文档' # 左边按钮文字, 空字符串则不显示
  defaultRightBtnText: '下载主题' # 右边按钮的文字，空字符串则不显示

defaultImg代表默认图片，defaultVideo代表默认视频，这两个值都设置的话，则在pc端显示视频，手机端显示图片。

轮播图样式

下面的图片是放在图床上的，可能加载有点慢

1
2
3
4
5
6
7
8
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  # 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)
  imgwidthFull: false
  # 整个轮播图宽高都是100%  (轮播图的文字和按钮只能居中显示)
  full: true # full 优先级大于 imgwidthFull/bothSideTransparent
  # 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明
  bothSideTransparent: false

如果这样设置，则轮播图全屏显示:
全屏显示

1
2
3
4
5
6
7
8
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  # 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)
  imgwidthFull: false
  # 整个轮播图宽高都是100%  (轮播图的文字和按钮只能居中显示)
  full: false # full 优先级大于 imgwidthFull/bothSideTransparent
  # 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明
  bothSideTransparent: false

如果这样设置，则这样显示:
轮播图

1
2
3
4
5
6
7
8
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  # 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)
  imgwidthFull: true
  # 整个轮播图宽高都是100%  (轮播图的文字和按钮只能居中显示)
  full: false # full 优先级大于 imgwidthFull/bothSideTransparent
  # 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明
  bothSideTransparent: false

如果这样设置，则这样显示:
轮播图

1
2
3
4
5
6
7
8
swiper:
  on: true # 设置为false, 则首页不显示轮播图
  # 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)
  imgwidthFull: false
  # 整个轮播图宽高都是100%  (轮播图的文字和按钮只能居中显示)
  full: false # full 优先级大于 imgwidthFull/bothSideTransparent
  # 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明
  bothSideTransparent: true

如果这样设置，则这样显示:
轮播图

音乐

1
2
3
4
5
music:
  on: true
  server: tencent   #require music platform: netease, tencent, kugou, xiami, baidu
  type: song    #require song, playlist, album, search, artist
  id: 0020dKPG3mp0GT     #require song id / playlist id / album id / search keyword

server代表音乐平台，netease代表网易云, tencent代表qq音乐
type代表歌曲类别，song代表单曲, playlist代表歌单
id代表歌曲或者歌单的id，例如网易云的歌单地址https://music.163.com/#/playlist?id=2788431035, 后面的id就是这个。

本主题切换页面，音乐不会间断的哦

评论

博主用的评论是utterance, https://utteranc.es/ github授权一下就行。很简单。

主题集成了utterance, valine, waline， livere, gitalk, giscus ,gitment, beaudar, twikoo, changyan这些评论
需要注意的是changyan我并没有测试哈，因为好像要依赖网站备案…..
gitment的官方都不维护了，不推荐用gitment了，所以changyan和gitment我都不推荐使用

主题颜色更改

1
2
3
4
5
6
7
8
# 主题颜色
# 主题颜色
color_scheme:
  # ------------
  # 通用颜色
  common:
    # 主题色
    theme: '#42b983'

改这个theme就行了

1
bgFloor: 'url("https://pic2.zhimg.com/80/v2-a90e3e9f544549e244355039b96bd606_1440w.jpg")

bgFloor指的是博客首页的背景图片或者背景颜色

1
bgImg: 'https://pica.zhimg.com/80/v2-292e6340491bd97f9d014d6be3371c04_1440w.jpg'

bgImg指的是文章页面的背景图片或者背景颜色，也可以在文章里面单独配置

1
headerMenuBackgroundColor: 'rgba(66, 185, 133, 0.8)'

headerMenuBackgroundColor值得是导航的背景颜色

1
2
3
footer:
  # 为空则使用 theme主题色，写法: rgba(268, 264, 269, 0.8) or #42b983 or red or 也可以是渐变颜色 linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%) or 也可以是url("图片地址")
  background: 'rgba(66, 185, 133, 0.8)'

footer.background值得页脚的背景颜色

页脚

1
2
3
4
site_footer:
  custom: # 根据需要自行取消注释，label: 'markdown格式'，会在下面继续增加内容
    # - label: '<br>'
    # - label: '[Hello World](http://baidu.com)'

可以通过页脚的custom来向下自定义markdown内容
也可以向中间插入内容:
假如说你想在 social和 copyright中间加一个自定义内容, 可以这样写 layout: [social, aaa ,copyright, busuanzi, custom], 然后在下面写上aaa: ‘markdown格式’, aaa这个名称随便取

1
2
3
4
5
6
7
8
9
10
11
12
layout: [social, aaa, copyright, custom]
social:
  - icon: fas fa-rss
    url: /atom.xml
  - icon: fas fa-envelope
    url: mailto:xxxxxxxxx@qq.com
  - icon: fab fa-github
    url: https://github.com/yuang01/hexo-theme-bamboo
  - icon: fab fa-qq
    url: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=xxxxxxxxx
aaa: '自定义内容'
copyright: 'Copyright © 2019 - 2020 <a href="https://github.com/yuang01">yuang01</a> | Powered by <a href="https://hexo.io/zh-cn/docs/">Hexo</a> | Theme <a href="https://github.com/yuang01/theme">Bamboo</a> '

图片懒加载

1
2
lazyload:
  loadingImg: https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp

通过lazyload.loadingImg指定loading图片

引入js或者css文件

1
2
3
4
5
import:
  link:
    # - <link href="xxx.css"  rel="stylesheet">
  script: 
    # - <script src="/bubbly-bg/index.js"></script>

通过import参数引入js或者css.

其实配置项搞那么多是想更加自定义一点，配置项你都不用去管他的，只是说你想去改某个东西你就去改它。

Hexo hexo-theme-bamboo
上一篇:
轮播-swiper
下一篇:
首页添加弹幕

    • Copyright © 2019 - 2023 yuang01 | Powered by Hexo | Theme Bamboo