fix: #146 浏览器与插件显示图标修复

.env.local.example

@@ -11,4 +11,5 @@ VITE_SIYUAN_CONFIG_TOKEN=
 # VITE_SIYUAN_DEV_PAGE_ID=
 
 # 非挂件模式需要中间服务器实现跨域，生产环境可不设置，使用本项目
-# VITE_MIDDLEWARE_URL=
+# VITE_MIDDLEWARE_URL=https://publish.terwer.space/api/middleware
+VITE_MIDDLEWARE_URL=https://publish.terwer.space/api/middleware

public/mathjaxCfg.js

@@ -0,0 +1,7 @@
+if (typeof window !== "undefined") {
+    // @ts-ignore
+    window.MathJax = {
+        tex: {inlineMath: [['$', '$']]},
+        svg: {fontCache: 'global'}
+    };
+}

src/assets/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/pages/style.css → src/assets/style.css

@@ -1,5 +1,9 @@
 @import "./webfont.css";
 
+html{
+  --el-font-family: var(--g-font-family) !important;
+  --custom-app-bg-color: #ffffff;
+}
 :root {
   --g-font-family: "JetBrains Mono", "LXGW WenKai", "-apple-system", "Wenquanyi Micro Hei", "Wenquanyi Micro Hei Mono", "Microsoft YaHei", "PT Sans", "Liberation Mono", monospace, dejavu sans mono, Fira Code, Microsoft Yahei, Consolas, Courier New, monospace, Menlo, Monaco;
   font-family: var(--g-font-family) !important;
@@ -23,7 +27,7 @@ pre,code {
 a {
   font-weight: 500;
   color: #646cff;
-  text-decoration: inherit;
+  text-decoration: none;
 }
 a:hover {
   color: #535bf2;
@@ -34,10 +38,6 @@ body {
   font-size: 100%;
 }
 
-html{
-  --custom-app-bg-color: #ffffff;
-}
-
 #app{
   background: var(--custom-app-bg-color);
   padding: 10px;
@@ -50,15 +50,43 @@ html{
   }
 }
 
-.el-tag {
-  margin-right: 10px;
-  margin-bottom: 10px;
+
+/* table */
+.post-detail-content-box table {
+  font-family: var(--g-font-family);
+  font-size: 14px;
+  color: #333333;
+  border-width: 1px;
+  border-color: #666666;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.post-detail-content-box table th {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #dedede;
+}
+
+.post-detail-content-box table td {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #ffffff;
 }
 
 .top-version-tip {
   margin: 10px 0 !important;
 }
 
+.el-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
 .el-alert {
   margin-top: 10px !important;
 }

src/assets/style.dark.css

@@ -0,0 +1,81 @@
+html.dark {
+    /* 自定义深色背景颜色 */
+    //--af-bg-color: #000000;
+    --custom-app-bg-color: #000000;
+}
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+}
+
+html.dark .post-detail-content-box .hljs{
+    color: #ffffff;
+    background-color: #161616 !important;
+    border: 1px solid #ccc !important;
+}
+
+/* dark table */
+html.dark .post-detail-content-box table {
+    color: #ffffff;
+    border-color: #ccc;
+}
+
+html.dark .post-detail-content-box table th {
+    border-color: #ccc;
+    background-color: #161616;
+}
+
+html.dark .post-detail-content-box table td {
+    border-color: #ccc;
+    background-color: #161616;
+}
+
+
+html.dark .el-header h1{
+    --custom-title-text-color: #ffffff;
+}
+
+html.dark .el-page-header__left{
+    color: #ffffff;
+}
+
+html.dark .post-detail-content-box{
+    color: #ffffff;
+}
+
+/** dark code */
+html.dark .post-detail-content-box .hljs {
+    color: #ffffff;
+    background-color: #161616 !important;
+    border: 1px solid #ccc !important;
+}
+
+html.dark code {
+    color: #2fd945 !important;
+}
+
+html.dark .hljs-keyword,
+html.dark .hljs-selector-tag,
+html.dark .hljs-built_in,
+html.dark .hljs-name,
+html.dark .hljs-tag {
+    color: #539dc5 !important;
+}
+
+html.dark .post-detail-content-box .hljs-string,
+html.dark .post-detail-content-box .hljs-title,
+html.dark .post-detail-content-box .hljs-section,
+html.dark .post-detail-content-box .hljs-attribute,
+html.dark .post-detail-content-box .hljs-literal,
+html.dark .post-detail-content-box .hljs-template-tag,
+html.dark .post-detail-content-box .hljs-template-variable,
+html.dark .post-detail-content-box .hljs-type,
+html.dark .post-detail-content-box .hljs-addition {
+    color: #2fd945 !important;
+}

src/lib/pageUtil.ts

@@ -0,0 +1,61 @@
+import {App, Component} from "@vue/runtime-core";
+import {createApp} from "vue";
+
+// pinia
+import {createPinia} from "pinia";
+
+// 国际化
+import i18n from "../locales";
+
+// Element-Plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import '../assets/style.css'
+import '../assets/style.dark.css'
+
+// hljs
+import "../lib/vue-hljs/vue-hljs.js"
+// @ts-ignore
+import vueHljs from "../lib/vue-hljs/lib/vue-hljs/main.js";
+
+/**
+ * 统一的Vue实例创建入口
+ * @param rootComponent
+ */
+const createPage = (rootComponent: Component): App => {
+    // Vue初始化
+    const app = createApp(rootComponent);
+
+    // pinia
+    const pinia = createPinia()
+    app.use(pinia) //再挂载pinia
+
+    // 组件注册
+    // 国际化
+    app.use(i18n)
+    // Element-Plus
+    app.use(ElementPlus)
+    // vueHljs
+    app.use(vueHljs)
+
+    // Register a global custom directive called `v-focus`
+    app.directive('focus', {
+        // When the bound element is mounted into the DOM...
+        mounted(el) {
+            // Focus the element
+            el.focus()
+        }
+    })
+
+    // 挂载Vue
+    app.mount('#app')
+
+    return app;
+}
+
+const pageUtil = {
+    createPage
+}
+
+export default pageUtil

src/pages/blog/App.vue → src/pages/blog/blog.vue

@@ -14,6 +14,6 @@ onMounted(async () => {
 
 <script lang="ts">
 export default {
-  name: 'App'
+  name: 'blog'
 }
 </script>

src/pages/blog/index.html

@@ -1,22 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>文章列表查看-思源笔记发布辅助工具</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="/lute.min.js"></script>
-    <script type="module" src="/src/pages/blog/main.ts"></script>
-    <script>
-        MathJax = {
-            tex: {inlineMath: [['$', '$']]},
-            svg: {fontCache: 'global'}
-        };
-    </script>
-    <script id="MathJax-script" src="https://unpkg.com/mathjax@3/es5/tex-svg.js">
-    </script>
-  </body>
+</head>
+<body>
+<div id="app"></div>
+<script src="/lute.min.js"></script>
+<script src="/mathjaxCfg.js"></script>
+<script src="/mathjax-3.2.2-tex-svg.js"></script>
+<script type="module" src="/src/pages/blog/main.ts"></script>
+</body>
 </html>

src/pages/blog/main.ts

@@ -1,48 +1,4 @@
-import {createApp} from 'vue'
-import App from './App.vue'
-import './style.css'
-import './styles/dark/css-vars.css'
+import pageUtil from "../../lib/pageUtil";
+import blog from "./blog.vue";
 
-// pinia
-import {createPinia} from "pinia";
-
-// 国际化
-import i18n from "../../locales";
-
-// Element-Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
-import './styles/dark/css-vars.css'
-
-// hljs
-import "../../lib/vue-hljs/vue-hljs.js"
-// @ts-ignore
-import vueHljs from "../../lib/vue-hljs/lib/vue-hljs/main.js";
-
-// Vue初始化
-const app = createApp(App)
-
-// pinia
-const pinia = createPinia()
-app.use(pinia) //再挂载pinia
-
-// 组件注册
-// 国际化
-app.use(i18n)
-// Element-Plus
-app.use(ElementPlus)
-// vueHljs
-app.use(vueHljs)
-
-// Register a global custom directive called `v-focus`
-app.directive('focus', {
-    // When the bound element is mounted into the DOM...
-    mounted(el) {
-        // Focus the element
-        el.focus()
-    }
-})
-
-// 挂载Vue
-app.mount('#app')
+pageUtil.createPage(blog)