相信技术的力量

Hexo持续优化-在文章尾部添加版权声明

如果文章没有版权声明信息,可能会发生被他人随意转载、随意修改的情况,如果是普通的技术文章和随笔还好,但如果涉及到一些比较重要的信息,可能会涉及一些未可知的不良后果。

但是如果每篇文章都手动添加版权声明信息,也太没有程序员的职业精神了,所以还是依靠脚本自动生成比较好。

自己使用的Hexo+NexT主题,主题默认的版权声明配置在themes\next\_config.yml文件中

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

直接把enable 改为true即可开启。

不过自己对默认的效果不太满意,想自定义一下,模仿IIssNan 的声明效果,先上最终效果图

Hexo持续优化-在文章尾部添加版权声明信息

具体步骤整理如下:

自定义版权声明HTML代码

定位到themes\next\layout\_macro\post.swig文件,找到<footer class="post-footer">节点,该节点包括了每篇文章底部的tag、span分割线等标签,可以根据自己的需要放置【版权声明】的位置。

<footer class="post-footer">

   {# 版权声明节点 #}
     <div>    
      {% if not is_index %}
      <ul class="post-copyright">
         <li class="post-copyright-link">
          <strong>本文作者:</strong>
          <a href="/" title="欢迎访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a>
        </li>

        <li class="post-copyright-link">
          <strong>本文标题:</strong>
          <a href="{{ url_for(post.permalink) }}" title="{{ post.title }}">{{ post.title }}</a>
        </li>

        <li class="post-copyright-link">
          <strong>本文链接:</strong>
          <a href="{{ url_for(post.permalink) }}" title="{{ post.title }}">{{ post.permalink }}</a>
        </li>

        <li class="post-copyright-date">
            <strong>发布时间:</strong>{{ post.date.format("YYYY年M月D日 - HH时MM分") }}
        </li>  

        <li class="post-copyright-license">
          <strong>版权声明: </strong>
          本文由 {{theme.author}} 原创,采用 <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh" rel="license" target="_blank">保留署名-非商业性使用-禁止演绎 4.0-国际许可协议</a> </br>转载请保留以上声明信息!
        </li>
      </ul>
    {% endif %}
  </div>
...

里面都是基础的HTML代码,使用了一个无序列表用于展示版权声明的各项信息,这里可以随意diy。
当然里面涉及一些属性,比如:

  • theme.author : 作者名
  • post.title :文章标题
  • post.path :文章相对路径
  • post.permalink : 文章绝对路径
  • post.date : 日期

注意

  • 这里用page和post效果一样,比如page.title , page.path
  • 我这里基本都做成了超链接形式,也可以做成文本形式,看自己意愿而定。

通过类选择器添加自定义样式

定位到themes\next\source\css\_custom\custom.styl 文件,通过类选择器添加CSS样式

// Custom styles.

.post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #FF1700;
    background-color: #F9F9F9;
    list-style: none;
}

本地部署先看看效果吧,也可以到 http://www.crocutax.com 看看效果。

参考链接

https://arcecho.github.io/2017/04/08/Hexo-Next%E4%B8%8B%E6%B7%BB%E5%8A%A0%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E%E6%A8%A1%E5%9D%97/

http://crossingmay.com/2016/04/20/updatehexo/

(完)

⬆️