声明新风格-v1

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

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

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

1copyright: false