Hexo Blog Themes#
Not satisfied with the default theme in Hexo? Want to change it?
Actually, changing the theme in Hexo is quite simple. Hexo provides a plug-and-play theme mechanism that allows us to easily switch blog themes.
You can choose any theme you like from the "official theme collection" - there's always one that suits you.
The "skapp" theme is pretty good. Next, let's follow the instructions on the theme's official website to install and use it.
Installing the Theme (skapp)#
Quickly set up the node.js v8.9.3 environment using Docker
docker run -it --name node8 --rm \
-v $(pwd):/app -w /app \
-p 4000:4000 \
node:8.9.3 /bin/bash
Various errors occurred on Windows, so I had to switch to a Linux machine
cd blog
# Clone the skapp theme to the themes/skapp folder
git clone https://github.com/Mrminfive/hexo-theme-skapp.git themes/skapp
# Install the dependencies specified by the skapp theme
# As of December 19, 2018, there is a small pitfall: you need to use node.js v8.9.3 to install these dependencies properly, because lunr is still using nodejieba 2.2.5
npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign
hexo clean
hexo server
🚩 Can we use
Git Submoduleto manage third-party themes?
By directly cloning the hexo-theme-skapp repository into themes/skapp, including the .git folder, Git recognizes it as a submodule. However, it does not create a link to the original hexo-theme-skapp repository, and it is just an ordinary folder. When we clone our own blog repository to our local machine, we find that themes/skapp is just an empty folder 😧, and the theme is missing.
So, can we directly fetch the theme repository when performing the clone operation, without hosting the theme's source code in our own repository? Yes, this is where git submodule comes in 👍.
# Unstage the themes/skapp directory first
git rm -r themes/skapp
# Add the submodule
git submodule add [email protected]:Mrminfive/hexo-theme-skapp.git themes/skapp
# You can see the newly added .gitmodules file
git status
.gitmodules describes the remote repository information of the submodule and its relative path to this repository:
[submodule "themes/skapp"]
path = themes/skapp
url = [email protected]:Mrminfive/hexo-theme-skapp.git
The .git/config file also automatically adds submodule information:
[submodule "themes/skapp"]
url = [email protected]:Mrminfive/hexo-theme-skapp.git
active = true
And a .git/modules folder is created, finally commit and push to the remote repository of the blog:
git commit -m 'chore: convert to skapp submodule'
git push
The GitHub repository will display the version of the submodule currently being used:
When we clone the repository elsewhere using git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git, we find that themes/skapp is an empty folder, which means the theme is not installed. So how do we clone a complete repository? Just follow these steps:
# Method 1: Use submodule init / update
git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git blog && cd blog
git submodule init && git submodule update
# Method 2: Add the --recursive parameter
git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git --recursive
When the third-party theme is updated, we can update the submodule:
git submodule update --remote themes/skapp
Or, switch to the themes/skapp directory and use git commands to switch to different historical versions. If you have performed any operations on the submodule, it will prompt modified: themes/skapp (new commits):
$ git status
On branch source
Your branch is up to date with 'origin/source'.
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: themes/skapp (new commits)
Then, proceed with the normal process of committing and pushing to the remote repository.
Theme Configuration#
For theme-related configurations, you can refer to the "skapp official documentation". You can set menus, blog information, contact information, external links, and more.
Header background image (random image)
Using the https://api.spencerwoo.com API provided by "Spencer Woo", you can get random images. Set it in _config.yml:
## Header background image
header_cover: https://api.spencerwoo.com
Enable "Busuanzi Statistics"
The skapp theme already integrates "Busuanzi Statistics", but it is disabled by default. Just enable it in _config.yml:
# Busuanzi
busuanzi: true
Feel free to visit my blog at https://y0ngb1n.github.io/ 👋
Customizing Styles#
To be continued...