NexT – Elegant and powerful theme for Hexo. Support for rich extended Hexo themes.

Website address: theme-next.js.org/

Making address github.com/next-theme/…

Prerequisites Node and Hexo have been installed

  • Install NodeJS in the operating system
  • Install Hexo using NPM:npm install hexo --save

Install the NexT

Get NexT

using npm

$ cd hexo-site
$ npm install hexo-theme-next
Copy the code

Or use Git to download (clone the entire repository into the Themes /next directory)

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
Copy the code

Or go to the NexT Release Page. Download the stable version, unzip the zip file into the Themes directory on your site, and rename the folder to next

Upgrade NexT

using npm

$ cd hexo-site
$ npm install hexo-theme-next@latest
Copy the code

using git

$ cd hexo-site
$ cd themes/next
$ git pull origin master
Copy the code

Start the NexT

Set your theme in the Hexo site configuration file (/_config.yml) :

theme: next
Copy the code

Between changing the theme and validating the theme, it is best to use Hexo Clean to clean the cache of Hexo. Then type hexo S — Debug, and you can now open http://localhost:4000 in your browser to check that the site is working properly.

The deployment of

Local Deployment Local Deployment

  1. Modify files locally. Modify the file locally
  2. Localization testing: Hexo Clean && hexo S.
  3. Deployment: hexo g-d.

Continuous Integration

You can edit files directly online, and the effect takes effect immediately.

The system starts to customize Settings

Theme config file by the following command:

# Installed through npm
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
# Installed through Git
cp theme/next/_config.yml _config.next.yml
Copy the code

The theme

To date, NexT supports four solutions. They are:

#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
Copy the code

The default NexT solution is Muse. I’ve chosen the Gemini theme.

Dark Mode Indicates the Dark Mode

You can enable dark mode by editing the topic profile to search for dark mode keywords. The theme next automatically displays dark mode if the OS preferred theme is dark. Css Blend Blend mode is used to make dark mode for all 4 schemes above, make sure your browser supports this property.

# Dark Mode
darkmode: true
Copy the code

Reading Progress

You can enable it by setting value reading_progress.enable to true in theme config file.

# Reading progress bar
reading_progress:
  enable: true
Copy the code

GitHub Banner

Next provides the Follow Me title on GitHub in the upper right corner.

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/acc8226
  title: Follow me on GitHub
Copy the code

A Bookmark bookmarks

Bookmark is a plugin that allows users to save their reading progress. Users can save their scrolling position by clicking on the bookmark icon (pictured) in the top left corner of the page. The next time they visit your blog, they can automatically restore the last scrolling position of each page.

# Bookmark Support
bookmark:
Copy the code

Return to the top

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
Copy the code