in 折腾博客 (549℃)

这几天看着有点没东西折腾了 就去百度了一下 发现了一篇文章: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已经有很多解决方案 有插件层面的也有主题层面的 这里就不做介绍了
至此 完毕

 |   | 

相关标签:#typecho

许可协议: 署名-相同方式共享 4.0 国际 转载请保留原文链接及作者