【技能樹栽種】新增版權訊息

在閱讀別人網誌中時看到創用 CC 授權條款(Creative Commons license)的宣告,讓我看了有點心動,我決定也來加一個!! 開始前,先從授權條款中的選出所要使用授權方式,我這邊挑選的是姓名標示-非商業性-相同方式分享(BY-NC-SA)

姓名標示-非商業性-相同方式分享
姓名標示-非商業性-相同方式分享(BY-NC-SA)(圖片來源: 維基百科



設計思考

首先先決定放置的位置與期待的外觀:

  1. 位置
    位置的部份倒是很快就決定,因為這並不屬於本文的一部分,而我又不想將它放在開頭喧賓奪主,所以就決定將它放置在 footer 裡。

  2. 外觀
    我希望這段宣告可以被突顯出來。如果單是用粗體或是 Highlight 似乎又不夠顯眼,所以決定用方框或是色塊來突顯文字,但方框似乎與我內文的風格似乎不相同,所以就決定用色塊了!

    是有考慮過複用之前實做的 Alert,但相較之下它風格有點偏華麗,我是說圓角之類、Icon之類的效果,所以被我 Pass。但單純的色塊我又不愛,所以就決定用 blockquote 來實做了!

    題外話,總覺的我的 Alert 的配色有點飽滿,找個時間來把改成最近很紅的莫蘭迪色系好了。



實做

呃…前面雖然稍微勾勒下設計,但開始實作時我才發現 Jekyll-NextT,原本就有提供 copyright 的 UI。雖然 Jekyll-NextT 所提供的 UI 雖然與我勾勒的實作方式不同,但呈現的風格卻有點類似 blockquote。

Jekyll-NextT 的 blockquote


開啟版權訊息功能

不過細節上我沒有很喜歡這個版本,所以我決定順著原本的實做架構重新實做一次。但如果不介意的話,只要完成這個步驟,就可以直接啟用 Jekyll-NextT 所提供 UI。

  1. 設定 config.yml
    先找到 /_config.yml 中的 post_copyright,先將 enable 改成 true,並將 license 填入所選擇的授權方式:
    1
    2
    3
    4
     post_copyright:
       enable: true
       license: CC BY-NC-SA 4.0
       license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en
    


  2. 多語系設定
    預設文字會被放在 _data/languages/default.yml 中,不過實際顯示文字通常會根據你在 /_config.yml 中所設定的 language 而有所不同。

    舉例來說,若你所設定的語系為 zh-tw,則顯示的會以 _data/languages/zh-tw.yml 為主,若在該文件找不到才會去找 default.yml

    因此,請根據你所設定的語系,修改相對應的文件,修改項目如下:

    1
    2
    3
    4
    5
    6
    7
     copyright:
       author: 本文作者
       link: 本文連結
       license_title: 版權聲明
       license_content: '除非另有標注,部落格中所有文章,均採用
         <a href="%s" rel="external nofollow" target="_blank">%s</a> 許可協議。
         轉載請標明作者、連結與出處!'
    


修改外觀

  1. 移動版權訊息位置
    這算是我自己的小執著!?我始終不認為它應該被放在本文當中,所以我找到 _includes/_macro/post.html 中原本post-copyright.html 的位置,把它移動到 footer 裡面:

    刪除:

    1
    2
    3
    4
    5
     <div>
       {% unless is_index %}
         {% include _macro/post-copyright.html %}
       {% endunless %}
     </div>
    

    新增:

    1
    2
    3
    4
    5
    6
    7
     <footer class="post-footer">
       {% unless is_index %}
         {% include _macro/post-copyright.html %}
       ...
       {% endunless %}
       ...
     </footer>
    


  2. 修改 HTML
    我不喜歡原本的 style,所以我完整複寫 include _macro/post-copyright.html 中所有的程式碼:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% if site.post_copyright.enable %}
      <blockquote class="post-copyright">
        <p> 
          <b>{{ __.post.copyright.author | append: __.symbol.colon }}</b>&ensp;
          {{site.author}} <br>
          <b>{{ __.post.copyright.link | append: __.symbol.colon }}</b>&ensp;
          <a href="{{ post.url | absolute_url }}" title="{{ post.title }}">{{ post.url | absolute_url }}</a><br>
    
          <b>{{ __.post.copyright.license_title | append: __.symbol.colon }} </b>&ensp;
          {{ __.post.copyright.license_content | replace_first: '%s', site.post_copyright.license_url | replace_first: '%s', site.post_copyright.license }}
        </p>
      </blockquote>
    {% endif %}
    


  3. 修改 CSS
    根據原本的的實做架構,CSS 的設定分別散落在 _sass/_common/components/post/post-copyright.scss_sass/_variables/base.scss 兩隻程式中。

    其中 base.scss 主要是變數設定:

    1
    2
    3
    4
    5
    6
    7
    8
    // Posts Expand
    // --------------------------------------------------
    $posts-expand-title-font-weight : $font-weight-normal;
    $post-copyright : (
      margin: 30px 0 0,
      border-left-color:red,
      bg: white,
    );
    

    post-copyright.scss 則是套用變數:

    1
    2
    3
    4
    5
    6
    7
    @mixin post-copyright {
      .post-copyright {
        margin: map-get($post-copyright, margin);
        border-left-color: map-get($post-copyright, border-left-color);
        background-color: map-get($post-copyright, bg);
      }
    }  
    

    完成基礎設定後,為了配合網站整體配色,我在 _sass/_variables/custom.scss 中重新配了色:

    1
    2
    3
    4
    5
    $post-copyright : (
        border-left-color: $green-light,
        bg: $greendark-lighter ,    
        color: $greendark-ligh ,
    );
    


最後出來的結果長這樣:

自製 Copyright block


增加版權訊息開關選項

因為我在聲明寫到:「除非另有標注…」,既然寫說另有標注代表可能會有不加訊息的狀況,因此決定加個開關可以決定是否放置版權訊息:

  1. 修改 HTLM 檔
    先回到 _includes/_macro/post.html 中找到剛剛引入 post-copyright.html 的位置,並在 include 外加上條件式。

    在這邊我設定了一個名為 copyright 的 flag,且僅希望在 copyright 設定為 false 時才會隱藏該區域;若未設定或設定為 ture 時,則正常顯示該區,因此我必須明確寫出它的條件式:

    1
    2
    3
     + {% if page.copyright != false %}
         {% include _macro/post-copyright.html %}   
     + {% endif %}
    


  2. ymal 設定
    搞定後,當你某篇文章不放置版權訊息時,就在文章上方的 yaml 區,設定的 copyright 的 flag:

    1
    2
    3
    4
    5
     ---
     title: "【技能樹栽種】新增版權訊息"
     date: 2021-09-02
     + copyright: false
     ---
    



下一步

發現有些網站除了顯示版權訊息外,還會在你複製網頁內容時,自動加上版權聲明、作者與網址等資訊。下一步如果有空的話,我應該會來研究這個該怎實現,等搞定了再來發網誌嘿~!



參考資料

  1. 協同撰寫。創用CC授權條款。檢自 維基百科 (2021-09-06)。
  2. Riemann (2019-08-01)。新增文章底部版權訊息。檢自 Riemann’s Blog (2021-09-09)。



更新紀錄

最後更新日期:2021-09-13
     
  • 2021-09-13 發布
  •  
  • 2021-09-13 完稿
  •  
  • 2021-09-02 起稿