https://github.com/zchengsite/hexo-theme-oranges
🍊A simple hexo theme of minimalism
https://github.com/zchengsite/hexo-theme-oranges
hexo hexo-theme minimalism theme
Last synced: about 1 month ago
JSON representation
🍊A simple hexo theme of minimalism
- Host: GitHub
- URL: https://github.com/zchengsite/hexo-theme-oranges
- Owner: zchengsite
- License: mit
- Created: 2019-08-18T12:02:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-03T06:58:13.000Z (about 1 year ago)
- Last Synced: 2024-05-20T09:21:46.310Z (11 months ago)
- Topics: hexo, hexo-theme, minimalism, theme
- Language: JavaScript
- Homepage: https://hexo.theme.oranges.zcheng.site/
- Size: 1.22 MB
- Stars: 474
- Watchers: 4
- Forks: 78
- Open Issues: 21
-
Metadata Files:
- Readme: README-zh.md
- License: LICENSE
Awesome Lists containing this project
- awesome-hexo-themes - zchengsite/hexo-theme-oranges - theme of minimalism|56| (Content)
README
[English](https://github.com/zchengsite/hexo-theme-oranges/blob/master/README.md) | 简体中文
# hexo-theme-oranges
> 一个简单的 hexo 主题
[demo](https://hexo.theme.oranges.zcheng.site/)
## 安装
为了更为便捷的更新主题，建议使用添加 Git 子模块的方法安装，在 hexo 博客项目根目录下执行，会将`oranges`主题 clone 至`themes`文件夹下。
```bash
git submodule add https://github.com/zchengsite/hexo-theme-oranges.git themes/oranges
```
日后更新主题只需要在主题根目录执行`git pull`命令即可。
## 使用
在 hexo 博客项目根目录下找到`_config.yml`文件，修改其中`theme`字段为主题名`oranges`
```yml
theme: oranges
```
复制主题文件夹下的`_config.yml`文件到博客根目录并改名为`_config.oranges.yml`，后续修改主题操作均在`_config.oranges.yml`中进行。
## 配置
Tags page (click to show)
在 hexo 博客项目根目录下执行，在`source`文件夹下生成`tags`文件夹
```bash
hexo new page tags
```
接着修改`tags`文件夹下`index`为以下内容
```markdown
---
title: tags
date: 2019-05-03 12:03:35
type: "tags"
categories:
tags:
---
```
并在配置文件`_config.oranges.yml`修改对应`enable`为`true`，如不想展示，设置为`false`即可
```yml
navbar:
-
name: 标签
enable: true
path: /tags/
```
Friends page (click to show)
在 hexo 博客项目根目录下执行，在`source`文件夹下生成`friends`文件夹
```bash
hexo new page friends
```
接着修改`friends`文件夹下`index`为以下内容
```markdown
---
title: tags
date: 2019-05-03 12:03:35
type: "friends"
categories:
tags:
---
```
并在配置文件`_config.oranges.yml`修改对应`enable`为`true`，如不想展示，设置为`false`即可
```yml
navbar:
-
name: 朋友
enable: true
path: /friends/
```
About me page (click to show)
在 hexo 博客项目根目录下执行，在`source`文件夹下生成`about`文件夹
```bash
hexo new page about
```
接着修改`about`文件夹下`index`为以下内容
```markdown
---
title: tags
date: 2019-05-03 12:03:35
type: "about"
categories:
tags:
---
```
并在配置文件`_config.oranges.yml`修改对应`enable`为`true`，如不想展示，设置为`false`即可
```yml
navbar:
-
name: 关于我
enable: true
path: /about/
```
Categories page (click to show)
在 hexo 博客项目根目录下执行，在`source`文件夹下生成`categories`文件夹
```bash
hexo new page categories
```
接着修改`categories`文件夹下`index`为以下内容
```markdown
---
title: tags
date: 2019-05-03 12:03:35
type: "categories"
categories:
tags:
---
```
并在配置文件`_config.oranges.yml`修改对应`enable`为`true`，如不想展示，设置为`false`即可
```yml
navbar:
-
name: 分类
enable: true
path: /categories/
```
文章目录 (Catalog) (click to show)
在配置文件`_config.oranges.yml`下`catalog`修改`enable`为`true`，如不想展示，设置为`false`即可
```yml
catalog:
enable: true
```
RSS (click to show)
1.安装`hexo-generator-feed`[官方插件](https://github.com/hexojs/hexo-generator-feed)
```shell
npm install hexo-generator-feed --save
```
2.在博客项目配置文件`_config.yml`(非主题配置文件) 增加：
```yml
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`增加页脚项：
```yml
footer:
social:
-
name: rss
icon: rss
path: /atom.xml
```
评论系统 (Comment) (click to show)
1.确保配置文件`_config.oranges.yml`下`comments`->`enable: true`
2.目前支持以下几种评论插件
- [valine](https://valine.js.org/quickstart.html)
- [gitalk](https://github.com/gitalk/gitalk#usage)
- [disqus](https://disqus.com)(需科学上网)
3.如需使用，修改相应评论下`enable: true`
4.查看评论插件官方教程获取相应的字段填入即可使用
以`valine`为例，注册`valine`并获取`appId`&`appKey`填入即可使用
```yml
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](https://analytics.google.com)
注册 Google 分析账号，在管理/创建媒体资源/选择网站/填写相关信息后得到跟踪 Id，一般格式为 UA-xxxxxxx-x
如之前已有注册账号，在管理/跟踪信息/跟踪代码/找到跟踪 ID，一般格式为 UA-xxxxxxx-x
```yml
gtag:
enable: true
gtagkey: UA-xxxxxxx-x
```
PREV & NEXT (click to show)
文章末尾的上一篇与下一篇功能。
```yml
prevnext:
enable: true
```
文章图片懒加载 (Lazy image loading) (click to show)
安装插件[hexo-lazyload-image](https://github.com/Troy-Yang/hexo-lazyload-image)
```bash
npm install hexo-lazyload-image --save
```
项目配置文件`_config.yml`（非主题配置文件）下添加：
```yml
lazyload:
enable: true
onlypost: false # optional
loadingImg: # optional eg ./images/loading.gif
isSPA: false # optional
```
详情可见[hexo-lazyload-image](https://github.com/Troy-Yang/hexo-lazyload-image)
全文搜索 (search) (click to show)
1.安装插件[hexo-generator-search](https://github.com/wzpan/hexo-generator-search)
```bash
npm install hexo-generator-search --save
```
2.项目配置文件`_config.yml`（非主题配置文件）下添加：
```yml
search:
path: search.xml
field: post
content: true
```
详情可见[hexo-generator-search](https://github.com/wzpan/hexo-generator-search)
3.主题配置文件`_config.yml`下找到`search`，修改`enable`为`true`:
```yml
# 文章搜索
search:
enable: true
placeholder: 搜索...
```
文章置顶 (pinned posts) (click to show)
1.安装插件[hexo-generator-index-pin-top](https://github.com/netcan/hexo-generator-index-pin-top)。
```bash
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
```
2.项目配置文件`_config.yml`（非主题配置文件）下添加（如已有请忽略）：
```yml
index_generator:
path: ''
per_page: 10
order_by: -date
```
详情可见[hexo-generator-index-pin-top](https://github.com/netcan/hexo-generator-index-pin-top)。
3.在所需置顶的文章 front-matter 头中添加`top: true`即可：
```markdown
---
title: Hello World
date: 2020-03-11 14:19:04
top: true
tags:
- Welcome
categories:
- [Welcome，欢迎]
---
```
4.重启服务后，可在主页文章标题看到置顶图标。
国际化 (i18n) (click to show)
现在页面部分元素支持以不同语言显示，通过修改项目配置文件`_config.yml`（非主题配置文件）中的`language`:
举几个例子：
英文：
```yml
language: en
```
中文：
```yml
language: zh-CN
```
日文：
```yml
language: ja
```
默认值为`en`，可选项在主题下`languages`语言文件中查看，修改为对应文件名即可。
主题配色切换 (click to show)
拉取最新仓库，在配置文件`_config.oranges.yml`中添加或修改`colorSwitch`字段，确保`enable`为`true`:
```yml
colorSwitch:
enable: true
```
重新运行项目，页面右下角会出现切换主题模式的开关。
文章分享 (click to show)
拉取最新仓库，在配置文件`_config.oranges.yml`中添加或修改`postShare`字段，确保`enable`为`true`:
```yml
postShare:
enable: true
twitter:
enable: true
```
重新运行项目，文章页面右下角会出现分享的按钮。
文章加密 (click to show)
拉取最新仓库代码，安装[hexo-blog-encrypt](https://github.com/D0n9X1n/hexo-blog-encrypt) 插件：
```bash
npm install --save hexo-blog-encrypt
```
在你要加密文章头部 Front-matter 中添加 password：
```yml
---
title: Hello World!
date: 2020-09-27 10:42:38
tags:
- World
- Hello
password: hello
---
```
更多可查看[hexo-blog-encrypt](https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md)
## To Do List
- [x] 自定义导航，可灵活配置自己想要的导航✔
- [x] toc 文章目录展示✔
- [x] 优化超出屏幕部分滚动显示，并自动跟随文章内容滚动`[2020.5.24]`✔
- [x] Fancybox，支持文章内图片友好浏览✔
- [x] 回到页面顶部`[2020.5.4]`✔
- [x] RSS Feed`[2020.5.7]`✔
- [x] 文章页末增加 NEXT & PREV`[2020.5.10]`✔
- [x] 文章标题锚点`[2020.5.3]`✔
- [x] 评论系统`[2020.5.7]`✔
- [x] 分享功能`[2021.8.22]`✔
- [ ] 文章字数统计
- [ ] 页面访问量统计
- [x] Google 分析`[2020.5.8]`✔
- [x] 文章加密`[2022.3.23]`✔
- [x] 文章置顶`[2020.9.1]`✔
- [x] 全文搜索功能`[2020.8.23]`✔
- [x] 主题配色切换 `[2021.7.10]`✔
- [x] 页面平滑滚动`[2020.5.4]`✔
- [ ] 主题样式可自定义配置
- [x] 国际化（i18n），支持多语言`[2020.9.10]`✔
## End
有问题请提交 Issue，欢迎 Fork。
如果觉得主题还不错，请点击 Star 支持下。
🍻
## License
MIT