主题介绍-基本配置
发表于：2021-10-12 | 分类： 本站介绍
字数统计: 3k | 阅读时长: 12分钟 | 阅读量：

这是一款HEXO主题

注意: icon使用的 Font Awesome 版本为 5.15.3。

下载


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

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

git clone https://github.com/jimyfengqi/hexo-theme-bomboo.git

hexo-theme-bamboo

https://gitub.com/yuang01/hexo-theme-bamboo

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

开始下载

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

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

hexo-theme-bamboo

https://gitee.com/yuang01/hexo-theme-bamboo

或者点击下载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.yml 的 theme 的值：theme: hexo-theme-bamboo

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

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

代码高亮

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

首先需要在根目录下的_config.yml 文件中，将highlight的enable设置为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 文件中，将highlight的enable设置为false，然后
将prismjs的enable设置为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 的值为 false，prismjs.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-install prism-plugin

这个主题采用的是hexo-prism-plugin这个Hexo插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

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

highlight:
  enable: false

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

搜索

本主题中还使用到了 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: 2021-10-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: 2021-10 15:30:30
type: "tags"
layout: "tags"
---

新建关于我 about 页

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

hexo new page "about"

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

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

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

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

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%
socialAccounts填写我的社交账号

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

socialAccounts: 
  on: true
  data: # 这个data不能忘了，下面的字段注意缩进
    QQ: # 社交软件名称
      icon: fa fa-qq  # 图标，可以为空，前面加上fa，假如图标名称叫fa-quora，就是 fa fa-quora, 
      name: 12345678 # 账号名称
      url: 'http://www.baidu.com' # 账号链接地址
    微信:
      icon: fa fa-weixin
      name: 12345678
      url: 'http://www.baidu.com'
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-010-17 15:30:30
onlyTitle: true # 只显示title
toc: false # 不显示文章目录
# type: "friends" # 这个不要了
# layout: "friends" # 这个不要了
---

这时候会生成source/friends/index.md文件，在md文件里自定义写友链就行了。

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://gitee.com/yuang01"
}, {
  "avatar": "https://pic1.zhimg.com/80/v2-1a60e33c33810a4d81a80282b8ca7a33_720w.jpg?source=1940ef5c",
  "name": "青灯暮雨",
  "introduction": "山水如墨染",
  "url": "https://gitee.com/yuang01"
}, {
  "avatar": "https://pic2.zhimg.com/80/v2-134122ca13d041f5ec1f2680f2677318_720w.jpg?source=1940ef5c",
  "name": "寄情山水花草间",
  "introduction": "宛如丹青未干",
  "url": "https://gitee.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/'
Hexo
上一篇:
主题介绍-页面配置
下一篇:
Django综合篇之网站地图sitemap
本文目录
本文目录
    •
    本站总访问量： 次 |
    Copyright © 2020 - 2021 枫奇丶宛南 | Powered by Hexo | Theme Bamboo