Butterfly document - Theme Configuration Part 2

Math

1
2
3

mathjax:
  enable: true
  per_page: false

1
2
3
4
5
6

katex:
  enable: true
  # true means katex.js is loaded on every page
  # false means it is loaded on demand, and you need to add katex: true in the Markdown Front-matter of the article to load KaTeX service for that specific article.
  per_page: false
  hide_scrollbar: true

1
2
3
4
5

npm un hexo-renderer-marked --save # Uninstall this if you have it
npm un hexo-renderer-kramed --save # Uninstall this if you have it

npm i hexo-renderer-markdown-it --save # Install this renderer plugin
npm install katex @renbaoshuo/markdown-it-katex # Install this katex plugin

1
2
3

markdown:
    plugins:
      - '@renbaoshuo/markdown-it-katex'

1
2
3
4
5
6
7
8
9

# Replace `hexo-renderer-kramed` or `hexo-renderer-marked`, etc., the markdown renderer of Hexo that you can find in your package.json, and uninstall it.
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save

# Then install `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

1
2
3
4
5
6
7

markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

Search

1
2
3
4

algolia_search:
  enable: true
  hits:
    per_page: 6

1
2
3
4
5
6
7
8
9
10

# Local search
local_search:
  enable: false
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape HTML strings to the readable one.
  unescape: false
  CDN:

1
2
3
4
5
6

docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:

Share

You can only choose one sharing service provider.

1
2
3

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  # Choose the platforms you want to display

1
2
3

addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

Comments

General SettingsDisqusDisqusjslivere (LaiBili)GitalkValineWalineUtterancesFacebook CommentsTwikooGiscusremark42artalk

Starting from version 3.0.0, to enable comments, you need to fill in the desired comment system in comments-use.

Support for dual comment display, just configure two comment systems (the first one will be shown as default).

1 2 3 4 5 6 7 8 9 10

comments: # Up to two comments system, the first will be shown as default # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo use: Valine,Disqus text: true # Display the comment name next to the button # lazyload: The comment system will be loaded when the comment element enters the browser's viewport. # If you set it to true, the comment count will be invalid lazyload: true count: true # Display comment count in top_img card_post_count: false # Display comment count on the Home Page

Parameter	Explanation
use	Comment systems to use (Please note that up to two are supported, leave it empty if not needed) Note: Dual comments cannot be Disqus and Disqusjs together, as they share the same ID and will result in an error.
text	Whether to display the name of the comment service provider
lazyload	Whether to enable lazy load for comments. When enabled, the comment resources will only be loaded when scrolling to the comment section. (With lazyload enabled, the comment count will not be displayed.)
count	Whether to display the comment count at the top of the article Livere, Giscus, and Utterances do not support displaying comment count.
card_post_count	Whether to display the comment count on the home page article cards Gitalk, Livere, Giscus, and Utterances do not support displaying comment count.

Single Comment

![image-20200731172506907](https://jsd.012700.xyz/gh/j

erryc127/CDN/img/hexo-theme-butterfly-docs-single-comments.png)

Dual Comments

Display Text

Hide Text

Register Disqus and configure your own Disqus account.

Modify the theme configuration file:

1 2	disqus: shortname:

Since Disqus cannot be accessed in mainland China, you can use Disqusjs to display comments when Disqus is inaccessible. For more details, you can refer to Disqusjs.

Modify the theme configuration file:

1 2 3 4

disqusjs: shortname: apikey: option:

When unable to access Disqus, it will be shown as:

Register LaiBili and configure your own LaiBili settings.

Modify the theme configuration file:

1 2	livere: uid:

You can find the LaiBili UID here:

Follow the instructions on gitalk to obtain your GitHub OAuth application's client ID and secret values. Also, check out its related configuration instructions.

Then, modify the theme configuration file:

1 2 3 4 5 6 7

gitalk: client_id: client_secret: repo: owner: admin: option:

Follow the instructions on Valine to configure your LeanCloud application and view the corresponding configuration explanations.

Then, modify the theme configuration file:

1 2 3 4 5 6 7 8

valine: appId: # leancloud application app id appKey: # leancloud application app key avatar: monsterid # gravatar style https://valine.js.org/#/avatar serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) bg: # valine background visitor: false option:

After enabling "visitor," the number of visitors on the article page will be provided by Valine instead of busuanzi.

Starting from Valine v1.4.5, custom emojis are supported. If you need to configure them yourself, create a JSON file named valine.json in the Hexo working directory under source/_data/, which is equivalent to the configuration emojiMaps required by Valine. The valine.json configuration can be done as follows:

valine.json

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

{ "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png", "tv_親親": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png", "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png", "tv_再見": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png", "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png", "tv_發怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png", "tv_發財": "34db290afd2963723c6eb3c4560667db7253a21a.png", "tv_可愛": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png", "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png", "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png", "tv_嘔吐": "9f996894a39e282ccf5e66856af49483f81870f3.png", "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png", "tv_壞笑": "1f0b87f731a671079842116e0991c91c2c88645a.png", "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png", "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png", "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png", "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png", "tv_尷尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png", "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png", "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png", "tv_驚嚇": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png" }

default_avatar

Parameter	Effect
Empty (default)
mp
identicon
monsterid
wavatar
retro
robohash
blank
404

Waline is a comment system derived from Valine with a backend.

you can see more detail in Waline Document

To configure it, update your theme configuration file as follows:

1 2 3 4 5

waline: serverURL: # Waline server address url bg: # Waline background pageview: false option:

After enabling pageview, the number of visitors on your article pages will be provided by Waline instead of Busuanzi

Utterances is a comment tool based on GitHub issues. It requires fewer permissions compared to Gitalk.
you can see more detail in Utterances.

To configure it, update your theme configuration file as follows:

1 2 3 4 5 6 7

utterances: repo: # Optional: pathname/url/title/og:title issue_term: pathname # Optional: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark light_theme: github-light dark_theme: photon-dark

Facebook Comments is a comment plugin provided by Facebook, which requires users to log in to Facebook to leave comments.
To configure it, update your theme configuration file as follows:

1 2 3 4 5 6 7 8

# Facebook Comments Plugin # https://developers.facebook.com/docs/plugins/comments/ facebook_comments: app_id: user_id: # optional pageSize: 10 # The number of comments to show order_by: social # social/time/reverse_time lang: en_US # Language en_US/zh_CN/zh_TW and so on

Twikoo is a simple, secure, and backend-free static website comment system, please refer to the Twikoo documentation.

You only need to fill in the obtained envId in the configuration file:

1 2 3 4 5

twikoo: envId: region: visitor: false option:

Parameter	Description
envId	Environment ID
region	Environment region, default is ap-shanghai. If your environment region is not Shanghai, pass this parameter.
visitor	Whether to display article page views.
option	Optional configuration.

After enabling visitor, the number of visitors on your article pages will be provided by Twikoo instead of Busuanzi.

Giscus is a comment system based on GitHub Discussions.

1 2 3 4 5 6 7 8 9 10

# Giscus # https://giscus.app/ giscus: repo: repo_id: category_id: theme: light: light dark: dark option:

Please refer to the Giscus documentation for specific configuration details.

remark42 is a comment system that only supports self-hosting. For deployment instructions, please check Installation | Remark42:

1 2 3 4

remark42: host: # Your Host URL siteId: # Your Site ID option:

artalk is a comment system that only supports self-hosting. For deployment instructions, please check Artalk | Self-Hosted Comment System.

1 2 3 4 5

artalk: server: site: visitor: false option:

Online Chat

Starting from version 3.0, the Butterfly theme comes with built-in support for various online chat tools. You can choose to enable one to facilitate communication with your visitors.

1
2
3

# Chat Button [recommend]
# It will create a button in the bottom right corner of the website and hide the original button.
chat_btn: true

1
2

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down.
chat_hide_show: true

1
2
3
4
5

# chatra
# https://chatra.io/
chatra:
  enable: true
  id: xxxxxxxx

1
2
3
4
5

# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key: XXXX

1
2
3
4
5

# daovoice
# http://daovoice.io/
daovoice:
  enable: true
  app_id: xxxxx

1
2
3
4
5

# crisp
# https://crisp.chat/en/
crisp:
  enable: false
  website_id: xxxxxxxx

1
2
3
4

messenger:
  enable: false
  pageID: xxxxx
  lang: zh_TW # Language en_US/zh_CN/zh_TW, and so on

Analytics

1

baidu_analytics: Your tracking code

1

google_analytics: Your tracking code (usually starts with `UA-`)

1
2
3

# Cloudflare Analytics
# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics: Your token

1
2
3

# Microsoft Clarity
# https://clarity.microsoft.com/
microsoft_clarity: Your ID

Advertisements

1
2
3
4
5
6

google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: Your_Publisher_ID
  enable_page_level_ads: true

1
2
3
4

ad:
  index: '<!-- Your advertisement code for homepage posts -->'
  aside: '<!-- Your advertisement code for aside announcement -->'
  post: '<!-- Your advertisement code for article page -->'

1

index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>

Website Verification

If you need to have your website indexed by search engines, you may need to log in to the corresponding search engine's management platform and submit your website for verification.
Each search engine will provide you with a verification code that you need to add to your website.

Modify your theme configuration file:

1
2
3
4
5

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

Beautification/Effects

Custom Theme Colors

You can customize most of the UI colors in the theme.

To make changes, modify the theme configuration file as follows:

Color values must be wrapped in double quotes, like "#000", not #000. Otherwise, it will cause an error during the build process!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"

Home Page Top Image Display Size

By default, the top image is displayed in full-screen mode, and the site-info area is centered.

1
2
3
4
5

# Main Page Settings
# Default top_img is full-screen, and the site_info is in the middle
# Use default settings if you don't want to change (recommended)
index_site_info_top: # Distance between the main title and the top (e.g., 300px/300em/300rem/10%)
index_top_img_height:  # Height of the top image on the main page (e.g., 300px/300em/300rem). Percentage values are not allowed.

You can set index_top_img_height to specify the height of the top image. If you leave both settings blank, the default values will be used.

For example:

1

index_top_img_height: 400px

This will change the top image height to 400 pixels.

Text Alignment Justification

You can set the text to be aligned on both sides, except for the last line.

1
2

# Stretches the lines so that each line has equal width（文字向兩側對齊，對最後一行無效）
text_align_justify: true

text_align_justify: false

text_align_justify: true

Website Background

By default, the website background color is white. You can set it to display an image or a custom color.

Modify the theme configuration file:

1
2
3
4

# Image format: url(http://xxxxxx.com/xxx.jpg)
# Color format: (HEX value/RGB value/color word/gradient color)
# Leave it blank to display no background.
background:

Note: If your website's root directory is not '/', you need to include your root directory path when using local images. For example, if your website is https://yoursite.com/blog and you want to reference an image located at img/xx.png, you should set background as url(/blog/img/xx.png).

background:'#49B202'

background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

Footer Background

You can customize the background of the footer section.

Modify the theme configuration file:

1
2

# Whether to display an image background for the footer (same as top_img)
footer_bg: true

true

Typewriter Effect

You can add a typewriter effect to your website using the activate-power-mode library.

Modify the theme configuration file:

1
2
3
4
5
6
7

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

Background Effects

1
2
3
4
5
6
7

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  # Set to true if you want to change ribbon on each click
  mobile: false # false to disable on mobile devices, true to enable

1
2
3

canvas_fluttering_ribbon:
  enable: true
  mobile: false # false to disable on mobile devices, true to enable

1
2
3
4
5
6
7

canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false # false to disable on mobile devices, true to enable

Click Effects

1
2
3
4

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

1
2
3
4

# Click to show hearts
click_heart:
  enable: true
  mobile: false

1
2
3
4
5
6
7
8
9
10

# Click to show text, you can modify the text as you like
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false # Show text randomly
  mobile: false

Page Beautification

Changes the styles of ol, ul, h1-h5 elements.

The field configuration specifies where the beautification should be applied:

• post: Only applies to the article pages.
• site: Applies to the entire site.

Modify the theme configuration file.

1
2
3
4
5
6

# Page beautification
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon should be filled with the Unicode of the desired Font Awesome icon.

Without beautification

With beautification

Custom Fonts and Font Sizes

Global Font

You can set the font-family for the entire website.
If you don't need to configure this, leave it blank.

Modify the theme configuration file:

1
2
3
4
5
6
7

# Global font settings
# Don't modify the following settings unless you know how they work
font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

Blog Title Font

You can set the font-family for the blog title.
If you don't need to configure this or don't want to use a web font, leave font_link blank.

Modify the theme configuration file:

1
2
3
4
5

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

Website Subtitle

You can set a subtitle or your favorite motto to be displayed on the homepage.

Modify the theme configuration file as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Website Subtitle
subtitle:
  enable: false
  # Typewriter Effect
  effect: true
  startDelay: 300 # time before typing starts in milliseconds
  typeSpeed: 150 # type speed in milliseconds
  backSpeed: 50 # backspacing speed in milliseconds
  # loop
  loop: true
  # source (Use a third-party service)
  # source: false - Disable using a third-party service
  # source: 1 - Use hitokoto.cn (Simplified Chinese) https://hitokoto.cn/
  # source: 2 - Use yijuzhan.com (Simplified Chinese) http://yijuzhan.com/
  # source: 3 - Use jinrishici.com (Simplified Chinese) https://www.jinrishici.com/
  # The subtitle will first display the content from the chosen source (if any), and then show the content in the 'sub' field.
  source: false
  # If the typewriter effect is disabled, only the first line of 'sub' will be displayed as the subtitle.
  sub:
    - 今日事,今日畢
    - Never put off till tomorrow what you can do today

Page Loading Animation (Preloader)

When visitors enter your website, slow loading speed may cause the top_img image to appear fragmented or incomplete, leading to waiting times. By enabling the preloader, a loading animation will be displayed, and the animation will disappear once the page has finished loading.

The Butterfly theme supports Pace.js for providing the loading animation. You can learn more about Pace.js here.

Configure butterfly.yml as follows:

1
2
3
4
5
6
7
8
9

# 加載動畫 Loading Animation
preloader:
  enable: false
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

fullpage-loading

Word Count

To add the word count feature to your Butterfly theme, you need to follow these steps:

1. Open your hexo directory.

2. Install the hexo-wordcount plugin by running the following command:

   1	npm install hexo-wordcount --save

   or

   1	yarn add hexo-wordcount

3. Modify the theme configuration file:

1
2
3
4
5

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

Lightbox Plugins

1
2

# fancybox http://fancyapps.com/fancybox/3/
fancybox: true

1

medium_zoom: true

Pjax

When users click on links, Pjax updates only the parts of the page that need to be changed through AJAX, and then uses HTML5's pushState to modify the browser's URL address. This approach avoids reloading the same resources (CSS/JS) repeatedly, thereby improving the loading speed of the web page.

1
2
3
4
5
6
7

# Pjax
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

Snackbar pop-up

Enable Snackbar pop-up and customize its settings

In the theme configuration file

1
2
3
4
5
6
7
8
9

# Snackbar 彈窗
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' # background color for light mode
  bg_dark: '#2d3035' # background color for dark mode

Disable snackbar

Enable snackbar

Instantpage

To enable Instantpage, which prefetches links when the mouse hovers over them for more than 65 milliseconds to improve loading speed, set instantpage to true to enable the feature.

In the theme configuration file

1
2
3

# https://instant.page/
# prefetch (預加載)
instantpage: true

Pangu

To enable the Pangu plugin, which automatically inserts a space between Chinese characters and English characters, follow these steps to modify the configuration file:

1. Open your Hexo theme configuration file.

2. Locate the pangu section and set enable to true to enable the plugin:

1
2
3
4
5

# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
  enable: true
  field: post # site/post

The field parameter only supports two values: post (only effective on the article page) and site (effective site-wide). Choose the appropriate value based on where you want the plugin to work. If you want it to work only on the article pages, set it to post; if you want it to work on the entire site, set it to site.

PWA

To add Progressive Web App (PWA) features to your Butterfly theme, you need to follow these steps:

1. Open your Hexo directory.

2. Install the hexo-offline plugin using either npm or yarn:

   1 2 3

   npm install hexo-offline --save # or yarn add hexo-offline

3. Create a hexo-offline.config.cjs file in the root directory and add the following content:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   // offline config passed to workbox-build. module.exports = { globPatterns: ['**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}'], // Static file collection. If your site uses file types like webp, add them here. globDirectory: 'public', swDest: 'public/service-worker.js', maximumFileSizeToCacheInBytes: 10485760, // Cache maximum file size in bytes. skipWaiting: true, clientsClaim: true, runtimeCaching: [ // If you need to load CDN resources, configure this option. If not, you can skip this. // CDNs - should be CacheFirst, since they should be used specific versions so should not change { urlPattern: /^https:\/\/cdn\.example\.com\/.*/, // Replace with your URL handler: 'CacheFirst' } ] }

   For more details, refer to the official documentation of hexo-offline.

4. In the theme configuration file, enable the PWA option:

   1 2 3 4 5 6 7

   pwa: enable: true manifest: /img/pwa/manifest.json apple_touch_icon: /img/pwa/apple-touch-icon.png favicon_32_32: /img/pwa/32.png favicon_16_16: /img/pwa/16.png mask_icon: /img/pwa/safari-pinned-tab.svg

5. Create a manifest.json file in the source/ directory:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

   { "name": "string", "short_name": "Junzhou", "theme_color": "#49b1f5", "background_color": "#49b1f5", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "images/pwaicons/36.png", "sizes": "36x36", "type": "image/png" }, { "src": "images/pwaicons/48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/pwaicons/72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/pwaicons/96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/pwaicons/144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/pwaicons/192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/pwaicons/512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }

   You can also quickly generate a manifest.json using Web App Manifest. (Web App Manifest requires at least one 512x512 pixel icon.)

6. To check if the PWA configuration is working correctly, you can use the Lighthouse Chrome plugin:

   • Open your blog page.
   • Launch the Lighthouse plugin (the plugin requires at least one 512x512 pixel icon).

For more information about Progressive Web Apps (PWA) and details on how to implement them, please refer to Google Tools for Web Developers.

Open Graph

To add Open Graph meta data to the <head> section of your website, including information such as thumbnail image, title, time, and more, you can modify your theme configuration file as follows:

1
2
3
4
5
6
7
8
9
10
11
12

# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

CSS Prefix

The css_prefix option is used to automatically add vendor prefixes to certain CSS properties to ensure compatibility with different browsers. Enabling this option will increase the CSS file size by approximately 20%.

To enable the css_prefix option, modify your theme configuration file as follows:

1
2

# Add the vendor prefixes to ensure compatibility
css_prefix: true

Inject

Supported in version 2.3.0 and above

It allows you to add additional JavaScript, CSS, meta tags, and other content to your website. You can add these elements either to the head (before the closing </body> tag) or to the bottom (before the closing </html> tag). Please ensure that you add content in standard HTML format.

For example, to add custom CSS and a JavaScript file, you can use the following configuration in your theme configuration file:

1
2
3
4
5

inject:
  head:
    - <link rel="stylesheet" href="/self.css">
  bottom:
    - <script src="xxxx"></script>

Please note: If your website's root directory is not '/', and you are using local images, you need to add your root directory path. For instance, if your website is https://yoursite.com/blog, and you want to reference css/xx.css, then you should set it as <link rel="stylesheet" href="/blog/css/xx.css">.

CDN

The last part of the configuration file is the CDN (Content Delivery Network) section. It contains links to the files that the theme references.
You can customize the CDN settings, but it's essential to ensure that the links are accessible after configuration.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: jsdelivr

  # Add version number to CDN, true or false  
  version: false

  # Custom format
  # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format:

  option:
    # abcjs_basic_js:
    # activate_power_mode:
    # algolia_js:
    # algolia_search:
    # aplayer_css:
    # aplayer_js:
    # artalk_css:
    # artalk_js:
    # blueimp_md5:
    # busuanzi:
    # canvas_fluttering_ribbon:
    # canvas_nest:
    # canvas_ribbon:
    # click_heart:
    # ClickShowText:
    # disqusjs:
    # disqusjs_css:
    # docsearch_css:
    # docsearch_js:
    # egjs_infinitegrid:
    # fancybox:
    # fancybox_css:
    # fireworks:
    # fontawesome:
    # gitalk:
    # gitalk_css:
    # giscus:
    # instantpage:
    # instantsearch:
    # katex:
    # katex_copytex:
    # lazyload:
    # local_search:
    # main:
    # main_css:
    # mathjax:
    # medium_zoom:
    # mermaid:
    # meting_js:
    # pangu:
    # prismjs_autoloader:
    # prismjs_js:
    # prismjs_lineNumber_js:
    # pjax:
    # sharejs:
    # sharejs_css:
    # snackbar:
    # snackbar_css:
    # translate:
    # twikoo:
    # typed:
    # utils:
    # valine:
    # waline_css:
    # waline_js:

version

Version

If you want to modify the version number, you can do so in the 'plugins.yml' file located in the theme directory. Find the corresponding plugin and update its version number.

However, please ensure that the version number you choose is supported and available on the CDN you are using. CDN providers may not always have the latest version of a plugin immediately, so it's essential to check if your selected version is available before making the change. Using an unsupported version may lead to issues with loading the plugin or cause other compatibility problems.

custom_format

Here are the parameters and their explanations for customizing the CDN:

Here are some of the available third-party CDN providers:

Please ensure that the CDN you choose has the necessary third-party plugins used by your theme.