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

这是一款HEXO主题。

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

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

下载


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

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

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

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

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

1
git clone https://gitee.com/yuang01/hexo-theme-bamboo.git
或者点击下载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.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参数,自定义代码高亮颜色,如下所示

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 文件中,将highlightenable设置为false,然后
prismjsenable设置为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+

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

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

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

新建关于我 about 页

1
hexo new page "about"

然后参考:

新建图库页面

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

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

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

如果你的文章名称是中文的,那么 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'

博主源码


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

上一篇:
getFiles文件获取
下一篇:
Front-matter介绍