refactor: 环境变量化站点配置

dyedd · dyedd · commit 021833e9da7f · 2026-03-25T22:41:05.000+08:00
diff --git a/.env.example b/.env.example
@@ -15,3 +15,25 @@ IMAGE_MODEL=Doubao-Seedream-4.5
 SERVER_HOST=your_server_ip_or_domain
 SERVER_USER=root
 SERVER_PATH=/opt/1panel/apps/openresty/openresty/www/sites/serenade/index
+
+# Site Configuration
+SITE_AUTHOR=染念
+SITE_TITLE=染念的笔记
+SITE_DESCRIPTION=Writing code, painful and happy
+SITE_KEYWORDS=染念,染念的笔记,染念の笔记,染念的博客,博客,blog
+SITE_URL=https://dyedd.cn
+SITE_EMAIL=1176996982@qq.com
+SITE_LANG=zh-CN
+SITE_START_TIME=2017-02-11
+SITE_ANALYTICS_SCRIPT=https://statistics.dyedd.cn/script.js
+SITE_ANALYTICS_WEBSITE_ID=11a02a3f-0cdd-452a-bbb8-37f195db86fd
+SITE_PROFILE_AVATAR=/logo.jpg
+SITE_PROFILE_BADGE=🐟
+SITE_PROFILE_INTRO=AI infra研究生，目前研究大规模分布式训练以及扩散模型在短临降水领域的应用|过去我也学习过前后端，所以现在也是不专业的全栈开发者
+SITE_PROFILE_MOTTO=🐎 马到成功，心想事成|🌈🌈🌈
+SITE_PROFILE_TECH_STACK=Python::https://img.shields.io/badge/-Python-3776AB?logo=python&logoColor=white&style=flat-square|CUDA::https://img.shields.io/badge/-CUDA-76B900?logo=nvidia&logoColor=white&style=flat-square
+SITE_PROFILE_STATEMENT=我将在这里分享我的编程和人工智能知识。如果你对这些主题感兴趣，那么恭喜你找到宝藏了。接下来你可以查看内容或订阅
+SITE_PROFILE_GITHUB_CHART=https://ghchart.rshah.org/409ba5/dyedd
+SITE_GITHUB_URL=https://github.com/dyedd
+SITE_QQ_URL=https://qm.qq.com/cgi-bin/qm/qr?k=nLIdzy8UC9VkZ0g2EwnoN1rwnxaYvFx0&jump_from=webapi&authKey=mq2RvfcTQxEgImX+XZv0tBeobeHX+wTaAxOXq7pEKdsUD+a2Hi7mIOBGEj2ZtSDJ
+SITE_FOOTER_ICP_LABEL=备案号:浙ICP备19020194号-1
diff --git a/README.md b/README.md
@@ -78,6 +78,7 @@ docker compose pull && docker compose up -d
 
 - 默认监听 `3000`，可用 `SERENADE_PORT=8080 docker compose up -d` 映射到其它端口
 - `docker-compose.yml` 把宿主机 `./content` 挂载进容器，内容更新后刷新即可生效
+- 站点信息通过 `.env` 中的 `SITE_*` 环境变量配置，不再把个人站点配置写死到预构建镜像
 
 #### 方式 B：本地构建镜像
 
@@ -146,7 +147,42 @@ AI 与同步相关配置见 `.env.example`：
 
 ## 站点配置
 
-编辑 `site.config.ts`：
+站点信息通过 `.env` 中的 `SITE_*` 环境变量覆盖。
+
+- 没有 `.env` 时，直接使用 [nuxt.config.ts](./nuxt.config.ts) 里的内置默认值
+- `.env.example` 只是示例，不会被自动加载；需要复制为 `.env` 才会生效
+
+```env
+SITE_TITLE=染念的笔记
+SITE_AUTHOR=染念
+SITE_URL=https://dyedd.cn
+SITE_EMAIL=1176996982@qq.com
+SITE_PROFILE_AVATAR=/logo.jpg
+SITE_PROFILE_INTRO=第一句|第二句
+SITE_PROFILE_MOTTO=第一句|第二句
+SITE_PROFILE_TECH_STACK=Python::https://img.shields.io/...|Vue::https://img.shields.io/...
+```
+
+常用可配置项：
+
+- 站点基础信息：`SITE_TITLE`、`SITE_AUTHOR`、`SITE_DESCRIPTION`、`SITE_KEYWORDS`、`SITE_URL`、`SITE_EMAIL`、`SITE_LANG`、`SITE_START_TIME`
+- 个人资料：`SITE_PROFILE_AVATAR`、`SITE_PROFILE_BADGE`、`SITE_PROFILE_INTRO`、`SITE_PROFILE_MOTTO`、`SITE_PROFILE_STATEMENT`、`SITE_PROFILE_GITHUB_CHART`、`SITE_PROFILE_TECH_STACK`
+- 社交与统计：`SITE_GITHUB_URL`、`SITE_QQ_URL`、`SITE_ANALYTICS_SCRIPT`、`SITE_ANALYTICS_WEBSITE_ID`
+- 备案信息：`SITE_FOOTER_ICP_LABEL`
+
+其中一些值会自动复用，不需要重复配置：
+
+- `profile.name` 复用 `SITE_AUTHOR`
+- 邮箱链接自动由 `SITE_EMAIL` 生成
+- 页脚版权名复用 `SITE_AUTHOR`
+- `poweredBy` 固定为 `Powered by serenade` 和项目仓库地址
+- QQ 图标提示文案固定为 `QQ`
+- 友链申请联系文案固定为 `邮箱`
+- 友链申请模板默认复用 `SITE_AUTHOR`、`SITE_URL`、`SITE_DESCRIPTION`、`SITE_PROFILE_AVATAR`
+- `SITE_PROFILE_INTRO`、`SITE_PROFILE_MOTTO` 用 `|` 分隔多行
+- `SITE_PROFILE_TECH_STACK` 用 `标签::图标URL|标签::图标URL` 配置
+
+默认值直接定义在 `nuxt.config.ts` 中：
 
 ```ts
 export const siteConfig = {
diff --git a/app/components/Footer.vue b/app/components/Footer.vue
@@ -57,7 +57,8 @@
 </template>
 
 <script setup>
-import { siteConfig } from '../../site.config'
+
+const siteConfig = useSiteConfig()
 
 const currentYear = new Date().getFullYear()
 
diff --git a/app/composables/useSiteConfig.js b/app/composables/useSiteConfig.js
@@ -0,0 +1,6 @@
+export const useSiteConfig = () => {
+  const runtimeConfig = useRuntimeConfig()
+
+  return runtimeConfig.public.siteConfig
+}
+
diff --git a/app/middleware/app.global.js b/app/middleware/app.global.js
@@ -1,7 +1,7 @@
-import { siteConfig } from '../../site.config'
 import redirectsData from '../middleware/redirects.json'
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
+    const siteConfig = useSiteConfig()
     const routeTitle = getRouteTitle(to.path)
 
     useHead({
@@ -28,6 +28,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
 // 根据路由路径自动生成页面标题
 function getRouteTitle(path) {
+    const siteConfig = useSiteConfig()
     const routeMap = {
         '/posts': '所有文章',
         '/columns': '专栏',
diff --git a/app/pages/friends/index.vue b/app/pages/friends/index.vue
@@ -34,7 +34,7 @@
             <a
               :href="siteConfig.socialLinks.email.url"
               class="text-primary-500 hover:underline font-medium"
-              >{{ siteConfig.friends.contactLabel }}</a
+              >邮箱</a
             >
           </p>
 
@@ -130,7 +130,8 @@
 </template>
 
 <script setup>
-import { siteConfig } from '../../../site.config';
+
+const siteConfig = useSiteConfig();
 
 definePageMeta({
   layout: "default",
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -102,7 +102,8 @@
   </div>
 </template>
 <script setup>
-import { siteConfig } from '../../site.config'
+
+const siteConfig = useSiteConfig()
 
 definePageMeta({
   layout: "home",
diff --git a/app/pages/projects/index.vue b/app/pages/projects/index.vue
@@ -239,7 +239,8 @@
 </template>
 
 <script setup>
-import { siteConfig } from '../../../site.config'
+
+const siteConfig = useSiteConfig()
 
 definePageMeta({
   layout: 'default'
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -9,5 +9,25 @@ services:
       NODE_ENV: production
       HOST: 0.0.0.0
       PORT: 3000
+      SITE_AUTHOR: ${SITE_AUTHOR:-}
+      SITE_TITLE: ${SITE_TITLE:-}
+      SITE_DESCRIPTION: ${SITE_DESCRIPTION:-}
+      SITE_KEYWORDS: ${SITE_KEYWORDS:-}
+      SITE_URL: ${SITE_URL:-}
+      SITE_EMAIL: ${SITE_EMAIL:-}
+      SITE_LANG: ${SITE_LANG:-}
+      SITE_START_TIME: ${SITE_START_TIME:-}
+      SITE_ANALYTICS_SCRIPT: ${SITE_ANALYTICS_SCRIPT:-}
+      SITE_ANALYTICS_WEBSITE_ID: ${SITE_ANALYTICS_WEBSITE_ID:-}
+      SITE_PROFILE_AVATAR: ${SITE_PROFILE_AVATAR:-}
+      SITE_PROFILE_BADGE: ${SITE_PROFILE_BADGE:-}
+      SITE_PROFILE_INTRO: ${SITE_PROFILE_INTRO:-}
+      SITE_PROFILE_MOTTO: ${SITE_PROFILE_MOTTO:-}
+      SITE_PROFILE_TECH_STACK: ${SITE_PROFILE_TECH_STACK:-}
+      SITE_PROFILE_STATEMENT: ${SITE_PROFILE_STATEMENT:-}
+      SITE_PROFILE_GITHUB_CHART: ${SITE_PROFILE_GITHUB_CHART:-}
+      SITE_GITHUB_URL: ${SITE_GITHUB_URL:-}
+      SITE_QQ_URL: ${SITE_QQ_URL:-}
+      SITE_FOOTER_ICP_LABEL: ${SITE_FOOTER_ICP_LABEL:-}
     volumes:
       - ./content:/app/content
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,4 +1,168 @@
-import { siteConfig } from "./site.config";
+const splitEnvList = (value, fallback) => {
+  if (!value) {
+    return fallback;
+  }
+
+  const items = value
+    .split('|')
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+  return items.length > 0 ? items : fallback;
+};
+
+const defaultProfileTechStack = [
+  {
+    label: 'Python',
+    icon: 'https://img.shields.io/badge/-Python-3776AB?logo=python&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'CUDA',
+    icon: 'https://img.shields.io/badge/-CUDA-76B900?logo=nvidia&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'C++',
+    icon: 'https://img.shields.io/badge/-C++-00599C?logo=cplusplus&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'JavaScript',
+    icon: 'https://img.shields.io/badge/-JavaScript-yellow?logo=javascript&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'HTML5',
+    icon: 'https://img.shields.io/badge/-HTML5-E34F26?logo=html5&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'Vue',
+    icon: 'https://img.shields.io/badge/-Vue-4FC08D?logo=vue.js&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'PHP',
+    icon: 'https://img.shields.io/badge/-PHP-777BB4?logo=php&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'Docker',
+    icon: 'https://img.shields.io/badge/-Docker-2496ED?logo=docker&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'Slurm',
+    icon: 'https://img.shields.io/badge/-Slurm-1F1F1F?logo=linux&logoColor=white&style=flat-square',
+  },
+  {
+    label: 'Ubuntu',
+    icon: 'https://img.shields.io/badge/-Ubuntu-E95420?logo=ubuntu&logoColor=white&style=flat-square',
+  },
+];
+
+const parseTechStack = (value, fallback) => {
+  if (!value) {
+    return fallback;
+  }
+
+  const items = value
+    .split('|')
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .map((item) => {
+      const [label, icon] = item.split('::').map((part) => part.trim());
+
+      if (!label || !icon) {
+        return null;
+      }
+
+      return { label, icon };
+    })
+    .filter(Boolean);
+
+  return items.length > 0 ? items : fallback;
+};
+
+const author = process.env.SITE_AUTHOR || '染念';
+const title = process.env.SITE_TITLE || '染念的笔记';
+const description = process.env.SITE_DESCRIPTION || 'Writing code, painful and happy';
+const keywords =
+  process.env.SITE_KEYWORDS || '染念,染念的笔记,染念の笔记,染念的博客,博客,blog';
+const url = process.env.SITE_URL || 'https://dyedd.cn';
+const email = process.env.SITE_EMAIL || '1176996982@qq.com';
+const lang = process.env.SITE_LANG || 'zh-CN';
+const startTime = process.env.SITE_START_TIME || '2017-02-11';
+const profileAvatar = process.env.SITE_PROFILE_AVATAR || '/logo.jpg';
+const normalizedSiteUrl = url.replace(/\/$/, '');
+const profileAvatarUrl = /^https?:\/\//.test(profileAvatar)
+  ? profileAvatar
+  : `${normalizedSiteUrl}/${profileAvatar.replace(/^\//, '')}`;
+
+const defaultSiteConfig = {
+  author,
+  title,
+  description,
+  keywords,
+  url,
+  email,
+  lang,
+  startTime,
+  analytics: {
+    script: process.env.SITE_ANALYTICS_SCRIPT || 'https://statistics.dyedd.cn/script.js',
+    websiteId:
+      process.env.SITE_ANALYTICS_WEBSITE_ID || '11a02a3f-0cdd-452a-bbb8-37f195db86fd',
+  },
+  profile: {
+    name: author,
+    avatar: profileAvatar,
+    badge: process.env.SITE_PROFILE_BADGE || '🐟',
+    introduction: splitEnvList(process.env.SITE_PROFILE_INTRO, [
+      'AI infra研究生，目前研究大规模分布式训练以及扩散模型在短临降水领域的应用',
+      '过去我也学习过前后端，所以现在也是不专业的全栈开发者',
+    ]),
+    motto: splitEnvList(process.env.SITE_PROFILE_MOTTO, ['🐎 马到成功，心想事成', '🌈🌈🌈']),
+    statement:
+      process.env.SITE_PROFILE_STATEMENT ||
+      '我将在这里分享我的编程和人工智能知识。如果你对这些主题感兴趣，那么恭喜你找到宝藏了。接下来你可以查看内容或订阅',
+    githubContributionChart:
+      process.env.SITE_PROFILE_GITHUB_CHART || 'https://ghchart.rshah.org/409ba5/dyedd',
+    techStack: parseTechStack(process.env.SITE_PROFILE_TECH_STACK, defaultProfileTechStack),
+  },
+  socialLinks: {
+    github: {
+      label: 'GitHub',
+      icon: 'github',
+      url: process.env.SITE_GITHUB_URL || 'https://github.com/dyedd',
+    },
+    email: {
+      label: 'Email',
+      icon: 'youxiang',
+      url: `mailto:${email}`,
+    },
+    qq: {
+      label: 'QQ',
+      icon: 'QQ',
+      url:
+        process.env.SITE_QQ_URL ||
+        'https://qm.qq.com/cgi-bin/qm/qr?k=nLIdzy8UC9VkZ0g2EwnoN1rwnxaYvFx0&jump_from=webapi&authKey=mq2RvfcTQxEgImX+XZv0tBeobeHX+wTaAxOXq7pEKdsUD+a2Hi7mIOBGEj2ZtSDJ',
+      title: 'QQ',
+    },
+  },
+  footer: {
+    copyrightName: author,
+    poweredBy: {
+      label: 'Powered by serenade',
+      url: 'https://github.com/dyedd/serenade',
+    },
+    icp: {
+      label: process.env.SITE_FOOTER_ICP_LABEL || '备案号:浙ICP备19020194号-1',
+      url: 'https://beian.miit.gov.cn/',
+    },
+  },
+  friends: {
+    applicationTemplate: {
+      name: author,
+      url,
+      logo: profileAvatarUrl,
+      description,
+      rss: `${normalizedSiteUrl}/feed`,
+    },
+  },
+};
 
 export default defineNuxtConfig({
   compatibilityDate: "2025-12-17",
@@ -21,24 +185,17 @@ export default defineNuxtConfig({
   app: {
     rootId: "nuxt-root",
     head: {
-      title: siteConfig.title,
-      htmlAttrs: { lang: siteConfig.lang },
-      meta: [
-        { name: "description", content: siteConfig.description },
-        { name: "author", content: siteConfig.author },
-        { name: "keywords", content: siteConfig.keywords },
-      ],
       script: [
         { src: "/iconfont.js", defer: true },
-        {
-          src: siteConfig.analytics.script,
-          defer: true,
-          "data-website-id": siteConfig.analytics.websiteId,
-        },
       ],
       noscript: [{ textContent: "JavaScript is required" }],
     },
   },
+  runtimeConfig: {
+    public: {
+      siteConfig: defaultSiteConfig,
+    },
+  },
   css: ["~/assets/css/main.css", "highlight.js/styles/atom-one-dark.css"],
   modules: ["@nuxtjs/tailwindcss"],
   vite: {
diff --git a/server/routes/feed.js b/server/routes/feed.js
diff --git a/site.config.ts b/site.config.ts
