基本配置（一）
发表于：2021-07-05 | 分类： 前端
字数统计: 2k | 阅读时长: 8分钟 | 阅读量：

这是一款HEXO主题。

有问题去提issues 或者 留言板留言，建议提issues

国内访问：https://hexo-theme-bamboo.netlify.app （github比较慢的话，可以访问这个地址预览）

下载


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

Hexo

https://hexo.io/zh-cn/

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

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

hexo-theme-bamboo

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

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

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

1
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 里生成

在你的博客根目录里 
1
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参数，自定义代码高亮颜色，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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版本，你可以指定下载最新的版本

1
npm install hexo@5.3.0

首先需要在根目录下的_config.yml 文件中，将highlight的enable设置为false，然后
将prismjs的enable设置为true，如下所示

1
2
3
4
5
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

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

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

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

1
2
3
4
5
6
7
8
9
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-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

1
npm install hexo-generator-search --save

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

1
2
3
search:
  path: search.xml
  field: post

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

新建分类 categories 页

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

1
hexo new page "categories"

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

1
2
3
4
5
6
---
title: categories
date: 2020-09-14 15:30:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

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

1
hexo new page "tags"

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

1
2
3
4
5
6
---
title: tags
date: 2020-09-14 15:30:30
type: "tags"
layout: "tags"
---

新建友情链接 friends 页

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

1
hexo new page "friends"

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

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

通过json生成site-card标签

/post/getjson/site/

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

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

issues-sites标签

/post/issuessites/

如果你不会用json生成site-card标签或者使用github issue标签当做友链页面，你也可以创建一个.md文件，通过如下标签将友链地址写成固定的也是可以的

site-card

/post/site-card/

新建关于我 about 页

1
hexo new page "about"

然后参考：

site-card

/post/new-about/index/

新建图库页面

跟上面这些页面一样，自己新建md页面，然后使用下面三种标签即可快速生成图库页面
首先使用分组标签

gallerygroup标签

/post/gallerygroup/

然后新建图库详情页面，然后使用下面两种标签中的任意一种：

gallery标签

/post/gallery/

通过文件夹获取图片标签

/post/getphoto/

通过json获取图片集

/post/getjson/photo/

中文链接转拼音（可选的）

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

1
npm i hexo-permalink-pinyin --save

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

1
2
3
permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

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

添加 RSS 订阅支持（可选的）

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

1
npm install hexo-generator-feed --save

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

1
2
3
4
5
6
7
8
9
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

Pjax


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

1
2
3
4
5
6
7
8
9
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'

博主源码


不是主题源码，是这个网站的源码, 可以作为参考。

本站源码

https://github.com/yuang01/yuang01.github.io/tree/hexo

Hexo hexo-theme-bamboo
上一篇:
getFiles文件获取
下一篇:
Front-matter介绍

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