flyEn'blog

hexo自定义效果

发表于

1.在右上角或者左上角实现fort me on github
挑选样式地址：https://github.com/blog/273-github-ribbons
复制代码放在themes/next/layout/_layout.swig里<body></body>中（最好放在最下面）

２.动态背景
添加

1
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

如需自己配置：
再添加一行

1
2
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

配置说明：

  • color ：线条颜色, 默认: ‘0,0,0’；三个数字分别为(R,G,B)
  • opacity: 线条透明度（0~1）, 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

3.实现点击桃心效果

1
<script type="text/javascript" src="//7u2ss1.com1.z0.glb.clouddn.com/love.js"></script>

4.主页文章添加阴影效果
打开\themes\next\source\css\_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

其他自定义效果参考：https://segmentfault.com/a/1190000009544924#articleHeader29

Fork me on GitHub