Athony1

魔改篇
1.插件浏览器标示 1老款typecho类都可用,后面发现了一款新的样式,但是只支持handsome hands...
扫描右侧二维码阅读全文
28
2019/07

魔改篇

1.插件浏览器标示 1老款typecho类都可用,后面发现了一款新的样式,但是只支持handsome

  • handsome:
  • 插件下载地址:(皮一下,emm,评论可见)

    此处内容需要评论回复后(审核通过)方可阅读。

  • 在handsome/component/comments.php 里面如图插入一句

    <?php UserAgent_Plugin::render($comments->agent); ?>

15529-okdqvsxdmvj.png

  • 显示效果

38793-lqvzguu2rq.png


2.评论框特效

  • 下载特效JS文件:commentTyping.js,将其放在网站目录某个地方,然后编辑主题文件
    你的主题名字/component/footer.php,在后面添加以下代码。
    <script type="text/javascript" src="JS文件路径"></script>

3.浏览器标识 handsome专用

  • 与1需要替换的位置是一样的,不过语句换为以下:

此处内容需要评论回复后(审核通过)方可阅读。

23937-8r5lmqq7axe.png

4.添加天气在顶部

  • 或者自己去心知天气注册使用
    此处内容需要评论回复后(审核通过)方可阅读。

将生成的代码粘贴到页面的之前
大概如图所示66行左右
79172-ddtp3nj3jad.png

路径:/usr/themes/handsome/component/headnav.php

此处需要注意的是需要将<div id="tp-weather-widget">改成<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">,否则会发现样式显示异常!

5.文件跳动

  • 废话不多说,上教程:
    1.将以下CSS代码加在合适位置,例如页脚文件:
.shaky {
  display: inline-block;
  padding: 1px;
  font-size: 12px;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: shaky-slow;
  -ms-animation-name: shaky-slow;
  animation-name: shaky-slow;
  -webkit-animation-duration: 4s;
  -ms-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-play-state: running;
  -ms-animation-play-state: running;
  animation-play-state: running;
}
@-webkit-keyframes shaky-slow {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg)
  }
  2% {
    -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)
  }
  4% {
    -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
  }
  6% {
    -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
  }
  8% {
    -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
  }
  10% {
    -webkit-transform: translate(1.4px, 0px) rotate(-2deg)
  }
  12% {
    -webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
  }
  14% {
    -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
  }
  16% {
    -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
  }
  18% {
    -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
  }
  20% {
    -webkit-transform: translate(1px, 1px) rotate(-0.5deg)
  }
  22% {
    -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
  }
  24% {
    -webkit-transform: translate(-1.4px, -1px) rotate(2deg)
  }
  26% {
    -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
  }
  28% {
    -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
  }
  30% {
    -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
  }
  32% {
    -webkit-transform: translate(-1px, 0px) rotate(2deg)
  }
  34% {
    -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
  }
  36% {
    -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
  }
  38% {
    -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
  }
  40% {
    -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
  }
  42% {
    -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
  }
  44% {
    -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
  }
  46% {
    -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
  }
  48% {
    -webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
  }
  50% {
    -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
  }
  52% {
    -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
  }
  54% {
    -webkit-transform: translate(1.6px, -1px) rotate(-2deg)
  }
  56% {
    -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
  }
  58% {
    -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
  }
  60% {
    -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
  }
  62% {
    -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
  }
  64% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  66% {
    -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
  }
  68% {
    -webkit-transform: translate(0px, -1.6px) rotate(-2deg)
  }
  70% {
    -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
  }
  72% {
    -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
  }
  74% {
    -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
  }
  76% {
    -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
  }
  78% {
    -webkit-transform: translate(-1px, 1.4px) rotate(2deg)
  }
  80% {
    -webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
  }
  82% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
  }
  84% {
    -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
  }
  86% {
    -webkit-transform: translate(1px, 1.4px) rotate(-2deg)
  }
  88% {
    -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
  }
  90% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  92% {
    -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
  }
  94% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  96% {
    -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
  }
  98% {
    -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
  }
}
@keyframes shaky-slow {
  0% {
    transform: translate(0px, 0px) rotate(0deg)
  }
  2% {
    transform: translate(-1px, 1.5px) rotate(1.5deg)
  }
  4% {
    transform: translate(1.3px, 0px) rotate(-0.5deg)
  }
  6% {
    transform: translate(1.4px, 1.4px) rotate(-2deg)
  }
  8% {
    transform: translate(-1.3px, -1px) rotate(-1.5deg)
  }
  10% {
    transform: translate(1.4px, 0px) rotate(-2deg)
  }
  12% {
    transform: translate(-1.3px, -1px) rotate(-2deg)
  }
  14% {
    transform: translate(1.5px, 1.3px) rotate(1.5deg)
  }
  16% {
    transform: translate(1.5px, -1.5px) rotate(-1.5deg)
  }
  18% {
    transform: translate(1.3px, -1.3px) rotate(-2deg)
  }
  20% {
    transform: translate(1px, 1px) rotate(-0.5deg)
  }
  22% {
    transform: translate(1.3px, 1.5px) rotate(-2deg)
  }
  24% {
    transform: translate(-1.4px, -1px) rotate(2deg)
  }
  26% {
    transform: translate(1.3px, -1.3px) rotate(0.5deg)
  }
  28% {
    transform: translate(1.6px, -1.6px) rotate(-1.5deg)
  }
  30% {
    transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
  }
  32% {
    transform: translate(-1px, 0px) rotate(2deg)
  }
  34% {
    transform: translate(1.3px, 1.3px) rotate(-0.5deg)
  }
  36% {
    transform: translate(1.3px, 1.6px) rotate(1.5deg)
  }
  38% {
    transform: translate(1.3px, -1.6px) rotate(1.5deg)
  }
  40% {
    transform: translate(-1.4px, -1px) rotate(-0.5deg)
  }
  42% {
    transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
  }
  44% {
    transform: translate(-1.6px, 1.4px) rotate(0.5deg)
  }
  46% {
    transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
  }
  48% {
    transform: translate(1px, 1.6px) rotate(1.5deg)
  }
  50% {
    transform: translate(1.6px, 1.6px) rotate(1.5deg)
  }
  52% {
    transform: translate(-1.4px, 1.6px) rotate(0.5deg)
  }
  54% {
    transform: translate(1.6px, -1px) rotate(-2deg)
  }
  56% {
    transform: translate(1.3px, -1.6px) rotate(-2deg)
  }
  58% {
    transform: translate(-1.3px, -1.6px) rotate(0.5deg)
  }
  60% {
    transform: translate(1.3px, 1.6px) rotate(-0.5deg)
  }
  62% {
    transform: translate(0px, 0px) rotate(-1.5deg)
  }
  64% {
    transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  66% {
    transform: translate(1.6px, -1.6px) rotate(0.5deg)
  }
  68% {
    transform: translate(0px, -1.6px) rotate(-2deg)
  }
  70% {
    transform: translate(-1.6px, 1px) rotate(1.5deg)
  }
  72% {
    transform: translate(-1.6px, 1.6px) rotate(2deg)
  }
  74% {
    transform: translate(1.3px, -1.6px) rotate(-0.5deg)
  }
  76% {
    transform: translate(1.4px, 1px) rotate(-0.5deg)
  }
  78% {
    transform: translate(-1px, 1.4px) rotate(2deg)
  }
  80% {
    transform: translate(1.4px, 1.6px) rotate(2deg)
  }
  82% {
    transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
  }
  84% {
    transform: translate(-1.4px, 1.4px) rotate(-2deg)
  }
  86% {
    transform: translate(1px, 1.4px) rotate(-2deg)
  }
  88% {
    transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
  }
  90% {
    transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  92% {
    transform: translate(-1.4px, 1.6px) rotate(2deg)
  }
  94% {
    transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  96% {
    transform: translate(-1.4px, 1.3px) rotate(-2deg)
  }
  98% {
    transform: translate(1.3px, 1px) rotate(-0.5deg)
  }
}

2.然后在编辑器插入,你懂得..

<div class="shaky">你想说什么</div>

为博客添加复制弹窗提示

  • 使用方法
    1.在模板目录的header.php文件中引入layer资源文件,代码如下
    此处内容需要评论回复后(审核通过)方可阅读。

    2.如果是handsome主题的话,可以在开发者设置中的自定义JavaScript中添加

document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!');};

参考

最后修改:2019 年 08 月 20 日 10 : 30 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

4 条评论

  1. XiaoJun

    不不不滴!一言打卡:我们在年少时并不知道,有些乐章一旦开始,唱的就是曲终人散。
    欢迎光临小站,现在是:Fri Aug 16 2019 11:17:02 GMT+0800 (中国标准时间)

  2. Dxoca

    撬锁

  3. dyt5AAUI

    |´・ω・)ノ你的天气插件剽取了

    1. Athony
© 2018-2019 Copyright   | 浙ICP备18047860号-1| SiteMap