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" and there is always one that suits you.
The "skapp" theme is pretty good. Next, we will 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 switched to a Linux machine for the operation
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?
Above, we directly clone the hexo-theme-skapp repository to themes/skapp, which includes the .git folder. Git recognizes it as a submodule, but it does not create a link to the original hexo-theme-skapp repository. It is just a regular folder. When we clone our own blog repository to our local machine, we will find that themes/skapp is just an empty folder 😧, and the theme is missing.
So, can we directly pull the theme repository when performing the clone operation, without hosting the source code of the theme 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 in 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 current version of the imported submodule:
When we clone the blog repository elsewhere using git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git, we find that themes/skapp is an empty folder, which means that 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 this 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 configuration, you can refer to the "skapp official documentation". You can set: menus, blog information, contact information, external links, etc.
Header background image (random image)
We use the https://api.spencerwoo.com interface provided by "Spencer Woo" to get different random images. Set it in _config.yml:
## Header background image
header_cover: https://api.spencerwoo.com
Enable "Busuanzi Statistics"
The skapp theme has integrated the "Busuanzi Statistics", but it is disabled by default. Just enable it in _config.yml:
# Busuanzi
busuanzi: true
Feel free to visit my blog https://y0ngb1n.github.io/ 👋
Customizing Styles#
To be continued...