声明新风格-v2

  1<template>
  2  <div v-if="shouldShow" class="shiguang-public">
  3    <div class="copyright-card">
  4      <!-- 公共图标 -->
  5      <span class="copyright-symbol shiguang-icon shiguang-icon-public"></span>
  6
  7      <div class="copyright-content">
  8        <!-- 作者信息 -->
  9        <div class="copyright-item">
 10          <span class="copyright-meta">
 11            <span class="shiguang-icon shiguang-icon-user"></span>
 12            <span class="meta-text">本文作者</span>:
 13          </span>
 14          <span class="copyright-info">
 15            <a :href="config.authorUrl" target="_blank" rel="noopener">{{ config.authorName }}</a>
 16          </span>
 17        </div>
 18
 19        <!-- 文章标题 -->
 20        <div class="copyright-item">
 21          <span class="copyright-meta">
 22            <span class="shiguang-icon shiguang-icon-title"></span>
 23            <span class="meta-text">本文标题</span>:
 24          </span>
 25          <span class="copyright-info">
 26            {{ $frontmatter.title }}
 27          </span>
 28        </div>
 29
 30        <!-- 文章链接 -->
 31        <div class="copyright-item">
 32          <span class="copyright-meta">
 33            <span class="shiguang-icon shiguang-icon-link"></span>
 34            <span class="meta-text">本文链接</span>:
 35          </span>
 36          <span class="copyright-info">
 37            <a :href="currentUrl" target="_blank" rel="noopener">{{ currentUrl }}</a>
 38          </span>
 39        </div>
 40
 41        <!-- 版权声明 -->
 42        <div class="copyright-item">
 43          <span class="copyright-meta">
 44            <span class="shiguang-icon shiguang-icon-cc"></span>
 45            <span class="meta-text">版权声明</span>:
 46          </span>
 47          <span class="copyright-info">
 48            本站文章除特别声明外，均采用
 49            <a :href="config.licenseUrl" target="_blank" rel="noopener">{{ config.licenseName }}</a>
 50            协议，转载请注明来自
 51            <a :href="config.siteUrl" target="_blank" rel="noopener">{{ config.siteName }}</a>！
 52          </span>
 53        </div>
 54      </div>
 55    </div>
 56  </div>
 57</template>
 58
 59<script setup>
 60import { computed } from 'vue'
 61import { useData, useRoute } from 'vitepress'
 62
 63// 统一配置区
 64const config = {
 65  authorName: 'One',
 66  authorUrl: 'https://onedayxyy.cn/',
 67  siteName: 'One Blog',
 68  siteUrl: 'https://onedayxyy.cn/',
 69  licenseName: 'CC BY-NC-SA 4.0',
 70  licenseUrl: 'https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh'
 71}
 72
 73// 获取 frontmatter 和路由
 74const { frontmatter } = useData()
 75const route = useRoute()
 76
 77// 是否显示版权组件
 78const shouldShow = computed(() => frontmatter.value.copyright !== false)
 79
 80// 当前页面完整 URL
 81const currentUrl = computed(() => {
 82  const baseUrl = config.siteUrl
 83  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`
 84  const path = route.path === '/' ? '' : route.path.replace(/^\//, '')
 85  return `${normalizedBaseUrl}${path}`
 86})
 87</script>
 88
 89<style scoped>
 90.shiguang-public {
 91  margin: 2rem 0;
 92}
 93
 94.copyright-card {
 95  position: relative;
 96  padding: clamp(12px, 4vw, 16px) clamp(16px, 6vw, 20px);
 97  border: 1px solid var(--vp-c-divider);
 98  border-radius: 12px;
 99  background-color: var(--vp-c-bg-alt);
100  background: linear-gradient(to bottom, var(--vp-c-bg-alt), var(--vp-c-bg));
101  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
102  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
103  font-size: clamp(14px, 4vw, 15px);
104  line-height: 1.7;
105  overflow: hidden;
106}
107
108.copyright-card:hover {
109  border-color: var(--vp-c-brand);
110  transform: translateY(-2px);
111  box-shadow: 
112    0 4px 12px rgba(33, 122, 244, 0.12),
113    0 0 0 1px var(--vp-c-brand);
114}
115
116/* 公共信号图标装饰 */
117.copyright-symbol {
118  position: absolute;
119  top: 12px;
120  right: 16px;
121  color: var(--vp-c-text-3);
122  font-size: 20px;
123  opacity: 0.7;
124  transition: all 0.3s ease;
125  pointer-events: none;
126}
127
128.copyright-card:hover .copyright-symbol {
129  color: var(--vp-c-brand);
130  opacity: 1;
131  transform: scale(1.1);
132}
133
134/* 内容区布局 */
135.copyright-content {
136  display: flex;
137  flex-direction: column;
138  gap: 8px;
139}
140
141.copyright-item {
142  display: flex;
143  align-items: flex-start;
144  flex-wrap: wrap;
145  gap: 6px 8px;
146}
147
148.copyright-meta {
149  display: inline-flex;
150  align-items: center;
151  color: var(--vp-c-text-2);
152  white-space: nowrap;
153  font-weight: 500;
154}
155
156.copyright-meta .shiguang-icon {
157  margin-right: 4px;
158  font-size: 1em;
159}
160
161.meta-text {
162  font-variant: small-caps; /* 小型大写字母，提升设计感 */
163}
164
165.copyright-info {
166  color: var(--vp-c-text-1);
167  word-break: break-all;
168}
169
170.copyright-info a {
171  color: var(--vp-c-brand-1);
172  text-decoration: none;
173  font-weight: 500;
174  transition: color 0.2s;
175}
176
177.copyright-info a:hover {
178  color: var(--vp-c-brand-dark);
179  text-decoration: underline;
180}
181
182/* 图标使用 Emoji（更现代且无需字体） */
183.shiguang-icon::before {
184  transform: none !important;
185  display: inline-block;
186}
187
188.shiguang-icon-user::before { content: '👤'; }
189.shiguang-icon-title::before { content: '📝'; }
190.shiguang-icon-link::before  { content: '🔗'; }
191.shiguang-icon-cc::before    { content: '🌐'; }
192.shiguang-icon-public::before { content: '📡'; }
193
194/* 移动端适配 */
195@media (max-width: 768px) {
196  .copyright-card {
197    padding: 12px 14px;
198    font-size: 14px;
199    border-radius: 10px;
200  }
201
202  .copyright-symbol {
203    top: 10px;
204    right: 12px;
205    font-size: 18px;
206  }
207
208  .copyright-item {
209    gap: 4px 8px;
210  }
211
212  .meta-text {
213    font-size: 0.95em;
214  }
215}
216
217@media (min-width: 1024px) {
218  .copyright-card {
219    padding: 16px 20px;
220  }
221}
222</style>

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

1    <!-- 文章末尾版权说明 -->
2    <template #doc-footer-before>
3      <DocFooterCopyright />
4    </template>

1copyright: false