Awesome

English | 简体中文

hexo-theme-oranges

A simple hexo theme

demo

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

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/

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/

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/

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/

Enable catalog in the _config.oranges.yml file:

catalog:
  enable: true

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

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
  

First, view Google Analytics to get the gtagkey:

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

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

enable prevnext in the _config.oranges.yml file:

prevnext:
  enable: true

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

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: 搜索...

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, 欢迎]
  ---

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。

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.

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.

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

• Custom navigation✔
• post directories✔
  • the directory follows the article scroll[2020.5.24]✔
• Fancybox✔
• back to top[2020.5.4]✔
• RSS Feed[2020.5.7]✔
• NEXT & PREV[2020.5.10]✔
• H1 - h6 anchor[2020.5.3]✔
• comments[2020.5.7]✔
• share[2021.8.22]✔
• word count
• traffic statistics
• Google Analytics[2020.5.8]✔
• post encryption[2022.3.23]✔
• pinned posts[2020.9.1]✔
• search[2020.8.23]✔
• dark mode [2021.7.10]✔
• smooth scrolling[2020.5.4]✔
• theme styles are customizable
• Internationalization (i18n), multilanguage support[2020.9.10]✔
• code copy [2022.5.10]✔

End

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

🍻

License

MIT