在Hexo中自动为Yilia主题增加版权声明

访问本站所使用的修改过的Yilia源码

起因

写独立个人博客在与别人分享自己的经验和心情的同时，也要保护自己的权益。在文章的结尾为文章添加版权申明，明确的告知了他人可以获得怎样的许可，有朝一日也为自己以后维护权益提供了便利。
本文介绍在Yilia主题的基础上给每篇文章自动添加版权信息，并且可以设置每篇文章是否需要显示版权声明。

更改代码

在themes/yilia/layout/_partial/article.ejs中标注的位置添加代码

<div class="article-entry" itemprop="articleBody">
	<% if (post.excerpt && index){ %>
		<%- post.excerpt %>
		<% if (theme.excerpt_link) { %>
			<a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
		<% } %>
	<% } else { %>
		<%- post.content %>
	<% } %>
	<-- 在此处添加代码-->
	<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
	<div class="page-reward">
		<a href="javascript:;" class="page-reward-btn tooltip-top">
		<div class="tooltip tooltip-east">

添加的代码如下

<%
  var sUrl = url.replace(/index\.html$/, '');
  sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
%>
<% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
  <div class="declare">
    <strong>本文作者：</strong>
    <% if(config.author != undefined){ %>
      <%= config.author%>
    <% }else{%>
      <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
    <%}%>
    <br>
    <strong>本文链接：</strong>
    <%= sUrl%>
    <br>
    <strong>版权声明：</strong>
    本作品采用
    <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
    进行许可。转载请注明出处！
    <% if(theme.licensee_img != undefined){ %>
      <br>
      <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
    <% } %>
  </div>
<% } else {%>
  <div class="declare" hidden="hidden"></div>
<% } %>

更改声明样式

创建新文件themes/yilia/source-src/css/declare.scss，添加如下CSS代码。

.declare {
    background-color: #eaeaea;
    margin-top: 2em;
    border-left: 3px solid #ff1700;
    padding: .5em 1em;
}

为themes/yilia/source-src/css/main.scss添加如下代码。

@import "./declare";

生成新的代码，完成修改

安装依赖

如果你之前没有修改过Yilia，请先使用以下命令安装依赖。
进入主题根目录cd themes/yilia，安装依赖。
npm install

生成新主题

在themes/yilia/目录下输入：
npm run dev生成新代码。
npm run dist生成新代码，并压缩。

添加配置文件

修改themes/yilia/_config.yml

在需要进行版权声明的文章的md文件头部，设置属性。

• 版权基础设定：0-关闭声明； 1-文章对应的md文件里有属性，才有版权声明； 2-所有文章均有版权声明
• 当前应用的版权协议地址。
• 版权协议的名称
• 版权协议的Logo

declare_type: 1
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png

实现细节

通过GitHub查看具体修改
@source-src/css/main.scss:22
@source-src/css/declare.scss
@layout/_partial/article.ejs:20
@layout/_partial/post/declare.ejs