Hexo+NexT博客主题优化:在文章底部增加作者版权信息
实现效果图:
步骤如下:
1、 在主题目录
next/layout/_macro/
下,新增文件my-copyright.swig
,填入以下内容:{% if theme.my_copyright.enabled %} <div class="my_post_copyright"> <div style="text-align:center;color: #ccc;font-size:14px;"> ------ 版权信息 ------</div> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p> <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p> <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p> <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p> <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span> </p> <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="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 国际</a> 转载请保留原文链接及作者。</p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script> {% endif %}
2、在主题目录
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: #b5b5b5; 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: #a3d2a3; 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、修改
next/layout/_macro/post.swig
,在代码<footer class="post-footer">
这段代码第一次出现之前的地方,添加如下代码段:
<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %} </div>
4、修改
next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:@import "my-post-copyright"
5、在主题配置文件
_config.yml
中添加字段# 文章末尾添加“版权声明”标记 my_copyright: enabled: true
6、完成以上设置之后,执行命令保存重新生成
$ hexo s -g
以上就是添加“版权声明”的所有步骤了,有什么问题记得一起交流,喜欢的老铁记得双击666!?