Hexo博客NexT主题美化之自定义文章底部版权声明
2019-03-05 10:01
337 查看
版权声明:转载请保留原文链接及作者 https://blog.csdn.net/u011236348/article/details/88169271
前言
更多效果展示,请访问我的 个人博客。
效果图:
教程:
- 在目录
themes/next/layout/_macro/
下添加my-copyright.swig
,内容如下:
{% if page.copyright %} <div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS库 sweetalert 可修改路径 --> <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script> <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css"> <p><span>本文标题:</span>{{ page.title }}</a></p> <p><span>文章作者:</span>{{ theme.author }}</a></p> <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p> <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</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'); clipboard.on('success', $(function(){ $(".fa-clipboard").click(function(){ swal({ title: "", text: '复制成功', html: false, timer: 500, showConfirmButton: false }); }); })); </script> {% endif %}
- 在目录
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; }
- 修改
themes/next/layout/_macro/post.swig
,如下:
在代码
{% if theme.wechat_subscriber.enabled and not is_index %} <div> {% include 'wechat-subscriber.swig' %} </div> {% endif %}
之前,新增如下代码:
<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %} </div>
- 打开
themes/next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:
@import "my-post-copyright"
- 设置新建文章自动开启 copyright ,即新建文章自动显示自定义的版权声明,设置
~/scaffolds/post.md
文件,如下:
--- title: {{ title }} date: {{ date }} copyright: true #新增,开启 ---
相关文章推荐
- hexo使用next主题,并且使用”多说“给博客的文章添加评论功能
- Hexo博客主题NexT使用自定义的CSS样式
- Hexo博客NexT主题美化之文末统一添加“本文结束”标记
- Hexo博客NexT主题美化之新增看板娘(能说话、能换装)
- 搭建Hexo博客(Next主题)中踩过的坑
- hexo 博客next主题集成gitment或者gitalk评论系统
- 版权声明:本文为博主原创文章,博客地址:http://blog.csdn.net/qq_26787115,未经博主允许不得转载。
- 使用Hexo搭建next主题效果的博客
- Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索
- 2018最新版Hexo博客Next主题6.0配置优化
- hexo框架-next主题-github搭建个人博客
- 给hexo个人博客 next主题添加背景图片
- GitHub + Hexo + NexT 主题 免费搭建博客-参考链接收集
- Hexo+GitHub搭建静态博客平台(三)-Next主题基本使用
- NEXT主题:使用”多说“给博客的文章添加评论功能
- 给hexo个人博客 next主题添加背景图片
- github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)
- Hexo+Next主题 文章添加阅读次数,访问量等
- Hexo+GitHub+Next主题搭建个人博客
- Hexo博客yilia主题文章添加目录