hexo-theme-oranges

A simple hexo theme

Installation

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

To update the theme in the future, just execute the git pull command in the theme root directory.

Usage

In order to update the theme more conveniently, it is recommended to install it by adding a Git submodule.Edit the theme field in the _config.yml file under the project root:

theme: oranges

Copy the _config.yml file in the theme folder to the blog root directory and rename it to _config.oranges.yml. Subsequent theme modification operations are performed in _config.oranges.yml.

configuration

tags page (click to show)

To add tags page:

hexo new page tags

Generate tags folder, edit the index.md file, make sure that type field is tags:

---
title: tags
date: 2019-05-03 12:03:35
type: "tags"
---

Enable tags in the _config.oranges.yml file:

navbar:
  -
    name: tags
    enable: true
    path: /tags/

categories page (click to show)

To add categories page:

hexo new page categories

Generate categories folder, edit the index.md file, make sure that type field is categories:

---
title: categories
date: 2019-05-03 12:03:35
type: "categories"
---

Enable categories in the _config.oranges.yml file:

navbar:
  -
    name: categories
    enable: true
    path: /categories/

friends page (click to show)

To add friends page:

hexo new page friends

Generate friends folder, edit the index.md file, make sure that type field is friends:

---
title: friends
date: 2019-05-03 12:03:35
type: "friends"
---

Enable friends in the _config.oranges.yml file:

navbar:
  -
    name: friends
    enable: true
    path: /friends/

about page (click to show)

To add about page:

hexo new page about

Generate about folder, edit the index.md file, make sure that type field is about:

---
title: about
date: 2019-05-03 12:03:35
type: "about"
---

Enable about in the _config.oranges.yml file:

navbar:
  -
    name: about
    enable: true
    path: /about/

catalog(contents) (click to show)

Enable catalog in the _config.oranges.yml file:

catalog:
  enable: true

RSS (click to show)

Install the hexo-generator-feed plugin:

npm install hexo-generator-feed --save

add or edit configuration in your root _config.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:

Display the RSS button on the page(currently only display in footer is supported):

footer:
  social:
    -
      name: rss
      icon: rss
      path: /atom.xml

Comments (click to show)

supported:

valine
gitalk

disqus

First, Enable Comments in the _config.oranges.yml file:

comments:
  enable: true

Then, select a comment system to use, take valine for example:

View the official tutorial to get the appId & appKey:

valine:
  enable: true
  appId: j73OlR7xxxxxPDrO-gzGzoHsz
  appKey: mhyUfuxxxxk41wc25
  placeholder: welcome!
  avatar: retro

Google Analytics (click to show)

First, view Google Analytics to get the gtagkey:

Then, enable gtag in the _config.oranges.yml file:

gtag:
  enable: true
  gtagkey: UA-xxxxxxx-x

PREV & NEXT (click to show)

enable prevnext in the _config.oranges.yml file:

prevnext:
  enable: true

lazy image loading (click to show)

Install the hexo-lazyload-image plugin:

npm install hexo-lazyload-image --save

add or edit configuration in your root _config.yml:

lazyload:
  enable: true
  onlypost: false # optional
  loadingImg: # optional eg ./images/loading.gif
  isSPA: false # optional

more hexo-lazyload-image

search (click to show)

Install hexo-generator-search plugin:

npm install hexo-generator-search --save

add or edit configuration in your root _config.yml:

search:
  path: search.xml
  field: post
  content: true

more hexo-generator-search

edit configuration in the _config.oranges.yml

  search:
    enable: true
    placeholder: 搜索...

pinned posts (click to show)

Remove default hexo-generator-index and Install the hexo-generator-index-pin-top plugin:

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

add or edit configuration in your root _config.yml:

index_generator:
  path: ''
  per_page: 10
  order_by: -date

more hexo-generator-index-pin-top

Add top: true to the top of the post you want

  ---
  title: Hello World
  date: 2020-03-11 14:19:04
  top: true
  tags:
  - Welcome
  categories:
  - [Welcome, 欢迎]
  ---

internationalization (i18n) (click to show)

You can use internationalization to present your site in different languages, add or edit configuration in your root _config.yml:

Some examples:

English:

language: en

Simplified Chinese:

language: zh-CN

Japanese:

language: ja

The default value is en，Optional in the 'languages' file under the theme。

dark mode (click to show)

Pull up the latest repository, add or edit configuration in _config.oranges.yml:

colorSwitch:
  enable: true

The toggle option appears in the bottom right corner of the page.

share (click to show)

Pull up the latest repository, add or edit configuration in _config.oranges.yml:

postShare:
  enable: true

  twitter:
    enable: true

The toggle option appears in the bottom right corner of the post page.

post encryption (click to show)

install the hexo-blog-encrypt plugin:

npm install --save hexo-blog-encrypt

add or edit Front-matter in your post:

  ---
  title: Hello World!
  date: 2020-09-27 10:42:38
  tags:
    - World
    - Hello
  password: hello
  ---

more hexo-blog-encrypt

To Do List

End

If you have any questions, please submit the Issue. Fork is welcome.

🍻

License

MIT

akiting01 / hexo-theme-oranges Goto Github PK