hexo-theme-oranges

一个简单的 hexo 主题

oranges

https://hexo.theme.oranges.zcheng.site

安装

为了更为便捷的更新主题，建议使用添加 Git 子模块的方法安装，在 hexo 博客项目根目录下执行，会将oranges主题 clone 至themes文件夹下。

1
git submodule add https://github.com/zchengsite/hexo-theme-oranges.git themes/oranges

日后更新主题只需要在主题根目录执行git pull命令即可。

使用

在 hexo 博客项目根目录下找到_config.yml文件，修改其中theme字段为主题名oranges

1
theme: oranges

复制主题文件夹下的_config.yml文件到博客根目录并改名为_config.oranges.yml，后续修改主题操作均在_config.oranges.yml中进行。

配置

Tags page (click to show)

在 hexo 博客项目根目录下执行，在source文件夹下生成tags文件夹

1
hexo new page tags

接着修改tags文件夹下index为以下内容

1
2
3
4
5
6
7
---
title: tags
date: 2019-05-03 12:03:35
type: "tags"
categories:
tags:
---

并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可

1
2
3
4
5
navbar:
  -
    name: 标签
    enable: true
    path: /tags/
Friends page (click to show)

在 hexo 博客项目根目录下执行，在source文件夹下生成friends文件夹

1
hexo new page friends

接着修改friends文件夹下index为以下内容

1
2
3
4
5
6
7
---
title: tags
date: 2019-05-03 12:03:35
type: "friends"
categories:
tags:
---

并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可

1
2
3
4
5
navbar:
  -
    name: 朋友
    enable: true
    path: /friends/
About me page (click to show)

在 hexo 博客项目根目录下执行，在source文件夹下生成about文件夹

1
hexo new page about

接着修改about文件夹下index为以下内容

1
2
3
4
5
6
7
---
title: tags
date: 2019-05-03 12:03:35
type: "about"
categories:
tags:
---

并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可

1
2
3
4
5
navbar:
  -
    name: 关于我
    enable: true
    path: /about/
Categories page (click to show)

在 hexo 博客项目根目录下执行，在source文件夹下生成categories文件夹

1
hexo new page categories

接着修改categories文件夹下index为以下内容

1
2
3
4
5
6
7
---
title: tags
date: 2019-05-03 12:03:35
type: "categories"
categories:
tags:
---

并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可

1
2
3
4
5
navbar:
  -
    name: 分类
    enable: true
    path: /categories/
文章目录 (Catalog) (click to show)

在配置文件_config.oranges.yml下catalog修改enable为true，如不想展示，设置为false即可

1
2
catalog:
  enable: true
RSS (click to show)

1.安装hexo-generator-feed官方插件

1
npm install hexo-generator-feed --save

2.在博客项目配置文件_config.yml(非主题配置文件) 增加：

1
2
3
4
5
6
7
8
9
10
11
12
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

3.开启 rss 按钮
在配置文件_config.oranges.yml增加页脚项：

1
2
3
4
5
6
footer:
  social:
    -
      name: rss
      icon: rss
      path: /atom.xml
评论系统 (Comment) (click to show)

1.确保配置文件_config.oranges.yml下comments->enable: true

2.目前支持以下几种评论插件

3.如需使用，修改相应评论下enable: true

4.查看评论插件官方教程获取相应的字段填入即可使用

以valine为例，注册valine并获取appId&appKey填入即可使用

1
2
3
4
5
6
7
8
9
comments:
  enable: true
  valine:
    # https://valine.js.org/quickstart.html#%E8%8E%B7%E5%8F%96APP-ID-%E5%92%8C-APP-Key
    enable: true
    appId: xxxxxxxx
    appKey: xxxxxxxxx
    placeholder: welcome!
    avatar: retro
Google Analytics (click to show)

Google Analytics
注册 Google 分析账号，在管理/创建媒体资源/选择网站/填写相关信息后得到跟踪 Id，一般格式为 UA-xxxxxxx-x
如之前已有注册账号，在管理/跟踪信息/跟踪代码/找到跟踪 ID，一般格式为 UA-xxxxxxx-x

1
2
3
gtag:
  enable: true
  gtagkey: UA-xxxxxxx-x
PREV & NEXT (click to show)

文章末尾的上一篇与下一篇功能。

1
2
prevnext:
  enable: true
文章图片懒加载 (Lazy image loading) (click to show)

安装插件hexo-lazyload-image

1
npm install hexo-lazyload-image --save

项目配置文件_config.yml（非主题配置文件）下添加：

1
2
3
4
5
lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: false # optional

详情可见hexo-lazyload-image

全文搜索 (search) (click to show)

1.安装插件hexo-generator-search

1
npm install hexo-generator-search --save

2.项目配置文件_config.yml（非主题配置文件）下添加：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

详情可见hexo-generator-search

3.主题配置文件_config.yml下找到search，修改enable为true:

1
2
3
4
# 文章搜索
search:
  enable: true
  placeholder: 搜索...
文章置顶 (pinned posts) (click to show)

1.安装插件hexo-generator-index-pin-top。

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

2.项目配置文件_config.yml（非主题配置文件）下添加（如已有请忽略）：

1
2
3
4
index_generator:
  path: ''
  per_page: 10
  order_by: -date

详情可见hexo-generator-index-pin-top。

3.在所需置顶的文章 front-matter 头中添加top: true即可：

1
2
3
4
5
6
7
8
9
  ---
  title: Hello World
  date: 2020-03-11 14:19:04
  top: true
  tags:
  - Welcome
  categories:
  - [Welcome，欢迎]
---

4.重启服务后，可在主页文章标题看到置顶图标。

国际化 (i18n) (click to show)

现在页面部分元素支持以不同语言显示，通过修改项目配置文件_config.yml（非主题配置文件）中的language:

举几个例子：

英文：

1
language: en

中文：

1
language: zh-CN

日文：

1
language: ja

默认值为en，可选项在主题下languages语言文件中查看，修改为对应文件名即可。

主题配色切换 (click to show)

拉取最新仓库，在配置文件_config.oranges.yml中添加或修改colorSwitch字段，确保enable为true:

1
2
colorSwitch:
  enable: true

重新运行项目，页面右下角会出现切换主题模式的开关。

文章分享 (click to show)

拉取最新仓库，在配置文件_config.oranges.yml中添加或修改postShare字段，确保enable为true:

1
2
3
4
5
postShare:
  enable: true

  twitter:
    enable: true

重新运行项目，文章页面右下角会出现分享的按钮。

文章加密 (click to show)

拉取最新仓库代码，安装hexo-blog-encrypt 插件：

1
npm install --save hexo-blog-encrypt

在你要加密文章头部 Front-matter 中添加 password：

1
2
3
4
5
6
7
8
---
title: Hello World!
date: 2020-09-27 10:42:38
tags:
  - World
  - Hello
password: hello
---

更多可查看hexo-blog-encrypt

To Do List

  • 自定义导航，可灵活配置自己想要的导航✔
  • toc 文章目录展示✔
    • 优化超出屏幕部分滚动显示，并自动跟随文章内容滚动[2020.5.24]✔
  • Fancybox，支持文章内图片友好浏览✔
  • 回到页面顶部[2020.5.4]✔
  • RSS Feed[2020.5.7]✔
  • 文章页末增加 NEXT & PREV[2020.5.10]✔
  • 文章标题锚点[2020.5.3]✔
  • 评论系统[2020.5.7]✔
  • 分享功能[2021.8.22]✔
  • 文章字数统计
  • 页面访问量统计
  • Google 分析[2020.5.8]✔
  • 文章加密[2022.3.23]✔
  • 文章置顶[2020.9.1]✔
  • 全文搜索功能[2020.8.23]✔
  • 主题配色切换 [2021.7.10]✔
  • 页面平滑滚动[2020.5.4]✔
  • 主题样式可自定义配置
  • 国际化（i18n），支持多语言[2020.9.10]✔