English | 简体中文

hexo-theme-oranges

A simple hexo theme

demo

Installation

$ git clone https://github.com/PumpkinDemo/hexo-theme-orange.git themes/orange

Usage

Edit the theme field in the _config.yml file under the project root:

theme: orange

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 theme _config.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 theme _config.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 theme _config.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 theme _config.yml file:

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

catalog(contents) (click to show)

Enable catalog in the theme _config.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 theme _config.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 theme _config.yml file:

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

PREV & NEXT (click to show)

enable prevnext in the theme _config.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 theme _config.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 theme _config.yml:

colorSwitch:
  enable: true

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

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
• word count
• traffic statistics
• Google Analytics[2020.5.8]✔
• post encryption
• 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]✔

End

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

🍻

License

MIT