Extend Configuration
Footer
# Bottom row of icons
information:
left: # Left side icons
Github: https://github.com/efuo || st-github-line # Name: link || icon
Mail: mailto:o@efu.me || st-mail-line
right: # Right side icons
Bilibili: https://space.bilibili.com/1329819902 || st-bilibili-line
Douyin: https://v.douyin.com/iJsLc8jt/ || st-douyin-fill
# Bottom navigation bar
group: # From left to right
Navigation:
Archives: /archives/
Categories: /categories/
Tags: /tags/
Services:
Alibaba Cloud: https://aliyun.com/
51la Statistics: https://v6.51.la/
Baidu Statistics: https://tongji.baidu.com/
Support:
Donation Records: /about/
Agreements:
Cookies: /cookies/
User Agreement: /privacy/
Copyright Agreement: /copyright/
# Random links at the bottom
# tip: The links here are displayed randomly, not fixed
# warning: links must be configured before opening
randomlink: false
# Privacy assistant right pop-up window, fill in the path to open
privacy: # /privacy/
# Copyright
license: # /license/
# Footer right link, such as: ICP filing number, public security filing number, etc.
links:
# In order for the theme to get more support, it is recommended to keep the theme link
- name: Theme
url: https://github.com/everfu/hexo-theme-solitude
- name: Subscribe
url: /atom.xml
Advice
I hope you can keep the theme link. I once thought about embedding it, but it didn't feel right, so I chose this way. I still hope you can support my work.
404 Page
Custom 404 page
# 404 page
errorpage:
# Image
img: https://7.isyangs.cn/1/65eb24f94fcbd-1.gif
# Text
text: =awa= Page not found
# Recommended article list
recommendList: true
Music Capsule
Music player displayed in the lower left corner, fill in the corresponding playlist id and service provider according to the annotations.
# Music capsule
capsule:
enable: false
id: 8407304077 # playlist id
server: netease # Music service provider. netease: Netease Cloud / tencent: Tencent / kugou: Kugou / xiaomi: Xiaomi / baidu: Baidu
type: playlist # Type of playlist. song: Single / playlist: Playlist / album: Album / artist: Singer
Note
QQ Music has changed its interface and cannot be played.
Quick Menu
keyboard:
enable: false # Whether to enable keyboard control
list:
# name: Key name
# key: Key
# func: Function
# sco: sco built-in method
# url: Jump link
# - name: Disable shortcut function
# key: K
# func: keyboard
# - name: Open console
# key: A
# sco: showConsole
# - name: Play/Pause music
# key: M
# sco: musicToggle
# - name: Open friendly links
# key: L
# url: /links/
Console Extension
# Console extension: Latest comments + Tags + Articles
console_plus: false
Lazy Loading
After enabling lazy loading, images will be loaded when they enter the visible area, which can reduce the webpage size and improve webpage loading speed.
# Lazy loading
lazyload:
enable: false
# Loading display image
placeholder: /img/loading.gif
# Loading failed display image
errorimg: /img/error_load.png
Loading Animation
A page overlay will be displayed during page loading and disappear when loading is complete.
# Loading animation
loading:
# Global loading animation
fullpage: false
# Top loading capsule
pace: true
Code Highlight
After enabling code highlighting, code blocks will have corresponding language prompts, but it will increase the webpage size. If you don't need this feature, you can disable it.
# Enhanced code highlight
highlight:
enable: true
limit: 200 # Code line limit
copy: true # Whether to enable the copy button
expand: true # Whether to expand by default
# Code block style
theme: default # default: Default / mac: Apple terminal
# Code color
color: default # default: Default / vscode / solarized-dark / solarized-light / dracula / monokai
Image Lightbox
Choose between fancybox and mediumZoom. Fancybox must be disabled to enable mediumZoom.
# image lightbox
lightbox: true # Whether to enable image lightbox
# fancybox
# https://fancyapps.com/fancybox/
fancybox: true
# mediumZoom
mediumZoom: false
Open Graph
When enabled, the website will automatically add Open Graph tags for social sharing.
# Open Graph
# https://ogp.me/
# https://developers.facebook.com/docs/sharing/webmasters/
Opengraph:
enable: false
options:
# twitter_card:
# twitter_image:
# twitter_id:
# twitter_site:
# google_plus:
# fb_admins:
# fb_app_id:
Word Count
Requires installation of
hexo-wordcount
plugin.
# Word count
wordcount: false
Busuanzi
# Access statistics
busuanzi: false
Math Formula
Please refer to the author's article: Theme: Renderer markdown-it
The theme supports the use of Latex math formulas. When you need to use math formulas, add them to the Front-Matter of the article.
Site Verification
# Site verification
verify_site:
# - name: google-site-verification
# content: xxxxxx
# - name: baidu-site-verification
# content: xxxxxxx
CSS Prefix
# CSS prefix
css_prefix: false
Inject
# Insert code before </head> and before </body>
extends:
head: # Insert in head
# - <script src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js"></script>
body: # Insert in body
PWA
PWA stands for Progressive Web App, which aims to achieve a user experience similar to native apps through various web technologies. By using existing web technologies, such as offline caching and immersive experiences, PWA can bridge the gap between web applications and native applications.
SWPP Official Documentation & Project Address
Install the plugin
bashnpm install hexo-swpp swpp-backends --save
Enable theme configuration
yaml# PWA pwa: enable: false manifest: /manifest.json # path to manifest.json file theme_color: "#006a73" # theme color mask_icon: /img/pwa/favicon.ico # mask icon apple_touch_icon: /img/pwa/favicon.ico # apple touch icon bookmark_icon: /img/pwa/favicon.ico # bookmark icon favicon_32_32: /img/pwa/favicon_32.ico # 32x32 icon favicon_16_16: /img/pwa/favicon_16.ico # 16x16 icon
Create a
sw-rules.js
file in the root directory and add the following content.Provide an SWPP file
js// SWPP configuration module.exports.config = { serviceWorker: { escape: 0, cacheName: 'SolitudeCache', debug: false, }, register: { onsuccess: undefined, onerror: () => console.error('Service Worker registration failed! It may be because your browser does not support this feature!'), builder: (root, framework, pluginConfig) => { const { onerror, onsuccess } = pluginConfig.register; return ` <script> (() => { const sw = navigator.serviceWorker; const error = ${onerror && onerror.toString()}; if (!sw?.register('${new URL(root).pathname}sw.js') ${onsuccess ? `?.then(${onsuccess.toString()})` : ""} ?.catch(error) ) error() })() </script>`; }, }, dom: { onsuccess: () => { caches .match(location.href) .then((res) => { if (res) res.json().then((json) => { utils && utils.snackbarShow( `Cache refreshed, updated to the latest content of version ${json.global + '.' + json.local}`, false, 2000 ); }); else console.info('Cache not found'); }) .catch((error) => console.error('Cache matching error', error)); }, }, json: { maxHtml: 15, charLimit: 1024, merge: [], exclude: { localhost: [], other: [], }, }, external: { timeout: 5000, concurrencyLimit: 100, js: [], stable: [ /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/, /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/, /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/, ], replacer: (srcUrl) => { if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) { const pathname = new URL(srcUrl).pathname; return [ srcUrl, `https://cdn.cbd.int/${pathname}`, `https://npm.elemecdn.com/${pathname}`, `https://fastly.jsdelivr.net/npm/${pathname}`, ]; } else { return srcUrl; } }, }, }; // Cache rules module.exports.cacheRules = { simple: { clean: true, search: false, match: (url, $eject) => url.host === $eject.domain && ['/404.html'].includes(url.pathname), }, cdn: { clean: true, match: (url) => [ 'cdn.cbd.int', 'lf26-cdn-tos.bytecdntp.com', 'lf6-cdn-tos.bytecdntp.com', 'lf3-cdn-tos.bytecdntp.com', 'lf9-cdn-tos.bytecdntp.com', 'cdn.staticfile.org', 'npm.elemecdn.com', ].includes(url.host) && url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/), }, }; module.exports.getSpareUrls = (srcUrl) => { if (srcUrl.startsWith('https://npm.elemecdn.com')) { return { timeout: 3000, list: [ srcUrl, `https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`, ], }; } }; module.exports.ejectValues = (hexo, rules) => { return { domain: { prefix: 'const', value: new URL(hexo.config.url).host, }, }; }; module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") || request.url.startsWith('https://meting.qjqq.cn') || request.url.startsWith('https://api.i-meto.com');
Create a
manifest.json
file in thesource
folder and add the following content. Here is an example:
{
"name": "Solitude",
"short_name": "Solitude",
"theme_color": "#0E83CD",
"background_color": "#0E83CDdd",
"description": "An elegant Hexo theme that supports lazy loading, PWA, Latex, and multiple comment systems.",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"lang": "en-US",
"id": "/",
"icons": [
{
"src": "/img/pwa/favicon_16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon_16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/pwa/favicon_32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon_32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/pwa/favicon.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable"
}
],
"splash_pages": null
}
CDN
The theme resources have been included in cdnjs, so you can use them with confidence. If you have your own CDN, you can customize the configuration.
# Don't modify the following settings unless you know how they work
CDN:
# The CDN provider of internal scripts
# option: local/jsdelivr/unpkg/cdnjs/custom
# Dev version can only choose local.
internal: local
# The CDN provider of third party scripts
# option: jsdelivr/unpkg/cdnjs/custom
third_party: cdnjs
# Add version number to url, true or false
version: true
# Custom format
# For example: https://cdn.staticfile.net/${cdnjs_name}/${version}/${min_cdnjs_file}
custom_format: https://cdn.staticfile.net/${cdnjs_name}/${version}/${min_cdnjs_file}
option:
# algolia_search:
# instantsearch:
# pjax:
# twikoo:
# waline_js:
# waline_css:
# sharejs:
# sharejs_css:
# katex:
# katex_copytex:
# lazyload:
# aplayer_css:
# aplayer_js:
# meting_js:
# pace_js:
# swiper_css:
# swiper_js:
# busuanzi_js:
# snackbar_js: