Custom Pages

Custom Page Support

Next allows users to add custom pages in menu.

In your terminal emulator, change to Hexo site dir. Use hexo new page custom_name to create a new custom_name page:

$ cd your-hexo-site
$ hexo new page custom_name

Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Settings Front-matter values and more detailed can be found in Front-matter. You can also add contents in custom_name/index.md if you like.

title: custom_name
date: 2014-12-22 12:39:04
---

Add custom_name to menu by editing theme config file, like adding about page:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
about: /about/ || user

If you want to add Tags or Categories page, please continue reading.

Adding «Tags» Page

Adding «Tags» page and show «Tags» link in menu. «Tags» page will show all tags of site. If no article has tags, this page will leave blank.
Following code shows you a example of article with tags:

title: Tags Testing Article
tags: [Testing, Another Tag]
---
title: Tags Testing Article
tags:
- Testing
- Another Tag
---

Please read Hexo's Docs of Categories & Tags to know how to add tags or categories for articles.

In your terminal emulator, change to Hexo site dir. Use hexo new page tags to create a new tags page:

$ cd your-hexo-site
$ hexo new page tags

Edit the new page and change the type to "tags", theme will show tags cloud automatically in this page. Page content looks like following:

title: Tags
date: 2014-12-22 12:39:04
type: tags
---

Add tags to menu by editing theme config file, like following:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags

If you enable any comment system for your site, comments will be shown for all posts and pages.
See «How to Disable Comments on Page» if you want to do it for pages like tags or categories.

Tagcloud

By default, NexT has setted font color and size for tagcloud in tags page.
From NexT v7.0.2 you can customize them, just set related values in theme config file:

next/_config.yml
tagcloud:
# All values below are same as default, change them by yourself
min: 12 # min font size in px
max: 30 # max font size in px
start: '#ccc' # start color (hex, rgba, hsla or color keywords)
end: '#111' # end color (hex, rgba, hsla or color keywords)
amount: 200 # amount of tags, chage it if you have more than 200 tags

Adding «Categories» Page

«Categories» page can be added in similar way as «Tags» page, only name there is difference: just need to replace tags with categories.

Adding Google Calendar Page

In your terminal emulator, change to Hexo site dir. Use hexo new page schedule to create a new schedule page:

$ cd your-hexo-site
$ hexo new page schedule

Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Settings Front-matter values and more detailed can be found in Front-matter. You can also add contents in schedule/index.md if you like.

title: Schedule
date: 2014-12-22 12:39:04
type: schedule
---

Add schedule to menu by editing theme config file:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
schedule: /schedule/ || calendar

Login to Google developers and add Google Calendar API, you will get your calendar ID and API KEY. More detailed documentation

References:

  • API Documentation: https://developers.google.com/google-apps/calendar/v3/reference/events/list
  • To get api_key: https://console.developers.google.com
  • Create & manage a public Google calendar: https://support.google.com/calendar/answer/37083

You can enable it by setting values in calendar part. Copy the value of calendar ID and API KEY in theme config file.

next/_config.yml
calendar:
calendar_id: <required>
api_key: <required>
orderBy: startTime
offsetMax: 24
offsetMin: 4
timeZone:
showDeleted: false
singleEvents: true
maxResults: 250

Custom 404 Page

In your terminal emulator, change to the source folder of Hexo site dir. Create a new folder called 404, then create a new page in it:

$ cd your-hexo-site/source
$ mkdir 404
$ touch 404/index.md

If you would like to enable commonweal 404(A service provided by Tencent in China), Edit 404/index.md like this:

---
title: 404
date: 1970-01-01 00:00:00
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
        charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>

You can also add any content you want to it.

Add 404 to menu by editing theme config file:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
schedule: /schedule/ || calendar
commonweal: /404/ || heartbeat