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文章文末的版权信息

本篇文章同步發布於 iT 邦幫忙