Day 21:在 Hexo 增加作者版權聲明(使用 Next 佈景)

內容發布到網路上,由於都是開放的,不管是你寫的文章、拍攝的相片或是影片,有一定的機率會被轉貼。有些人是無法接受被轉載文章、有些人則是需要事先通知、以及最基本的註明出處。不管是哪一種協議,我們能夠事先在網站或文章上註明,設定 Next 佈景主題的版權區塊至網站上。

作者版權聲明

實作方法

進入到 Next 佈景的 _config.yml,找到以下這段語法:

1
2
3
4
5
creative_commons:
license: by-nc-sa # 使用的版權協議
sidebar: true # 是否於邊欄顯示版權宣告
post: true # 是否於文章內頁顯示版權宣告
language:

如此一來就能夠於網站邊欄或是文章內容底部(可擇一顯示)顯示版權聲明。

於網站上顯示版權聲明

版權協議

使用的版權協議,基本上檔案上會有這行註解可選擇:

1
# 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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

1
2
3
4
5
6
7
8
9
10
11
12
.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,使區塊元素能夠以水平方式排列。

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

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

參考資料

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