One

主题

00:00:00
2025-09-182025-09-27博客搭建Teek
1028
5.5m
0

声明新风格-v2 ​

声明新风格-v2 ​

image-20250831103524541

目录 ​

[toc]

新增👏 ​

本次较v1版本，声明内容里新增了本文标题这一行内容，其它无改动。

image-20250918062054571

背景 ​

Teek默认的文章底部版权说明风格 不太好看，然时光大佬提供了一个不错的解决方案，感谢大佬。❤️❤️❤️

环境 ​

在 Teek@1.4.6-2025.8.31 上测试成功。

2025年9月18日测试。

版权 ​

配置来自《时光驿站》大佬的指导，感谢大佬💖💖💖。

效果 ​

image-20250918061612440

配置 ​

（1）新建docs\.vitepress\theme\components\DocFooterCopyright.vue文件

vue
<template>
  <div v-if="shouldShow" class="shiguang-public">
    <div class="copyright-card">
      <!-- 公共图标 -->
      <span class="copyright-symbol shiguang-icon shiguang-icon-public"></span>

      <div class="copyright-content">
        <!-- 作者信息 -->
        <div class="copyright-item">
          <span class="copyright-meta">
            <span class="shiguang-icon shiguang-icon-user"></span>
            <span class="meta-text">本文作者</span>:
          </span>
          <span class="copyright-info">
            <a :href="config.authorUrl" target="_blank" rel="noopener">{{ config.authorName }}</a>
          </span>
        </div>

        <!-- 文章标题 -->
        <div class="copyright-item">
          <span class="copyright-meta">
            <span class="shiguang-icon shiguang-icon-title"></span>
            <span class="meta-text">本文标题</span>:
          </span>
          <span class="copyright-info">
            {{ $frontmatter.title }}
          </span>
        </div>

        <!-- 文章链接 -->
        <div class="copyright-item">
          <span class="copyright-meta">
            <span class="shiguang-icon shiguang-icon-link"></span>
            <span class="meta-text">本文链接</span>:
          </span>
          <span class="copyright-info">
            <a :href="currentUrl" target="_blank" rel="noopener">{{ currentUrl }}</a>
          </span>
        </div>

        <!-- 版权声明 -->
        <div class="copyright-item">
          <span class="copyright-meta">
            <span class="shiguang-icon shiguang-icon-cc"></span>
            <span class="meta-text">版权声明</span>:
          </span>
          <span class="copyright-info">
            本站文章除特别声明外，均采用
            <a :href="config.licenseUrl" target="_blank" rel="noopener">{{ config.licenseName }}</a>
            协议，转载请注明来自
            <a :href="config.siteUrl" target="_blank" rel="noopener">{{ config.siteName }}</a>！
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useData, useRoute } from 'vitepress'

// 统一配置区
const config = {
  authorName: 'One',
  authorUrl: 'https://onedayxyy.cn/',
  siteName: 'One Blog',
  siteUrl: 'https://onedayxyy.cn/',
  licenseName: 'CC BY-NC-SA 4.0',
  licenseUrl: 'https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh'
}

// 获取 frontmatter 和路由
const { frontmatter } = useData()
const route = useRoute()

// 是否显示版权组件
const shouldShow = computed(() => frontmatter.value.copyright !== false)

// 当前页面完整 URL
const currentUrl = computed(() => {
  const baseUrl = config.siteUrl
  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`
  const path = route.path === '/' ? '' : route.path.replace(/^\//, '')
  return `${normalizedBaseUrl}${path}`
})
</script>

<style scoped>
.shiguang-public {
  margin: 2rem 0;
}

.copyright-card {
  position: relative;
  padding: clamp(12px, 4vw, 16px) clamp(16px, 6vw, 20px);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  background-color: var(--vp-c-bg-alt);
  background: linear-gradient(to bottom, var(--vp-c-bg-alt), var(--vp-c-bg));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: clamp(14px, 4vw, 15px);
  line-height: 1.7;
  overflow: hidden;
}

.copyright-card:hover {
  border-color: var(--vp-c-brand);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(33, 122, 244, 0.12),
    0 0 0 1px var(--vp-c-brand);
}

/* 公共信号图标装饰 */
.copyright-symbol {
  position: absolute;
  top: 12px;
  right: 16px;
  color: var(--vp-c-text-3);
  font-size: 20px;
  opacity: 0.7;
  transition: all 0.3s ease;
  pointer-events: none;
}

.copyright-card:hover .copyright-symbol {
  color: var(--vp-c-brand);
  opacity: 1;
  transform: scale(1.1);
}

/* 内容区布局 */
.copyright-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copyright-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.copyright-meta {
  display: inline-flex;
  align-items: center;
  color: var(--vp-c-text-2);
  white-space: nowrap;
  font-weight: 500;
}

.copyright-meta .shiguang-icon {
  margin-right: 4px;
  font-size: 1em;
}

.meta-text {
  font-variant: small-caps; /* 小型大写字母，提升设计感 */
}

.copyright-info {
  color: var(--vp-c-text-1);
  word-break: break-all;
}

.copyright-info a {
  color: var(--vp-c-brand-1);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.copyright-info a:hover {
  color: var(--vp-c-brand-dark);
  text-decoration: underline;
}

/* 图标使用 Emoji（更现代且无需字体） */
.shiguang-icon::before {
  transform: none !important;
  display: inline-block;
}

.shiguang-icon-user::before { content: '👤'; }
.shiguang-icon-title::before { content: '📝'; }
.shiguang-icon-link::before  { content: '🔗'; }
.shiguang-icon-cc::before    { content: '🌐'; }
.shiguang-icon-public::before { content: '📡'; }

/* 移动端适配 */
@media (max-width: 768px) {
  .copyright-card {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 10px;
  }

  .copyright-symbol {
    top: 10px;
    right: 12px;
    font-size: 18px;
  }

  .copyright-item {
    gap: 4px 8px;
  }

  .meta-text {
    font-size: 0.95em;
  }
}

@media (min-width: 1024px) {
  .copyright-card {
    padding: 16px 20px;
  }
}
</style>

（2）引入

编辑docs\.vitepress\theme\components\TeekLayoutProvider.vue文件：

01.处修改

ts
import DocFooterCopyright from "./DocFooterCopyright.vue"; //导入文档页脚版权组件

image-20250831102923787

02.处修改

ts
    <!-- 文章末尾版权说明 -->
    <template #doc-footer-before>
      <DocFooterCopyright />
    </template>

image-20250831102906597

（3）验证。 结束。

其它 ​

formatter关闭声明 ​

  • 配置方法

在md的formatter配置：

bash
copyright: false
  • 效果（符合预期）

image-20250909074931073

最近更新