iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

30 天利用 Hexo 打造技術部落格系列 第 21

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,使區塊元素能夠以水平方式排列。

設定完後顯示成果如下,大家也可以修改成自己想要的樣式!

自訂內容:將大頭貼新增到版權宣告區塊

參考資料

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


上一篇
Day 20:設定 404 頁面,不要讓讀者迷路了!
下一篇
Day 22:如何增加你 Hexo 的選單 Icon?
系列文
30 天利用 Hexo 打造技術部落格30

尚未有邦友留言

立即登入留言