Hexo博客NexT主题美化之自定义文章底部版权声明

前言

更多效果展示，请访问我的 个人博客。

---

效果图：

---

教程：

1. 在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：

{% if page.copyright %}
"my_post_copyright">
  
  
  
  
  
  "stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  
本文标题:{{ page.title }}
  
文章作者:{{ theme.author }}
  
发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}
  
最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}
  
原始链接:"{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}
    "copy-path"  title="点击复制文章链接">"fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！">
  
  
许可协议:"fa fa-creative-commons"> "license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
  


{% endif %}
复制代码

2. 在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #333333; // title color
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #0593d3; // link color
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
复制代码

3. 修改 themes/next/layout/_macro/post.swig ，如下：
   在代码

{% if theme.wechat_subscriber.enabled and not is_index %}
    

        {% include 'wechat-subscriber.swig' %}
    
{% endif %}
复制代码

之前，新增如下代码：

    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}

复制代码

4. 打开 themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码：

@import "my-post-copyright"
复制代码

5. 设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ～/scaffolds/post.md 文件，如下：

---
title: {{ title }}
date: {{ date }}
copyright: true #新增,开启
---
复制代码

---