hexo-theme-shokax 0.4.6-dev5 → 0.4.6

package/toolbox/compiler.mjs

@@ -46,12 +46,16 @@ if (CONFIG.legacyScript) {
     } else if (sPath.startsWith('file:\\')) {
         sPath = sPath.slice(8); // 去除 'file:\'
     }
-    child_process.exec('pnpm --package=typescript dlx tsc --build'.trim(), {
-        cwd: sPath
-    }, async (code, stdout, stderr) => {
-        console.log('Deleting typescript files...')
-        await deleteFileRecursive(sPath)
-        console.log('Finished compiling.')
+    child_process.exec('pnpm install',{
+        cwd: path.join(sPath,'./../')
+    }, (code, stdout, stderr) => {
+        child_process.exec('pnpm --package=typescript dlx tsc --build'.trim(), {
+            cwd: sPath
+        }, async (code, stdout, stderr) => {
+            console.log('Deleting typescript files...')
+            await deleteFileRecursive(sPath)
+            console.log('Finished compiling.')
+        })
     })
 } else {
     throw Error('Not implemented yet.')

package/toolbox/hoistdep.mjs

@@ -1,6 +1,6 @@
-import { hoistDeps } from "./lib.mjs";
-
-console.log('ShokaX ToolBox - Hoist Dependencies')
-console.log('Hoisting dependencies...')
-await hoistDeps()
+import { hoistDeps } from "./lib.mjs";
+
+console.log('ShokaX ToolBox - Hoist Dependencies')
+console.log('Hoisting dependencies...')
+await hoistDeps()
 console.log('Finished hoisting dependencies.')

package/toolbox/lib.mjs

@@ -1,64 +1,64 @@
-import fs from "fs/promises";
-import child_process from "child_process";
-import { dirname, resolve, join } from 'path';
-
-async function findScaffoldsDir(startPath) {
-  let currentPath = resolve(startPath);
-
-  while (currentPath !== dirname(currentPath)) {
-    const scaffoldsPath = resolve(currentPath, 'scaffolds');
-
-    try {
-      const stat = await fs.stat(scaffoldsPath);
-      if (stat.isDirectory()) {
-        return currentPath;
-      }
-    } catch (err) {
-      // If the error is because the file/directory does not exist, continue to the parent directory
-      if (err.code !== 'ENOENT') {
-        throw err;
-      }
-    }
-
-    currentPath = dirname(currentPath);
-  }
-
-  return null;
-}
-
-const hexoRoot = await findScaffoldsDir(process.cwd())
-
-async function checkFileAccessible(file) {
-  try {
-    await fs.access(join((hexoRoot || ''),file))
-  } catch {
-    return false
-  }
-  return true
-}
-
-export async function hoistDeps() {
-  let pm
-  if (await checkFileAccessible('pnpm-lock.yml') || await checkFileAccessible('pnpm-lock.yaml') || await checkFileAccessible('enable_pnpm')) {
-    pm = "pnpm add"
-  } else if (await checkFileAccessible('yarn.lock') || await checkFileAccessible('.yarnrc.yml')) {
-    pm = "yarn add"
-  } else {
-    pm = "npm install"
-  }
-  console.log(`Using ${pm} to hoist dependencies.`)
-  // TODO 使用本地 package.json 解析
-  const res = await (await fetch('https://registry.npmmirror.com/hexo-theme-shokax')).json()
-  const latestV = res['dist-tags'].latest
-  const deps = res.versions[latestV].dependencies
-  const depsList = Object.keys(deps).map(d => `${d}@${deps[d]}`)
-  child_process.exec(`${pm} ${depsList.join(' ')}`.trim(), {
-    cwd: hexoRoot
-  }, (code, stdout, stderr) => {
-    if (stderr) {
-      console.error(stderr)
-    } else {
-      console.log(stdout)
-    }
-  })
+import fs from "fs/promises";
+import child_process from "child_process";
+import { dirname, resolve, join } from 'path';
+
+async function findScaffoldsDir(startPath) {
+  let currentPath = resolve(startPath);
+
+  while (currentPath !== dirname(currentPath)) {
+    const scaffoldsPath = resolve(currentPath, 'scaffolds');
+
+    try {
+      const stat = await fs.stat(scaffoldsPath);
+      if (stat.isDirectory()) {
+        return currentPath;
+      }
+    } catch (err) {
+      // If the error is because the file/directory does not exist, continue to the parent directory
+      if (err.code !== 'ENOENT') {
+        throw err;
+      }
+    }
+
+    currentPath = dirname(currentPath);
+  }
+
+  return null;
+}
+
+const hexoRoot = await findScaffoldsDir(process.cwd())
+
+async function checkFileAccessible(file) {
+  try {
+    await fs.access(join((hexoRoot || ''),file))
+  } catch {
+    return false
+  }
+  return true
+}
+
+export async function hoistDeps() {
+  let pm
+  if (await checkFileAccessible('pnpm-lock.yml') || await checkFileAccessible('pnpm-lock.yaml') || await checkFileAccessible('enable_pnpm')) {
+    pm = "pnpm add"
+  } else if (await checkFileAccessible('yarn.lock') || await checkFileAccessible('.yarnrc.yml')) {
+    pm = "yarn add"
+  } else {
+    pm = "npm install"
+  }
+  console.log(`Using ${pm} to hoist dependencies.`)
+  // TODO 使用本地 package.json 解析
+  const res = await (await fetch('https://registry.npmmirror.com/hexo-theme-shokax')).json()
+  const latestV = res['dist-tags'].latest
+  const deps = res.versions[latestV].dependencies
+  const depsList = Object.keys(deps).map(d => `${d}@${deps[d]}`)
+  child_process.exec(`${pm} ${depsList.join(' ')}`.trim(), {
+    cwd: hexoRoot
+  }, (code, stdout, stderr) => {
+    if (stderr) {
+      console.error(stderr)
+    } else {
+      console.log(stdout)
+    }
+  })
 }

package/index.html

@@ -1,231 +0,0 @@
-<!doctype html>
-<html lang=zh-CN>
-<meta charset=UTF-8>
-<meta content=width=device-width,initial-scale=1,maximum-scale=2 name=viewport>
-<meta content=#222 name=theme-color>
-<meta content=IE=edge,chrome=1 http-equiv=X-UA-COMPATIBLE>
-<meta content=webkit name=renderer>
-<link href=/assets/favicon.ico rel=icon sizes=32x32 type=image/ico>
-<link href=/assets/apple-touch-icon.png rel=apple-touch-icon sizes=180x180>
-<link href=/rss.xml rel=alternate title=GreyFlowers type=application/rss+xml>
-<link href=/atom.xml rel=alternate title=GreyFlowers type=application/atom+xml>
-<link href=https://nonhana.xyz/feed.json rel=alternate title=GreyFlowers type=application/json>
-<link href=https://lf9-cdn-tos.bytecdntp.com rel=preconnect>
-<link href=https://at.alicdn.com rel=preconnect>
-<link href=https://cdn.jsdelivr.net rel=dns-prefetch>
-<link href=https://unpkg.com rel=dns-prefetch>
-<link
-  href=https://fonts.googleapis.com/css?family=Mulish:400,400italic,700,700italic%7CFredericka%20the%20Great:400,400italic,700,700italic%7CNoto%20Serif%20JP:400,400italic,700,700italic%7CNoto%20Serif%20SC:400,400italic,700,700italic%7CInconsolata:400,400italic,700,700italic&display=swap&subset=latin,latin-ext
-  media=none onload=this.media='all' rel=stylesheet>
-<link href=/css/app.css?v=0.4.2 rel=stylesheet>
-<link href=/js/chunk-3TKMULNZ.js rel=modulepreload>
-<link href=/js/chunk-ALTFCWXU.js rel=modulepreload>
-<link href=/js/chunk-HUVUXQZN.js rel=modulepreload>
-<link href=/js/chunk-O2BCNOI6.js rel=modulepreload>
-<link href=/js/index.esm-AYEYICKY.js rel=modulepreload>
-<link href=/js/post-S7W6Y2IZ.js rel=modulepreload>
-<link href=/js/quicklink-FI56VDOX.js rel=modulepreload>
-<link href=/js/search-TIKH35P2.js rel=modulepreload>
-<link href=/js/siteInit.js rel=modulepreload>
-<link as=image fetchpriority=high
-      href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%283%29.png rel=preload>
-<link as=image fetchpriority=high href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115011844.jpg
-      rel=preload>
-<link as=image fetchpriority=high
-      href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%282%29.jpg rel=preload>
-<link as=image fetchpriority=high href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115495470.png
-      rel=preload>
-<link as=image fetchpriority=high
-      href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%287%29.png rel=preload>
-<link as=image fetchpriority=high
-      href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/0%20%284%29.png rel=preload>
-<meta content=前端,Vite-SSG,SSG, name=keywords>
-<meta content=不要为每一件事都赋予意义。 name=description>
-<link
-  href=https://nonhana.xyz/2024/01/31/daily-developing/%E6%80%8E%E4%B9%88%E5%9C%A8Vue3%E4%B8%AD%E5%BC%95%E5%85%A5Vite-SSG%E6%89%93%E5%8C%85/ rel=canonical>
-<title>怎么在Vue3中引入Vite-SSG打包</title>
-<meta content="Hexo 7.0.0" name=generator>
-<body itemscope itemtype=http://schema.org/WebPage>
-<div id=loading>
-  <div class=cat>
-    <div class=body></div>
-    <div class=head>
-      <div class=face></div>
-    </div>
-    <div class=foot>
-      <div class=tummy-end></div>
-      <div class=bottom></div>
-      <div class="legs left"></div>
-      <div class="legs right"></div>
-    </div>
-    <div class=paw>
-      <div class="hands left"></div>
-      <div class="hands right"></div>
-    </div>
-  </div>
-</div>
-<div id=container>
-  <header id=header itemscope itemtype=http://schema.org/WPHeader>
-    <div class=inner>
-      <div id=brand>
-        <div class=pjax><h1 itemprop="name headline">怎么在Vue3中引入Vite-SSG打包</h1>
-          <div class=meta><span title="创建时间：2024-01-31 14:22:42" class=item><span class=icon><i
-            class="ic i-calendar"></i></span><span class=text>发表于</span><time itemprop="dateCreated datePublished"
-                                                                                 datetime=2024-01-31T14:22:42+08:00>2024-01-31</time></span><span
-            class=item title=本文字数><span class=icon><i class="ic i-pen"></i></span><span
-            class=text>本文字数</span><span>14k</span><span class=text>字</span></span><span class=item
-                                                                                             title=阅读时长><span
-            class=icon><i class="ic i-clock"></i></span><span class=text>阅读时长</span><span>13 分钟</span></span>
-          </div>
-        </div>
-      </div>
-      <nav id=nav>
-        <div class=inner>
-          <div class=toggle>
-            <div aria-label=切换导航栏 class=lines><span class=line></span><span class=line></span><span
-              class=line></span></div>
-          </div>
-          <ul class=menu>
-            <li class="item title"><a href=/ rel=start>hana's blog</a>
-          </ul>
-          <ul class=right id=rightNav>
-            <li class="item theme"><i class="ic i-sun"></i>
-            <li class="item search"><i class="ic i-search"></i>
-          </ul>
-        </div>
-      </nav>
-    </div>
-    <div class=pjax id=imgs>
-      <ul>
-        <li
-          style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%283%29.png");'
-          class=item>
-        <li
-          style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115011844.jpg");'
-          class=item>
-        <li
-          style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%282%29.jpg");'
-          class=item>
-        <li
-          style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115495470.png");'
-          class=item>
-        <li
-          style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%287%29.png");'
-          class=item>
-        <li
-          style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/0%20%284%29.png");'
-          class=item>
-      </ul>
-    </div>
-  </header>
-  <div id=waves>
-    <svg viewbox="0 24 150 28" class=waves preserveaspectratio=none shape-rendering=auto
-         xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink>
-      <defs>
-        <path d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" id=gentle-wave></path>
-      </defs>
-      <g class=parallax>
-        <use x=48 xlink:href=#gentle-wave y=0></use>
-        <use x=48 xlink:href=#gentle-wave y=3></use>
-        <use x=48 xlink:href=#gentle-wave y=5></use>
-        <use x=48 xlink:href=#gentle-wave y=7></use>
-      </g>
-    </svg>
-  </div>
-  <main>
-    <div class=inner>
-      <div class=pjax id=main>
-        <div class="article wrap">
-          <div class=breadcrumb itemlistelement itemscope itemtype=https://schema.org/BreadcrumbList><i
-            class="ic i-home"></i><span></span><i class="ic i-angle-right"></i><span class=current
-                                                                                     itemprop=itemListElement
-                                                                                     itemscope
-                                                                                     itemtype=https://schema.org/ListItem><a
-            href=/categories/daily-developing/ itemprop=item rel=index title=分类于一些日常开发积累><span itemprop=name>一些日常开发积累<meta
-            content=0 itemprop=position></span></a></span></div>
-          <article class="post block" itemscope itemtype=http://schema.org/Article lang=zh-CN>
-            <link
-              href=https://nonhana.xyz/2024/01/31/daily-developing/%E6%80%8E%E4%B9%88%E5%9C%A8Vue3%E4%B8%AD%E5%BC%95%E5%85%A5Vite-SSG%E6%89%93%E5%8C%85/ itemprop=mainEntityOfPage>
-            <span hidden itemprop=author itemscope itemtype=http://schema.org/Person><meta content=/assets/avatar.jpg
-                                                                                           itemprop=image><meta
-              content=non_hana itemprop=name><meta content="『灰色的花终会绽放。』, 不要为每一件事都赋予意义。"
-                                                   itemprop=description></span><span hidden itemprop=publisher itemscope
-                                                                                     itemtype=http://schema.org/Organization><meta
-            content=GreyFlowers itemprop=name></span>
-            <div class="body md" itemprop=articleBody><h1 id=一-前言><a class=anchor href=#一-前言>#</a> 一、前言</h1>
-              <p>公司目前由我负责的主要有两个网页项目：
-              <ol>
-                <li>一个官网首页，纯做数据展示的；
-                <li>一个官网课程资源页，用户能够点击进入课程页面，并能够阅读课程的 md 文档教程。
-              </ol>
-              <p>这两个项目都是非常单纯的通过 <code>npm init vite@latest</code> 创建的 Vue3+TS 项目，并且其中也都引入了目前非常流行的
-                ElementPlus 作为组件库。
-              <p>目前多了一个新的需求：要交给我进行 <strong>SEO</strong> ，也就是 <strong>搜索引擎优化</strong>
-                。在这边先暂且列一些给 Vue+Vite 项目做 SEO 的一些常见方式吧：
-              <ol>
-                <li><strong>服务器端渲染 (SSR)</strong>: 由于 Vue 是一个客户端渲染的 JavaScript 框架，搜索引擎在抓取页面时可能不会执行
-                  JavaScript，导致内容无法被索引。通过服务器端渲染，可以提前在服务器上生成页面的 HTML，确保搜索引擎能够抓取到页面的内容。
-                <li><strong>预渲染 (Pre-rendering)</strong>: 对于静态内容较多的站点，可以使用预渲染。这意味着在构建过程中为每个路由生成静态的
-                  HTML 文件。这可以通过像 <code>vite-plugin-ssr</code> 这样的插件来实现。
-                <li><strong>使用合适的元标签 (Meta tags)</strong>: 确保每个页面都有恰当的 <code>&LTtitle></code> 和
-                  <code>&LTmeta></code> 描述标签，这些都是搜索引擎用来了解页面内容的重要信息。可以使用像
-                  <code>vue-meta</code> 这样的库来在 Vue 组件中管理这些标签。
-                <li><strong>路由优化</strong>：使用基于历史的路由（ <code>history mode</code> ）而不是哈希路由（ <code>hash
-                  mode</code> ）。这样可以确保每个页面都有一个干净且易于索引的 URL。
-                <li><strong>生成网站地图 (Sitemap)</strong>: 为网站生成一个 sitemap.xml，帮助搜索引擎更好地索引网站内容。
-                <li><strong>使用无障碍标准 (Accessibility)</strong>: 确保网站符合无障碍标准，这不仅对用户友好，也有助于提高
-                  SEO 排名。
-              </ol>
-              <p>当然，上面的这几种方式都是报菜名罢了。我们公司的技术负责人和我经过一些调研和讨论之后，最终选定了 <strong>静态站点生成（SSG,
-                Static Site Generation）</strong> 来对我们的项目进行 SEO。为什么选择 SSG 呢？因为我们目前的项目都是偏向于
-                <strong>数据呈现</strong> 而与用于在实际应用层面上的交互相对比较少，也就是比较偏向于
-                <strong>静态页面</strong> 。
-              <p>再次基础上，我们选择了 <code>Vite-SSG</code> 这个插件作为我们进行 SSG 打包的工具。
-              <h1 id=二-vite-ssg-是什么><a class=anchor href=#二-vite-ssg-是什么>#</a> 二、Vite-SSG 是什么？</h1>
-              <p>Vite-SSG（Static Site Generation）是一个基于 Vite 的工具，用于生成静态站点。它专门为 Vue.js
-                应用程序设计，提供了一个高效的方式来构建静态生成的网站。 Vite-SSG 有几个主要关键特点：
-              <ol>
-                <li><strong>静态站点生成</strong>：Vite-SSG 生成的是静态 HTML 文件。这意味着的网站可以作为静态文件部署在任何标准的
-                  web 服务器或静态文件托管服务上。
-                <li><strong>基于 Vite</strong>：作为 Vite 的一个扩展，Vite-SSG 充分利用了 Vite
-                  的快速冷启动和即时模块热更新（HMR）等特性，提供了快速的开发体验。
-                <li><strong>Vue.js 支持</strong>：Vite-SSG 是为 Vue.js 应用程序设计的。它支持 Vue 3，允许利用 Vue.js
-                  的全功能集，包括组件、路由、状态管理等，也可以让在原本已经开发完成的 Vue 项目中引入。
-                <li><strong>服务器端渲染（SSR）友好</strong>：虽然 Vite-SSG 重点是静态站点生成，但它也支持和优化了服务器端渲染的相关特性，使得生成的站点可以更好地支持
-                  SEO 和首次加载性能。
-                <li><strong>客户端激活</strong>：生成的静态页面在客户端被 Vue.js
-                  “激活”，从而变成一个完全功能的单页面应用（SPA）。这使得在初始的快速加载和后续的丰富交互之间取得了很好的平衡。
-                <li><strong>灵活性和可扩展性</strong>：Vite-SSG 允许自定义配置，包括路由、预渲染行为、插件等，使得可以根据项目需求调整和优化。
-              </ol>
-              <p>Vite-SSG 适用于需要快速静态内容加载，同时在客户端提供丰富交互的网站。这包括博客、企业官网、产品展示网站、文档站点等。同时，对于需要良好搜索引擎优化（SEO）的站点，Vite-SSG
-                也是一个很好的选择。
-              <h1 id=三-在开发完成的项目中进行配置><a class=anchor href=#三-在开发完成的项目中进行配置>#</a>
-                三、在开发完成的项目中进行配置</h1>
-              <p>按照一般的开发流程开发完成之后，就需要先引入 Vite-SSG 的插件，并对整个项目的关键配置项进行修改，最后运行打包，逐一排查错误并修复。
-              <h2 id=安装插件><a class=anchor href=#安装插件>#</a> 安装插件</h2>
-              <p>先安装 Vite-SSG 插件：
-              <figure class="highlight bash">
-                <figcaption data-lang=bash></figcaption>
-                <table>
-                  <tr>
-                    <td data-num=1>
-                    <td>
-                      <pre><span class="token function">npm</span> i <span class="token parameter variable">-D</span> vite-ssg</pre>
-                </table>
-              </figure>
-              <h2 id=修改配置文件><a class=anchor href=#修改配置文件>#</a> 修改配置文件</h2>
-              <h3 id=packagejson><a class=anchor href=#packagejson>#</a> package.json</h3>
-              <p>安装完成后，修改 <code>package.json</code> 中的 build 指令：
-              <figure class="highlight diff">
-                <figcaption data-lang=diff></figcaption>
-                <table>
-                  <tr>
-                    <td data-num=1>
-                    <td>
-                      <pre>{</pre>
-                  <tr>
-                    <td data-num=2>
-                    <td><pre><span class="token unchanged"><span class="token prefix unchanged"> </span> "scripts": {<tr><td
-                      data-num=3><td><pre><span class="token prefix unchanged"> </span>   "dev": "vite",</pre><tr><td
-                      data-num=4><td><pre><span class="token deleted-sign deleted"><span
-                  class="token prefix deleted">-</span></span></pre></td></tr></span></pre></td>