Day 21：在 Hexo 增加作者版权声明（使用 Next 布景）

内容发布到网路上，由於都是开放的，不管是你写的文章、拍摄的相片或是影片，有一定的机率会被转贴。有些人是无法接受被转载文章、有些人则是需要事先通知、以及最基本的注明出处。不管是哪一种协议，我们能够事先在网站或文章上注明，设定 Next 布景主题的版权区块至网站上。

实作方法

进入到 Next 布景的 _config.yml，找到以下这段语法：

creative_commons:
  license: by-nc-sa # 使用的版权协议
  sidebar: true # 是否於边栏显示版权宣告
  post: true # 是否於文章内页显示版权宣告
  language:

如此一来就能够於网站边栏或是文章内容底部（可择一显示）显示版权声明。

版权协议

使用的版权协议，基本上档案上会有这行注解可选择：

# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero

至於各版权协议的差异，可参考：关於授权条款

自订内容

如果你想自订版权宣告区块的内容，也是可以自订修改区块语法。内容及其样式修改如下：

• HTML 内容以及语法：themes/next/layout/_partials/post/post-copyright.swig
• CSS 样式：themes/next/source/css/_common/components/post/post-copyright.styl

如果说我想要在版权宣告区块左侧显示作者大头贴，可以将区块内容代替为以下语法：

HTML

<div class="post-copyright d-flex">
  <img class="site-author-image" itemprop="image" alt="{{ author }}"
        src="{{ url_for(theme.avatar.url) }}">
  <ul class="list-style-none">
    <li class="post-copyright-author">
      <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
      {{- page.author or author }}
    </li>
    <li class="post-copyright-link">
      <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
      {{ next_url(page.permalink, page.permalink, {title: page.title}) }}
    </li>
    <li class="post-copyright-license">
      <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
      {{- __('post.copyright.license_content', next_url(ccURL, ccIcon + ccText)) }}
    </li>
  </ul>
</div>

CSS

.post-copyright {
  background: var(--card-bg-color);
  border-left: 3px solid $red;
  margin: 2em 0 0;
  padding: .5em 1em;
}
.list-style-none {
  list-style: none;
}
.d-flex {
  display: flex;
}

我将原本 .post-copyright 放置到父层，并将原先 .post-copyright 内的 list-style: none; 另外设定一个类别选择器，因为那是针对 ul 内 li 不要出现项目标签使用，并放置於 ul。在设定一个 display: flex; 类别选择器并指定於父层 div，使区块元素能够以水平方式排列。

设定完後显示成果如下，大家也可以修改成自己想要的样式！

参考资料

• 使用Hexo的next主题，配置POST文章文末的版权信息

本篇文章同步发布於我的部落格 Gui Blog