加载中...
Bamboo主题-基本配置(一)
发表于:2021-07-05 | 分类: 前端
字数统计: 3k | 阅读时长: 12分钟 | 阅读量:

这是一款HEXO主题。

下载


首先你需要有一个Hexo,按照官网的方法,很容易的就能创建一个hexo博客。

当你有了hexo博客之后,进入themes文件夹下使用 Git clone 命令来下载:

git clone https://github.com/yuang01/hexo-theme-bamboo.git

或者点击下载zip包,解压放入themes文件夹下
开始下载

当你有了hexo博客之后,进入themes文件夹下使用 Git clone 命令来下载:

git clone https://gitee.com/yuang01/hexo-theme-bamboo.git
或者点击下载zip包,解压放入`themes`文件夹下 开始下载

此方法只支持Hexo在5.0.0版本以上
通过 npm 安装并不会在 themes 里生成主题文件夹,而是在 node_modules 里生成

在你的博客根目录里
npm i hexo-theme-bamboo

升级方法:在博客根目录下,运行 npm update hexo-theme-bamboo

应用主题

修改hexo根目录下的站点配置文件_config.yml,把主题改为bamboo

接着在hexo根目录下新建文件_config.bamboo.yml,从node_modules文件夹下找到hexo-theme-bamboo文件夹下的_config.yml,将里面的内容复制到_config.bamboo.yml文件中即可,在_config.bamboo.yml文件中对主题进行配置

基本配置


切换主题

修改 Hexo 根目录下的 _config.ymltheme 的值:theme: hexo-theme-bamboo

`_config.yml` 文件的其它修改建议:

  • 请修改 _config.ymlurl 的值为你的网站主 URL(如:http://xxx.github.io)。author值改为你的名称(如:yuang),description值随便写一段描述(如:千磨万击还坚劲,任尔东西南北风)
  • 如果你是中文用户,则建议修改 language 的值为 zh-CN

代码高亮

本主题支持三种代码高亮方式,前两种是hexo内置的highlightprismjs,后一种是使用的插件hexo-prism-plugin。三种方式看个人喜好选择一种作为高亮

首先需要在根目录下的_config.yml 文件中,将highlightenable设置为true,这样就开启了highlight的代码高亮,默认这个是开启的。然后你可以在本主题目录下的_config.yml 文件中通过highlight参数,自定义代码高亮颜色,如下所示

# https://github.com/chriskempson/tomorrow-theme
highlight:
  background: '#2d2d2d'
  currentLine: '#393939'
  selection: '#515151'
  foreground: '#cccccc'
  comment: '#999999'
  red: '#f2777a'
  orange: '#f99157'
  yellow: '#ffcc66'
  green: '#99cc99'
  aqua: '#66cccc'
  blue: '#6699cc'
  purple: '#cc99cc'

请先确保你的hexo版本为5.0以上,在根目录下的package.json中可以查看hexo的版本。如果不是5.0.以上,请先升级,例如在根目录下使用如下命令,这个下载的版本号是5.3.0版本,你可以指定下载最新的版本

npm install hexo@5.3.0

首先需要在根目录下的_config.yml 文件中,将highlightenable设置为false,然后
prismjsenable设置为true,如下所示

prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

最后可以通过本主题目录下的_config.yml 文件中prismjs参数来选择主题
例如:

prismjs:
  theme: 'default' # default, coy, dark, funky, okaidia, solarizedlight, tomorrow, twilight

另外,当你使用的是prismjs作为代码高亮的话,你还可以在单独的文章中设置代码高亮主题,这样可以实现不同的页面,有不同的代码高亮主题,文章中设置代码如下

title: Hexo主题--Bamboo介绍
date: 2021-01-5 23:28
swiper: true
swiperImg: '/medias/11.jpg'
img: '/medias/7.jpg'
categories: 前端
tags: [Hexo, hexo-theme-bamboo]
top: true
prismjs: dark # 设置该篇文章的代码高亮主题为dark

如果使用hexo-prism-plugin这个Hexo插件来做代码高亮,安装命令如下:

npm i -S hexo-prism-plugin

然后,修改 Hexo 根目录下的_config.yml 文件中的 highlight.enable 的值为 falseprismjs.enable值为false, 并新增该插件相关的配置,主要配置如下:

highlight:
  enable: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'    # 这里可以选择不同样式的主题
  line_number: false    # default false
  custom_css:

这个插件目前渲染有点小问题,代码高亮如遇到花括号变成了{}这样的字符串,以下方式可解决:
node_modules\hexo-prism-plugin\src\index.js中的map改为如下

const map = {
  ''': '\'',
  '&': '&',
  '>': '>',
  '&lt;': '<',
  '&quot;': '"',
  '&#123;': '{',
  '&#125;': '}'
};

然后重启服务,hexo clean && hexo s即可
卸载命令如下,如果你安装了此插件,后来想使用前两种高亮,请先卸载此插件

npm un hexo-prism-plugin

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

search:
  path: search.xml
  field: post

在主题文件夹下的_config.yml文件中设置search为true或者false控制显示隐藏

新建分类 categories 页

categories 页是用来展示所有分类的页面,也就是导航上的分类页面,如果在你的博客 source 目录下还没有 categories/index.md 文件,那么你就需要手动或者使用命令新建一个,命令如下:

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md至少需要以下内容

---
title: categories
date: 2020-09-14 15:30:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展示所有标签的页面,如果在你的博客 source 目录下还没有 tags/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md至少需要以下内容

---
title: tags
date: 2020-09-14 15:30:30
type: "tags"
layout: "tags"
---

新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面,如果在你的博客 source 目录下还没有 about/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md至少需要以下内容

---
title: about
date: 2020-09-14 15:30:30 # 时间随便写
type: "about"
layout: "about"
---

然后可以在本主题下的_config.yml文件下,编辑以下字段进行关于我页面信息的更改

baseInfo # 基本信息,包括年龄,性别,坐标,状态
skills   # 技能
socialAccounts # 社交账号
games   # 游戏
books   #书籍

写法如下

baseInfo基本信息

baseInfo主要包含年龄,性别,坐标,状态,格式如下,注意空格缩进哦

baseInfo:
  on: true # 是否显示
  age: 99 # 年龄
  sex: '男' # 性别
  coordinate: '火星' # 坐标
  status: '划水中' # 状态
skills 填写我的技能

skills 填写我的技能,格式如下,注意空格缩进哦

# 关于我 技能
skills:
  on: true # 是否显示
  data: # 这个data不能忘了,下面的字段注意缩进
    HTML5: # 这里写你的技能名称,如 HTML5或者java
      background: 'red' # 进度条颜色
      percent: 90% # 进度条百分比
    JavaScript:
      background: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)'
      percent: 85%
    CSS:
      background: '#000'
      percent: 70%
    # 可以在下面继续写哦,例如python,java等,按照上面的格式写
socialAccounts 社交账号

socialAccounts填写我的社交账号,格式如下,注意空格缩进哦

socialAccounts: 
  on: true
  data: # 这个data不能忘了,下面的字段注意缩进
    QQ: # 社交软件名称
      icon: fab fa-qq  # 图标,可以为空,前面加上fa,假如图标名称叫fa-quora,就是 fa fa-quora, 
      name: 1730241541 # 账号名称
      url: 'http://www.baidu.com' # 账号链接地址
    微信:
      icon: fab fa-weixin
      name: 1730241541
      url: 'http://www.baidu.com'
    # 可以在下面继续写哦,例如知乎,微博等,按照上面的格式写

本主题从2.6.0开始使用Font Awesome v5.15.3版本

games 填写我的游戏

games 填写我的游戏,格式如下,注意空格缩进哦

games:
  on: true # 是否显示
  data: # 这个data不能忘了,下面的字段注意缩进
    王者荣耀: # 游戏名称,下面的img是游戏图片
      img: 'https://pic2.zhimg.com/80/v2-54730a36304842b86a57a237b8b39945_720w.jpg?source=1940ef5c'
    英雄杀:
      img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1909008358,1888649581&fm=26&gp=0.jpg'
    和平精英:
      img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595596612190&di=dbf2030780758c4724ecb1f07f2f4f73&imgtype=0&src=http%3A%2F%2Fimgup04.51wxjz.com%2F51wxjz%2F2019-06%2F05%2F09%2F15596983468928_0.png'
    英雄联盟:
      img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3035766587,2822701570&fm=26&gp=0.jpg'
    # 可以在下面继续写哦,例如开心消消乐等等,按照上面的格式写
books 填写我的书籍

books 填写我的书籍,格式如下,注意空格缩进哦

books:
  on: true # 是否显示
  data: # 这个data不能忘了,下面的字段注意缩进
    明朝那些事儿: # 书籍名称,下面的img是书籍图片
      img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2736238052,2078148140&fm=26&gp=0.jpg'
    春秋左传:
      img: 'https://pic2.zhimg.com/50/v2-6f33f60312de25ddcb795fc81ee91b38_720w.jpg?source=54b3c3a5'
    孙子兵法:
      img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=710999414,899378807&fm=26&gp=0.jpg'
    # 可以在下面继续写哦,例如时间简史等等,按照上面的格式写

新建友情链接 friends 页

该功能需要主题版本为2.1.5+

friends 页是用来展示友情连接信息的页面,如果在你的博客 source 目录下还没有 friends/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md

---
title: friends
date: 2021-06-17 15:30:30
onlyTitle: true # 只显示title
toc: false # 不显示文章目录
# type: "friends" # 这个不要了
# layout: "friends" # 这个不要了
---

这时候会生成source/friends/index.md文件,在md文件里自定义写友链就行了。然后你可以阅读下面这篇文章,使用github或者gitee来生成友链

friends 页是用来展示友情连接信息的页面,如果在你的博客 source 目录下还没有 friends/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md至少需要以下内容

---
title: friends
date: 2020-09-14 15:30:30
type: "friends"
layout: "friends"
---

同时,在你的博客 source 目录下新建 _data 目录,在 _data 目录中新建 friends.json 文件,文件内容如下所示:

[{
  "avatar": "https://pic2.zhimg.com/80/v2-d1bd22e7dc847ae62028ae336d55ded9_720w.jpg?source=1940ef5c",
  "name": "如梦亦如幻",
  "introduction": "烟雨如江南",
  "url": "https://github.com/yuang01"
}, {
  "avatar": "https://pic1.zhimg.com/80/v2-1a60e33c33810a4d81a80282b8ca7a33_720w.jpg?source=1940ef5c",
  "name": "青灯暮雨",
  "introduction": "山水如墨染",
  "url": "https://github.com/yuang01"
}, {
  "avatar": "https://pic2.zhimg.com/80/v2-134122ca13d041f5ec1f2680f2677318_720w.jpg?source=1940ef5c",
  "name": "寄情山水花草间",
  "introduction": "宛如丹青未干",
  "url": "https://github.com/yuang01"
}]

中文链接转拼音(可选的)

如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。

添加 RSS 订阅支持(可选的)

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

Pjax


页面不刷新跳转,音乐可以不间断播放。关闭则跳转页面时候刷新页面

pjax:
  on: true
  animation: circle # false, nprogress, circle
  animationColor: 'orangered' # animation为 nprogress时候的动画颜色, red or #000 ...
  cacheBust: false # url 地址追加时间戳,用以避免浏览器缓存
  timeout: 5000    # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
  banUrl:          # 被屏蔽的 url 地址将不启用 pjax 跳转,可以在控制台下使用 window.location.pathname 获取
      # - '/xxx/'     
      # - '/xxx/' 
上一篇:
getFiles文件获取
下一篇:
Bamboo主题-页面功能配置(二)
本文目录
本文目录