Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

English | ็ฎ€ไฝ“ไธญๆ–‡

hexo-theme-oranges

A simple hexo theme

demo

Installation

$ git clone https://github.com/zchengsite/hexo-theme-oranges.git themes/oranges

Usage

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

theme: oranges

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:

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.

share (click to show)

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

postShare:
  enable: true

  twitter:
    enable: true

The toggle option appears in the bottom right corner of the post 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[2021.8.22]โœ”
  • 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