版权信息是每个网站必不可少的展示,很多版权信息比较单一,偶然间看到以一篇子比版权信息的美化,觉着不错今天就分享给大家,美化教程是转自腾讯云开发者社区小N同学的一篇帖子。
效果:
其中URL颜色是根据主题色调整的!
<head> <style type="text/css"> .post-copyright { box-shadow: 2px 2px 5px; line-height: 2; position: relative; margin: 40px 0 10px; padding: 10px 16px; border: 1px solid var(--light-grey); transition: box-shadow .3s ease-in-out; overflow: hidden; border-radius: 12px!important; background-color: var(--main-bg-color); } .post-copyright:before { position: absolute; right: -26px; top: -120px; content: '\f25e'; font-size: 200px; font-family: 'FontAwesome'; opacity: .2; } .post-copyright__title { font-size: 22px; } .post-copyright_type { font-size: 18px; color:var(--theme-color) } .post-copyright .post-copyright-info { padding-left: 6px; font-size: 15px; } .post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u { display: inline-block; width: fit-content; padding: 2px 5px; font-size: 15px; } .muted-3-color { color: var(--main-color); } /*手机优化*/ @media screen and (max-width:800px){.post-copyright-m-info{display:none}} </style> </head> <body> <div class="post-copyright" style="max-width:800px;margin:0 auto;"> <div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div> <div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div> <div class="post-copyright-m"> <div class="post-copyright-m-info"> <div class="post-copyright-a"> <strong>文章作者</strong> <div class="post-copyright-cc-info"> <strong><a href="https://www.yiluxb.cn/">忆路吧博客</a></strong> </div> </div> <div class="post-copyright-c" style="margin:10px 20px"> <strong>隐私政策</strong> <div class="post-copyright-cc-info"> <strong><a href="https://www.nesxc.com/privacy-policy-2/">PrivacyPolicy</a></strong> </div> </div> <div class="post-copyright-u" style="margin:10px 20px"> <strong>用户协议</strong> <div class="post-copyright-cc-info"> <strong><a href="https://www.nesxc.com/use-generator/">UseGenerator</a></strong> </div> </div> <div class="post-copyright-c" style="margin:10px 20px"> <strong>许可协议 </strong> <div class="post-copyright-cc-info"> <a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a> <strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div> </div> </div> </div> </div> </body>
其中的手机优化是将四个小模块隐藏以达到手机端阅读体验优化的效果
把代码内的url和名称改成你的即可。
安装方法
复制上述代码,前往主题配置页面-文章-文章页面
找到版权设置页面
将上面的代码插入保存即可。
文章版权声明
1 本网站名称:忆路吧
2 本站永久网址:http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
2 本站永久网址:http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
还没有评论,来说两句吧...