Update dev branch to latest version

.github/workflows/deploy-demo-page.yml

@@ -0,0 +1,74 @@
+name: Deploy Demo Page
+
+defaults:
+  run:
+    shell: bash
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}
+
+      - name: Prepare hexo demo source
+        run: |
+          mkdir demo
+          cd demo
+          git clone -b gh-source https://github.com/fi3ework/hexo-theme-archer.git .
+          npm install
+
+      - name: Move latest theme source files to hexo demo folder
+        run: |
+          cd demo
+          mkdir -p themes/archer
+          find .. -maxdepth 1 ! -path '..' ! -path '../demo' ! -path '../.git' -exec mv -t ./themes/archer/ {} +
+
+      - name: Build latest theme
+        run: |
+          cd demo/themes/archer
+          npm install
+          npm run build
+
+      - name: Generate static files
+        run: |
+          npm install -g hexo-cli
+          cd demo
+          hexo g
+          ls -lh public
+
+      - name: Publish
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/master' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./demo/public
+          force_orphan: true

README.md

@@ -4,7 +4,7 @@
 
 ## 在线预览
 
-🎯 主题预览：[Demo](https://fi3ework.github.io/archer-demo)。
+🎯 主题预览：[Demo](https://fi3ework.github.io/hexo-theme-archer)
 
 ## 文档
 
@@ -95,7 +95,7 @@ jsonContent:
 
 您可以通过 `hexo -v` 命令，或在 Hexo 根目录下的 `package.json` 中查看您当前使用的 Hexo 版本。
 
-如果 Hexo 版本 >= 5.0.0，建议复制 Archer 主题目录下的 [`_config.yml`](./_config.yml) 到 Hexo 根目录，并命名为 `_config.archer.yml`，接下来修改此文件即可对主题进行配置。现在，您可以删除 Archer 主题目录下的 `_config.yml` 文件，避免配置合并或冲突。
+如果 Hexo 版本 >= 5.0.0，建议复制 Archer 主题目录下的 [`_config.yml`](./_config.yml) 到 Hexo 根目录，并命名为 `_config.archer.yml`，接下来修改此文件即可对主题进行配置。现在，您可以删除 Archer 主题目录下的 `_config.yml` 文件，或将它重命名为 `_config.yml.template`，避免配置合并或冲突。
 
 如果 Hexo 版本 >= 2.8.2，修改 Archer 主题目录下的 `_config.yml` 文件即可对主题进行配置。
 

_config.yml

@@ -223,4 +223,4 @@ custom_font:
 # ========== Theme Dev ========== #
 # Ensure visitor to get the latest version of source.
 # Set a higher value before creating new release.
-source_version: 20210823
+source_version: 20211217

layout/_partial/base-head.ejs

@@ -33,7 +33,7 @@
     <%- partial('critical-css/critical-style') %>
     <link rel="preload" href="<%- url_for("css/style.css") %>?v=<%- theme.source_version %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="<%- url_for("css/dark.css") %>?v=<%- theme.source_version %>" as="style">
-    <link rel="stylesheet" href="<%- url_for("css/dark.css") %>" media="(prefers-color-scheme: dark)">
+    <link rel="stylesheet" href="<%- url_for("css/dark.css") %>">
     <link rel="stylesheet" href="<%- url_for("css/mobile.css") %>?v=<%- theme.source_version %>" media="(max-width: 960px)">
     <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" as="script">

layout/site-meta.ejs

@@ -1,6 +1,11 @@
 <script>
+    var siteMetaRoot = "<%- config.root %>"
+    if (siteMetaRoot === "undefined") {
+        siteMetaRoot = '/'
+    }
     var siteMeta = {
-        root: "<%- config.root %>",
+        url: "<%- config.url %>",
+        root: siteMetaRoot,
         author: "<%- config.author %>"
     }
 </script>

src/js/dark.js

@@ -1,18 +1,22 @@
-let currentThemeMode
 const $themeModeSwitchBtn = $('.header-theme-btn')
 
-// 获取当前主题颜色模式
+// 获取用户偏好的主题颜色模式
 const getPreferredThemeMode = function () {
-  const preferredThemeMode =
-    localStorage.preferredThemeMode !== undefined
-      ? localStorage.preferredThemeMode
-      : window.matchMedia('(prefers-color-scheme: dark)').matches
+  let preferredThemeMode = localStorage.preferredThemeMode
+  if (!preferredThemeMode) {
+    // 首次访问时，设置用户偏好主题颜色模式为系统偏好主题颜色模式
+    preferredThemeMode = window.matchMedia('(prefers-color-scheme: dark)')
+      .matches
       ? 'dark'
       : 'light'
-  return preferredThemeMode === 'dark' ? 'dark' : 'light'
+    localStorage.preferredThemeMode = preferredThemeMode
+  } else {
+    preferredThemeMode = preferredThemeMode === 'dark' ? 'dark' : 'light'
+  }
+  return preferredThemeMode
 }
 
-// 设置按钮可点击
+// 设置切换主题按钮可点击
 const setThemeModeSwitchBtnActive = (active) => {
   if (active) {
     $themeModeSwitchBtn.removeClass('header-theme-btn-disabled')
@@ -22,37 +26,37 @@ const setThemeModeSwitchBtnActive = (active) => {
 }
 
 // 切换主题颜色模式
-const switchThemeMode = function () {
+const switchThemeMode = function (root) {
   setThemeModeSwitchBtnActive(false)
-  if ($("LINK[href='/css/dark.css']").length === 0) {
+  const $darkModeSourceLink = $(`LINK[href='${root}css/dark.css']`)
+  if ($darkModeSourceLink.length === 1) {
+    $darkModeSourceLink.remove()
+    localStorage.preferredThemeMode = 'light'
+  } else {
     $('<link>')
-      .attr({ rel: 'stylesheet', type: 'text/css', href: '/css/dark.css' })
+      .attr({
+        rel: 'stylesheet',
+        type: 'text/css',
+        href: `${root}css/dark.css`,
+      })
       .appendTo('head')
     localStorage.preferredThemeMode = 'dark'
-  } else {
-    $("LINK[href='/css/dark.css']").remove()
-    localStorage.preferredThemeMode = 'light'
   }
   setThemeModeSwitchBtnActive(true)
 }
 
-// 获取当前的主题颜色模式
-const getCurrentThemeMode = () => {
-  return $("LINK[href='/css/dark.css']").length === 0 ? 'light' : 'dark'
-}
-
 // 初始化切换主题颜色模式功能
 const initThemeModeSwitchButton = function () {
   setThemeModeSwitchBtnActive(false)
 
-  // 当前主题颜色模式与用户偏好的主题颜色模式不同时，
-  // 切换主题颜色模式
-  if (getCurrentThemeMode() !== getPreferredThemeMode()) {
-    switchThemeMode()
+  // 默认情况下，加载暗色主题
+  // 若用户偏好浅色主题，则切换主题颜色模式
+  if (getPreferredThemeMode() === 'light') {
+    switchThemeMode(window.siteMeta.root)
   }
 
   $themeModeSwitchBtn.click(function () {
-    switchThemeMode()
+    switchThemeMode(window.siteMeta.root)
   })
 
   setThemeModeSwitchBtnActive(true)