feat: add TITLE in worker for custom website title (#276)

2026-05-10 17:43:31 +08:00 · 2024-05-26 16:21:27 +08:00
parent 268f3d6446
commit 1f8edbc295
14 changed files with 93 additions and 10 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG

+## main branch
+
+- worker 配置文件添加 `TITLE = "Custom Title"`, 可自定义网站标题
+
 ## v0.4.5

 - UI lazy load 懒加载
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
    "deploy": "npm run build && wrangler pages deploy ./dist --branch production"
  },
  "dependencies": {
+    "@unhead/vue": "^1.9.11",
    "@vicons/material": "^0.12.0",
    "@vueuse/core": "^10.9.0",
    "@wangeditor/editor": "^5.1.23",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@unhead/vue':
+        specifier: ^1.9.11
+        version: 1.9.11(vue@3.4.27(typescript@5.4.5))
      '@vicons/material':
        specifier: ^0.12.0
        version: 0.12.0
@@ -1296,6 +1299,20 @@ packages:
  '@types/web-bluetooth@0.0.20':
    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}

+  '@unhead/dom@1.9.11':
+    resolution: {integrity: sha512-mg8DuqPcm+JWSN3SIPa9lbNtFhdQ1M7K2TJe8icI4bK56GSj4eUgJZrbphZAUWPAUAS1UFyFFGJG7N9Y31LKOw==}
+
+  '@unhead/schema@1.9.11':
+    resolution: {integrity: sha512-hvIGl20wpQQImyHvAMv2tPgccKLGEwMn8KYQdImUkiCLdQw2Jw9jH7syE/u+TPSqwOQIwsvPja5sK+SChL1KNw==}
+
+  '@unhead/shared@1.9.11':
+    resolution: {integrity: sha512-jgpQ/cPfXzQA7c4F4PKyPXxS9POXAMrJ0QUBMTQYNOW6t6KlljjK89n6nUEmGuiyO4jdJGooZNVS1fXVaKIgYQ==}
+
+  '@unhead/vue@1.9.11':
+    resolution: {integrity: sha512-7gCEJGTSnpLcHGQ2j/IsBTz2nIUWbTlqUbbNiwPFgEksJbh8Pz8WduTvLC4ANlnnFy6PDG7yrZcaKJMOrNruoQ==}
+    peerDependencies:
+      vue: '>=2.7 || >=3'
+
  '@uppy/companion-client@2.2.2':
    resolution: {integrity: sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==}

@@ -1887,6 +1904,7 @@ packages:

  glob@7.2.3:
    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported

  globals@11.12.0:
    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -1939,6 +1957,9 @@ packages:
    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
    engines: {node: '>=12.0.0'}

+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
  html-void-elements@2.0.1:
    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}

@@ -2587,6 +2608,9 @@ packages:
    resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
    engines: {node: '>=14.0'}

+  unhead@1.9.11:
+    resolution: {integrity: sha512-AoX0hOBrpYM5ctX3rNPaKeHkhybIMrrirb+NlonRBMHy/YkodO5m6mretYEe17bu9mQoeU2rnEWRm36MXtG4OQ==}
+
  unicode-canonical-property-names-ecmascript@2.0.0:
    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
    engines: {node: '>=4'}
@@ -2876,6 +2900,9 @@ packages:
  youch@3.3.3:
    resolution: {integrity: sha512-qSFXUk3UZBLfggAW3dJKg0BMblG5biqSF8M34E06o5CSsZtH92u9Hqmj2RzGiHDi64fhe83+4tENFP2DB6t6ZA==}

+  zhead@2.2.4:
+    resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
+
  zod@3.23.8:
    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}

@@ -4018,6 +4045,28 @@ snapshots:

  '@types/web-bluetooth@0.0.20': {}

+  '@unhead/dom@1.9.11':
+    dependencies:
+      '@unhead/schema': 1.9.11
+      '@unhead/shared': 1.9.11
+
+  '@unhead/schema@1.9.11':
+    dependencies:
+      hookable: 5.5.3
+      zhead: 2.2.4
+
+  '@unhead/shared@1.9.11':
+    dependencies:
+      '@unhead/schema': 1.9.11
+
+  '@unhead/vue@1.9.11(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@unhead/schema': 1.9.11
+      '@unhead/shared': 1.9.11
+      hookable: 5.5.3
+      unhead: 1.9.11
+      vue: 3.4.27(typescript@5.4.5)
+
  '@uppy/companion-client@2.2.2':
    dependencies:
      '@uppy/utils': 4.1.3
@@ -4832,6 +4881,8 @@ snapshots:

  highlight.js@11.9.0: {}

+  hookable@5.5.3: {}
+
  html-void-elements@2.0.1: {}

  i18next@20.6.1:
@@ -5517,6 +5568,13 @@ snapshots:
    dependencies:
      '@fastify/busboy': 2.1.1

+  unhead@1.9.11:
+    dependencies:
+      '@unhead/dom': 1.9.11
+      '@unhead/schema': 1.9.11
+      '@unhead/shared': 1.9.11
+      hookable: 5.5.3
+
  unicode-canonical-property-names-ecmascript@2.0.0: {}

  unicode-match-property-ecmascript@2.0.0:
@@ -5888,4 +5946,6 @@ snapshots:
      mustache: 4.2.0
      stacktracey: 2.1.8

+  zhead@2.2.4: {}
+
  zod@3.23.8: {}
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -54,6 +54,7 @@ const getOpenSettings = async (message) => {
    try {
        const res = await api.fetch("/open_api/settings");
        Object.assign(openSettings.value, {
+            title: res["title"] || "",
            prefix: res["prefix"] || "",
            needAuth: res["needAuth"] || false,
            domains: res["domains"].map((domain) => {
--- a/frontend/src/components/MailBox.vue
+++ b/frontend/src/components/MailBox.vue
@@ -226,7 +226,7 @@ onBeforeUnmount(() => {
                    ID: {{ row.id }}
                  </n-tag>
                  <n-tag type="info">
-                    {{ row.created_at }}
+                    {{ `${row.created_at} UTC` }}
                  </n-tag>
                  <n-tag type="info">
                    FROM: {{ row.source }}
@@ -247,7 +247,7 @@ onBeforeUnmount(() => {
              ID: {{ curMail.id }}
            </n-tag>
            <n-tag type="info">
-              {{ curMail.created_at }}
+              {{ `${curMail.created_at} UTC` }}
            </n-tag>
            <n-tag type="info">
              FROM: {{ curMail.source }}
@@ -320,7 +320,7 @@ onBeforeUnmount(() => {
                  ID: {{ row.id }}
                </n-tag>
                <n-tag type="info">
-                  {{ row.created_at }}
+                  {{ `${row.created_at} UTC` }}
                </n-tag>
                <n-tag type="info">
                  FROM: {{ row.source }}
@@ -342,7 +342,7 @@ onBeforeUnmount(() => {
                ID: {{ curMail.id }}
              </n-tag>
              <n-tag type="info">
-                {{ curMail.created_at }}
+                {{ `${curMail.created_at} UTC` }}
              </n-tag>
              <n-tag type="info">
                FROM: {{ curMail.source }}
--- a/frontend/src/components/SendBox.vue
+++ b/frontend/src/components/SendBox.vue
@@ -134,7 +134,7 @@ onMounted(async () => {
                    ID: {{ row.id }}
                  </n-tag>
                  <n-tag type="info">
-                    {{ row.created_at }}
+                    {{ `${row.created_at} UTC` }}
                  </n-tag>
                  <n-tag v-if="showEMailFrom" type="info">
                    FROM: {{ row.address }}
@@ -155,7 +155,7 @@ onMounted(async () => {
              ID: {{ curMail.id }}
            </n-tag>
            <n-tag type="info">
-              {{ curMail.created_at }}
+              {{ `${curMail.created_at} UTC` }}
            </n-tag>
            <n-tag type="info">
              FROM: {{ curMail.address }}
@@ -195,7 +195,7 @@ onMounted(async () => {
                  ID: {{ row.id }}
                </n-tag>
                <n-tag type="info">
-                  {{ row.created_at }}
+                  {{ `${row.created_at} UTC` }}
                </n-tag>
                <n-tag v-if="showEMailFrom" type="info">
                  FROM: {{ row.address }}
@@ -217,7 +217,7 @@ onMounted(async () => {
                ID: {{ curMail.id }}
              </n-tag>
              <n-tag type="info">
-                {{ curMail.created_at }}
+                {{ `${curMail.created_at} UTC` }}
              </n-tag>
              <n-tag type="info">
                FROM: {{ curMail.address }}
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import App from './App.vue'
 import { createI18n } from 'vue-i18n'
 import router from './router'
 import { registerSW } from 'virtual:pwa-register'
+import { createHead } from '@unhead/vue'

 registerSW({ immediate: true })
 const i18n = createI18n({
@@ -16,7 +17,9 @@ const i18n = createI18n({
        messages: {}
    }
 })
+const head = createHead()
 const app = createApp(App)
 app.use(i18n)
 app.use(router)
+app.use(head)
 app.mount('#app')
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -7,6 +7,7 @@ export const useGlobalState = createGlobalState(
        const toggleDark = useToggle(isDark)
        const loading = ref(false);
        const openSettings = ref({
+            title: '',
            prefix: '',
            needAuth: false,
            adminContact: '',
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import {
@@ -15,7 +16,7 @@ const message = useMessage()

 const {
    localeCache, toggleDark, isDark, isTelegram,
-    showAuth, adminAuth, auth, loading
+    showAuth, adminAuth, auth, loading, openSettings
 } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -182,6 +183,13 @@ const menuOptions = computed(() => [
    }
 ]);

+useHead({
+    title: () => openSettings.value.title || t('title'),
+    meta: [
+        { name: "description", content: openSettings.value.description || t('title') },
+    ]
+});
+
 onMounted(async () => {
    await api.getOpenSettings(message);
 });
@@ -191,7 +199,7 @@ onMounted(async () => {
    <div>
        <n-page-header>
            <template #title>
-                <h3>{{ t('title') }}</h3>
+                <h3>{{ openSettings.title || t('title') }}</h3>
            </template>
            <template #avatar>
                <n-avatar style="margin-left: 10px;" src="/logo.png" />
--- a/vitepress-docs/docs/en/cli.md
+++ b/vitepress-docs/docs/en/cli.md
@@ -74,6 +74,7 @@ node_compat = true
 # ]

 [vars]
+# TITLE = "Custom Title" # The title of the site
 PREFIX = "tmp" # The mailbox name prefix to be processed
 # If you want your site to be private, uncomment below and change your password
 # PASSWORDS = ["123", "456"]
--- a/vitepress-docs/docs/zh/guide/cli/worker.md
+++ b/vitepress-docs/docs/zh/guide/cli/worker.md
@@ -42,6 +42,7 @@ node_compat = true
 # ]

 [vars]
+# TITLE = "Custom Title" # 自定义网站标题
 PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空字符串
 # 如果你想要你的网站私有，取消下面的注释，并修改密码
 # PASSWORDS = ["123", "456"]
--- a/worker/src/commom_api.ts
+++ b/worker/src/commom_api.ts
@@ -15,6 +15,7 @@ api.get('/open_api/settings', async (c) => {
        needAuth = !auth || !passwords.includes(auth);
    }
    return c.json({
+        "title": c.env.TITLE,
        "prefix": c.env.PREFIX,
        "domains": getDomains(c),
        "needAuth": needAuth,
--- a/worker/src/types.d.ts
+++ b/worker/src/types.d.ts
@@ -6,6 +6,7 @@ export type Bindings = {
    SEND_MAIL: any

    // config
+    TITLE: string | undefined
    PREFIX: string | undefined
    DOMAINS: string | string[] | undefined
    PASSWORDS: string | string[] | undefined
--- a/worker/wrangler.toml.template
+++ b/worker/wrangler.toml.template
@@ -16,6 +16,7 @@ node_compat = true
 # ]

 [vars]
+# TITLE = "Custom Title" # custom title
 PREFIX = "tmp"
 # IF YOU WANT TO MAKE YOUR SITE PRIVATE, UNCOMMENT THE FOLLOWING LINES
 # PASSWORDS = ["123", "456"]