××××

📋 版号管理使用说明

📂纸鸢博客配置/页面说明
💬

如何在页脚和MD文档中使用版号变量

📅发布于2026-04-05
⏱️阅读时间17 分钟
📝5074 字
📁分类纸鸢博客配置

📋 版号管理使用说明

本文档介绍如何在纸鸢博客中使用版号变量功能。

🏷️ 支持的版号变量

在页脚配置和 MD 文档中，你可以使用以下变量：

变量 说明 示例
v1.1.7 完整版号（默认） v1.0.0
v1.1.7 完整版号 v1.0.0-beta+build123
v1.1.7 简化版号 v1.0.0
v1.1.7 (2026-04-18) 版号带日期 v1.0.0 (2026-04-05)
1 主版本号 1
1 次版本号 0
7 修订号 0
版本标签 beta
构建号 build123
2026-04-18 发布日期 2026-04-05

📊 当前版本信息

  • 当前版本: v1.1.7
  • 简化版本: v1.1.7
  • 带日期版本: v1.1.7 (2026-04-18)
  • 版本详情: 1.1.7

🦶 在页脚中使用

在 src/config/footer.ts 或 .config/footer.ts 中，可以在以下字段使用版号变量：

  • brand.logoText - Logo 文本
  • brand.description - 品牌描述
  • quickLinks.title - 快速链接标题
  • quickLinks.links[].text - 链接文本
  • resources.title - 资源标题
  • resources.links[].text - 资源链接文本
  • contact.title - 联系信息标题
  • contact.items[].text - 联系项文本
  • copyright[] - 版权信息（数组每一项）

💡 示例

/* ⚡ 版权信息（支持换行，使用数组形式） */
copyright: [
  '© 2026 纸鸢博客 · 版本 v1.1.7',
  '用 💕 和 熬夜 精心制作'
],

📝 在 MD 文档中使用

在任何 Markdown 文档中，都可以直接使用版号变量：

本文档适用于版本 v1.1.7

## 更新日志

### v1.1.7 (2026-04-18)
- 新增功能 A
- 修复问题 B

渲染结果：

本文档适用于版本 v1.1.7

更新日志

v1.1.7 (2026-04-18)

  • 新增功能 A
  • 修复问题 B

🟢 在 Vue 组件中使用

1️⃣ 导入版号配置

在 Vue 组件的 <script setup> 中导入版号对象：

<script setup lang="ts">
import { version } from '../../../config/version';

// 现在可以在模板中使用 version 对象
console.log('当前版本:', version.full); // v1.0.0
</script>

2️⃣ 在模板中显示版号

<template>
  <div class="version-info">
    <!-- 显示完整版号 -->
    <p>当前版本: {{ version.full }}</p>
    
    <!-- 显示简化版号 -->
    <p>版本号: {{ version.short }}</p>
    
    <!-- 显示带日期的版号 -->
    <p>发布版本: {{ version.withDate }}</p>
    
    <!-- 显示版本详情 -->
    <p>版本详情: {{ version.major }}.{{ version.minor }}.{{ version.patch }}</p>
  </div>
</template>

📦 完整示例

创建一个显示版号的 Vue 组件：

<!-- src/components/VersionBadge.vue -->
<template>
  <span class="version-badge" :title="`发布于 ${version.releaseDate}`">
    v{{ version.major }}.{{ version.minor }}.{{ version.patch }}
    <span v-if="version.label" class="version-label">-{{ version.label }}</span>
  </span>
</template>

<script setup lang="ts">
import { version } from '../config/version';
</script>

<style scoped>
.version-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.version-label {
  opacity: 0.8;
}
</style>

🔄 使用版号变量替换函数

如果需要在字符串中替换版号变量（如 v1.1.7）：

<script setup lang="ts">
import { version, replaceVersionVariables } from '../../../config/version';

// 原始字符串包含版号变量
const rawText = '当前版本: v1.1.7，发布日期: 2026-04-18';

// 替换后的字符串
const processedText = replaceVersionVariables(rawText);
// 结果: '当前版本: v1.0.0，发布日期: 2026-04-05'
</script>

🟠 在 Astro 组件中使用

1️⃣ 导入版号配置

在 Astro 组件的 Frontmatter 中导入版号对象：

---
import { version } from '../../../config/version';
---

2️⃣ 在模板中显示版号

---
import { version } from '../../../config/version';
---

<div class="version-info">
  <!-- 显示完整版号 -->
  <p>当前版本: {version.full}</p>
  
  <!-- 显示简化版号 -->
  <p>版本号: {version.short}</p>
  
  <!-- 显示带日期的版号 -->
  <p>发布版本: {version.withDate}</p>
  
  <!-- 显示版本详情 -->
  <p>版本详情: {version.major}.{version.minor}.{version.patch}</p>
</div>

📦 完整示例

创建一个显示版号的 Astro 组件：

---
// src/components/VersionBadge.astro
import { version } from '../config/version';
---

<span class="version-badge" title={`发布于 ${version.releaseDate}`}>
  v{version.major}.{version.minor}.{version.patch}
  {version.label && <span class="version-label">-{version.label}</span>}
</span>

<style>
  .version-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .version-label {
    opacity: 0.8;
  }
</style>

📄 在页面中使用版号组件

---
// src/pages/index.astro
import VersionBadge from '../components/VersionBadge.astro';
import { version } from '../config/version';
---

<html>
  <body>
    <header>
      <h1>我的网站</h1>
      <VersionBadge />
    </header>
    
    <footer>
      <p>© 2026 我的网站 · 版本 {version.full}</p>
    </footer>
  </body>
</html>

🔄 使用版号变量替换函数

在 Astro 组件中替换字符串中的版号变量：

---
import { version, replaceVersionVariables } from '../../../config/version';

// 原始字符串包含版号变量
const rawText = '当前版本: v1.1.7，发布日期: 2026-04-18';

// 替换后的字符串
const processedText = replaceVersionVariables(rawText);
// 结果: '当前版本: v1.0.0，发布日期: 2026-04-05'
---

<p>{processedText}</p>

⚖️ Vue vs Astro 使用对比

特性 Vue 组件 Astro 组件
导入方式 <script setup> Frontmatter (---)
模板语法 {{ version.full }} {version.full}
渲染时机 客户端/服务端 构建时静态生成
适用场景 交互式组件 静态内容展示

💡 选择建议

  • 使用 Vue 组件：需要客户端交互、动态更新版号显示
  • 使用 Astro 组件：纯静态展示、更好的性能、SEO 友好

⚙️ 自定义版号配置

你可以通过创建 .config/version.ts 文件来自定义版号：

export const versionConfig = {
  major: 2,
  minor: 1,
  patch: 0,
  label: 'beta',
  build: '20250405',
  releaseDate: '2026-04-05'
};

如果不创建自定义配置，将使用默认配置：

{
  major: 1,
  minor: 0,
  patch: 0,
  build: '',
  label: '',
  releaseDate: new Date().toISOString().split('T')[0] // 当前日期
}

📐 版本号格式说明

版号遵循语义化版本控制规范（SemVer）：

  • 主版本号 (major): 当进行不兼容的 API 更改时递增
  • 次版本号 (minor): 当以向后兼容的方式添加功能时递增
  • 修订号 (patch): 当进行向后兼容的问题修复时递增

可选的扩展：

  • 版本标签 (label): 如 alpha、beta、rc
  • 构建号 (build): 如 CI 构建号或日期

完整版号格式：v{major}.{minor}.{patch}[-{label}][+{build}]

本文档最后更新于 v1.1.7 (2026-04-18)

🕊️ 白木 原创开发 🔗 gl.baimu.live