[转载+改动]给博客添加一些小玩意
这几天看着有点没东西折腾了 就去百度了一下 发现了一篇文章:hexo的next主题个性化教程:打造炫酷网站 虽然这些都是用在hexo上的 但是对于typecho来说这些都是小菜一碟稍微做些改动就可以的 本文就介绍几个我认为比较有用的东西 分享一下让博客更花哨起来
在右上角或者左上角实现fork me on github
https://github.com/blog/273-github-ribbons 或者是 http://tholman.com/github-corners/ 直接往主题里怼就行 非常简单
如果你非常小白的话 那就看看具体的方法吧(一般情况) 先进入你主题的文件夹 进header.php文件里,将你挑选好的那一大堆放在<body>标签的下方即可
在每篇文章末尾统一添加“本文结束”标记
效果见本博文章页面结束
实现方法:进入主题的post.php(如果你想让单页也有的话就进page.php做相同的工作),在<?php $this->content(); ?>的后面加上这样一行内容(这个要事先引入好font awesome之后才能正常显示小爪子)
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>添加顶部加载条
在footer.php引用第一行 在header.php引用第二行(要被<head>标签包裹的地方添加)
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">但是，默认的是粉色的，要改变颜色可以在header.php文件中添加如下代码（接在刚才link的后面）
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>在文章底部增加版权信息
效果见本博
将下面这些塞进主题的post.php(如果你想让单页也有的话就进page.php做相同的工作),在<?php $this->content(); ?>的后面加上这样几行内容
<div class="my_post_copyright">
<p><span>文章作者:</span><a href="/" title="访问 <?php $this->author(); ?> 的个人博客"><?php $this->author(); ?></a></p>
<p><span>发布时间:</span><?php $this->date('Y年m月d日 - H:m'); ?></p>
<p><span>最后更新:</span><?php echo date('Y年m月d日 - H:m', $this->modified);?></p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" title="Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)">署名-相同方式共享 4.0 国际</a> 转载请保留原文链接及作者</p>
</div>我的这个对照原文少了一些东西 精简了这些在手机端上能好看点 减少点不必要的显示 然后把复制阉割掉了 毕竟现在的浏览器很少能有复制成功的 于是阉割之
下面是对应的css代码
.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;
}(如果有的地方被主题原有样式给覆盖上了 那就在上面的css里被盖上的css上加上个!important就可以了)
自定义鼠标样式
把图标换成自己的即可
// 鼠标样式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
}就先介绍到这里了 被我过滤掉的几个都是Typecho本来就有的 或者是完全没必要的 还有的是浪费性能的 就比如说那个点击爆炸吧 那个我在其他博客体验过 如果在手机上点的频率快了 浏览器会gg 文章压缩这个Typecho已经有很多解决方案 有插件层面的也有主题层面的 这里就不做介绍了
至此 完毕
谢谢博主，很有用，给你点赞！