关于Gridea文章页底部增加版权声明的教程

主题教程 · 2026-04-11 · 13 分钟阅读
教程 Gridea
关于Gridea文章页底部增加版权声明的教程

版权声明是博主保护原创内容的重要方式，不仅能明确内容归属、警示侵权行为，还能提升博客的专业性与规范性。Gridea作为简洁易用的静态博客客户端，支持通过主题模板修改实现文章页底部版权声明的永久添加，无需每篇文章手动编辑。此次版权声明样式借鉴小N同学文章页增加版权声明教程，并将其移植到Gridea主题中，本教程将提供实操方法，适配不同技术基础的用户，全程步骤清晰、可直接照搬，同时兼顾HTML语义规范与版权声明的完整性。本文提供全部代码文件由蓝奏云服务提供下载，在此向小N同学致敬。

一、前期准备（必做）

在开始操作前，做好以下准备，避免操作失误导致主题异常或内容丢失：

  1. 备份主题文件：打开Gridea根目录，进入「Themes」页面，找到当前正在使用的主题「Flavor-theme」（以Flavor主题为例），鼠标右键点击「压缩」，将主题压缩包保存至电脑本地（若操作出错，可通过「导入主题」恢复）。
  2. 确认主题结构：Gridea主题基于EJS模板引擎构建，核心模板文件集中在「templates」文件夹下，文章页对应的模板通常为「post.html」（部分主题命名为「article.ejs」），确认，这是我们修改的核心文件。
  3. 准备版权声明内容：提前编辑好隐私政策与免责声明文章「post/privacy-policy」以及「post/disclaimer」，可根据需求补充转载要求等。
  4. 下载完整的代码：文章页版权声明（Gridea移植版）

二、按步骤修改主题文件

（一）引入 FontAwesome 图标库（用于版权模块背景图标）

在主题目录下「themes/flavor-theme/templates/partials/head.html」找到head.html文件。

在{# Main stylesheet — split into modules for maintainability #}标签底部约12行位置，添加如下代码：

<!-- 引入 FontAwesome 图标库（用于版权模块背景图标） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">

提供以下head.html完整版示例，可直接覆盖原文件，已在文中作出标识。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

{# Main stylesheet — split into modules for maintainability #}
<link rel="stylesheet" href="/styles/base.css">
<link rel="stylesheet" href="/styles/layout.css">
<link rel="stylesheet" href="/styles/components.css">
<link rel="stylesheet" href="/styles/article.css">
<link rel="stylesheet" href="/styles/pages.css">
<link rel="stylesheet" href="/styles/comments.css">
<link rel="stylesheet" href="/styles/utilities.css">
<link rel="stylesheet" href="/styles/responsive.css">
<!-- 引入 FontAwesome 图标库（用于版权模块背景图标） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">

{# Favicon #}
<link rel="icon" href="/favicon.ico" type="image/x-icon">

{# SEO meta tags #}
<meta name="description" content="{{ config.siteDescription|default:"" }}">
<meta property="og:site_name" content="{{ config.siteName }}">
<meta property="og:title" content="{% block og_title %}{{ config.siteName }}{% endblock %}">
<meta property="og:description" content="{{ config.siteDescription|default:"" }}">
{% if config.avatar %}
<meta property="og:image" content="{{ config.avatar }}">
{% endif %}
<meta property="og:url" content="{{ config.domain }}">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ config.siteName }}">
<meta name="twitter:description" content="{{ config.siteDescription|default:"" }}">
{% if config.avatar %}
<meta name="twitter:image" content="{{ config.avatar }}">
{% endif %}

（二）定位文章底部位置，插入版权声明代码

定位文章模版文件路径「themes\flavor-theme\templates\post.html」，在「post.html」文件中，向下滚动，找到文章内容结束的位置，通常可通过关键词定位：

  • 找到包含「{{ post.content|safe }}」的代码（这是文章内容的渲染标签，代表文章正文结束）； - 或找到「</article>」「</div>」等标签（代表文章容器结束），版权声明需放在这些标签之后、页脚容器之前。

  • 代码放在「{{ post.content|safe }}」代码之下， 「{# ── Prev / Next navigation ── #}」代码之上，约49-76行之间。

  <div class="article-content">
    {{ post.content|safe }}
  </div>

<!-- 文章版权信息模块（冷汐专属） -->
<!-- 文章版权信息模块（Flavor主题专属优化版） -->
<div class="post-copyright">
  <div class="post-copyright__title">
    <strong>{{ post.title }}</strong>
  </div>
  <div class="post-copyright__link">
    <a href="{{ post.permalink }}">{{ post.permalink }}</a>
  </div>
  <div class="post-copyright__info">
    <div class="post-copyright__item">
      <span class="post-copyright__label">文章作者</span>
      <a href="/post/about">冷汐</a>
    </div>
    <div class="post-copyright__item">
      <span class="post-copyright__label">隐私政策</span>
      <a href="/post/privacy-policy">PrivacyPolicy</a>
    </div>
    <div class="post-copyright__item">
      <span class="post-copyright__label">免责声明</span>
      <a href="/post/disclaimer">Disclaimer</a>
    </div>
    <div class="post-copyright__item">
      <span class="post-copyright__label">许可协议</span>
      <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en" target="_blank" rel="noopener external nofollow noreferrer">CC BY-NC-ND 4.0</a>
    </div>
  </div>
</div>


  {# ── Prev / Next navigation ── #}
  <nav class="post-nav">
    {% if post.prevPost %}
    <a href="{{ post.prevPost.link }}" class="post-nav-card post-nav-card--prev">
      {% if post.prevPost.feature %}
      <div class="post-nav-card__img">
        <img src="{{ post.prevPost.feature }}" alt="{{ post.prevPost.title }}" loading="lazy" />
      </div>

由于整体代码过多，以上提供post.html部分版示例，可在文中找到相关位置覆盖代码，已在文中作出标识。

（三）引入CSS代码，添加文章版权模块样式（适配 Flavor 主题，其他主题可通过修改此处代码修改样式）

定位模块样式CSS文件路径「themes\flavor-theme\assets\styles\article.css」，在「article.css」文件中，向下滚动到最底部，在代码最后位置添加如下代码：

/* 文章底部版权信息-移植小N同学 */

/* 文章版权模块（深色主题 · 最终优化版：白色hover+白色文字） */
.post-copyright {
  background-color: #1a1a1a !important;
  border-radius: 12px;
  border: 1px solid #333;
  padding: 1.5rem;
  margin: 2rem 0;
  line-height: 1.6;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 右侧CC版权图标（保持100%正常显示） */
.post-copyright::before {
  content: "\f25e";
  position: absolute;
  right: -40px;
  top: -100px;
  font-size: 200px;
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.15);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* 文章标题样式（白色适配深色） */
.post-copyright__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 2;
}

/* 文章链接样式（若保留则同步白色，无则不影响） */
.post-copyright__link {
  font-size: 0.95rem;
  color: #ffffff;
  margin-bottom: 1rem;
  word-break: break-all;
  position: relative;
  z-index: 2;
}
.post-copyright__link a {
  color: inherit;
  text-decoration: none;
}
.post-copyright__link a:hover {
  text-decoration: underline;
}

/* 信息栏布局 */
.post-copyright__info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}
.post-copyright__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: #ffffff;
}

/* 标签文字（文章作者/隐私政策等）保持灰色，区分层级 */
.post-copyright__label {
  color: #999;
  font-weight: 500;
}

/* ========== 核心修改1：冷汐这一排的链接文字改为白色 ========== */
.post-copyright__item a {
  color: #ffffff !important; /* 强制白色，覆盖所有样式 */
  text-decoration: none;
  font-weight: 500;
}
.post-copyright__item a:hover {
  text-decoration: underline; /* hover时下划线，保留交互感 */
}

/* ========== 核心修改2：外边框hover改为白色亮 ========== */
.post-copyright:hover {
  border-color: #ffffff !important; /* 白色边框 */
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15); /* 白色柔和阴影 */
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .post-copyright {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  .post-copyright__title {
    font-size: 1.1rem;
  }
  .post-copyright__info {
    gap: 1rem;
  }
  .post-copyright::before {
    font-size: 150px;
    top: -70px;
    right: -30px;
  }
}

由于此次代码需添加至最后一行位置，不在过多放置其他位置代码。

三、保存修改，预览效果

  1. 插入代码后，保存「head.html」、「post.html」、「article.css」文件（快捷键Ctrl+S），关闭编辑界面，关闭所有打开的Gridea客户端。
  2. 重启Gridea客户端，点击左侧「预览」，打开任意一篇文章，下拉至页面底部，即可看到版权声明已成功显示，如页底部显示。
  3. 若预览无效果，可重启Gridea客户端，或清除浏览器缓存后再次预览；若出现排版错乱，可调整代码中的css样式参数。

四、注意事项

  1. 适配主题：不同Gridea主题的模板结构可能略有差异，若找不到「post.html」，可查找「article.html」「single.html」，核心是找到文章内容渲染的结束位置。
  2. 补充内容：添加完代码后，其中隐私政策，免责声明等，还需要自行补充相关文章内容。
  3. 部署同步：若已将博客部署到服务器（如你维护的xxxx.ac.cn域名），修改完成后，需点击Gridea客户端的「同步」，将修改同步到服务器，才能在正式环境的博客中看到效果。
关于Gridea文章页底部增加版权声明的教程
文章作者 冷汐
隐私政策 PrivacyPolicy
免责声明 Disclaimer
许可协议 CC BY-NC-ND 4.0

评论