JS判断是否为手机浏览器

JS判断访问网站的设备平台,跳转到对应优化的页面。

//平台、设备和操作系统
var system = {
    win: false,
    mac: false,
    xll: false,
    ipad: false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
//跳转语句,如果是手机访问就自动跳转到手机页面
if (system.win || system.mac || system.xll || system.ipad) {
    //alert("PC");
} else {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //alert("微信浏览器");
    } else {
        //alert("手机");
    }
}

网站添加鼠标点击特效

为网站添加鼠标点击特效。

添加下面代码到js文件中即可:

/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

网站添加音乐播放器

看到好多博客都有一个音乐播放器,有点心动。决定添加一个

在主题模板恰当的位置引入下面代码即可:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-autoplay="false"  data-id="82450138" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F4645F"></div>
<script src="https://unpkg.com/meting@1.2.0/dist/Meting.min.js"></script>

部分参数说明:

  • data-autoplay : 是否自动播放
  • data-id : 歌单id
  • data-server : 提供音乐的服务器
  • data-fixed : 是否在左下角浮动
  • data-listfolded : 播放列表是否折叠
  • data-order : 播放模式(随机、顺序、单曲)
  • data-theme : 主题颜色

Typecho 实现短代码功能

Typecho 实现短代码功能。

前几天,准备对博客首页大改。在寻找灵感的途中。发现有的博客实现了一些好玩的功能。

这个短代码就是其中之一。

毕竟markdown里没有太明显的提示或警告。

稍微研究了一下。


演示

短代码标记短代码标记

info:一般提示
warning:警告提示
Error:危险提示
info:多行内容测试:

生活如酒,或芳香,或浓烈,因为诚实,它变得醇厚;生活如歌,或高昂,或低沉,因为守信,它变得悦耳; 生活如画,或明丽,或素雅,因为诚信,它变得美丽。

原理

很简单的一个原理,用正则匹配短代码标签,把他替换成样式就OK了。


方法

在主题的 functions.php 的文件里,新建个函数。

// 短代码测试
    function getContentTest($content) {
        $pattern = '/\[(info)\](.*?)\[\s*\/\1\s*\]/';
        $replacement = '<div class="hint hint-info"><span class="glyphicon glyphicon-info-sign hint-info-icon" aria-hidden="true"></span>$2</div>';    
        $content = preg_replace($pattern, $replacement, $content);

        $pattern = '/\[(warning)\](.*?)\[\s*\/\1\s*\]/';
        $replacement = '<div class="hint hint-warning"><span class="glyphicon glyphicon-question-sign hint-warning-icon" aria-hidden="true"></span>$2</div>';    
        $content = preg_replace($pattern, $replacement, $content);

        $pattern = '/\[(danger)\](.*?)\[\s*\/\1\s*\]/';
        $replacement = '<div class="hint hint-danger"><span class="glyphicon glyphicon-exclamation-sign hint-danger-icon" aria-hidden="true"></span>$2</div>';    
        $content = preg_replace($pattern, $replacement, $content);
        
        return $content;
    }

短代码短代码

然后把主题里输出文章内容的函数(共三处处:index.php 、page.php 和 articles.php)

<?php $this->content(); ?>

换成你刚刚添加的

<?php echo getContentTest($this->content); ?

articles.phparticles.php

Error:注意:如果导致首页文章无法正常使用<!--more-->标记截断,请移步此处

文章摘要去除短代码标记

原理:对excerpt函数输出的内容再次正则匹配,来在摘要中剔除 短代码标记

在输出的摘要中剔除短代码标记在输出的摘要中剔除短代码标记

// 摘要短代码测试
function getExcerptTest($excerpt,$num,$str) {
    $pattern = '/\[(info)\](.*?)\[\s*\/\1\s*\]/';
    $replacement = ' $2 ';  
    $excerpt = preg_replace($pattern, $replacement, $excerpt);

    $pattern = '/\[(warning)\](.*?)\[\s*\/\1\s*\]/';
    $replacement = ' $2 ';  
    $excerpt = preg_replace($pattern, $replacement, $excerpt);

    $pattern = '/\[(danger)\](.*?)\[\s*\/\1\s*\]/';
    $replacement = ' $2 ';  
    $excerpt = preg_replace($pattern, $replacement, $excerpt);

    //使用mb_substr防止中文截取成乱码,需要开启extension=php_mbstring.dll扩展,一般都开了
    return mb_substr($excerpt,0,$num,"UTF-8").$str;
}

functions.phpfunctions.php

使用下面的代码替换原有摘要输出(150是截断字数, ' ......' 是需要显示的提示)

<?php echo getExcerptTest($this->text,150,' ......'); ?>

替换原有摘要输出替换原有摘要输出

typecho文章内容失效提醒

typecho文章内容失效提醒。


提示效果

用的是上一篇文章警告提示的样式

提示效果提示效果


修改方法

修改typecho主题的post.php文件,在需要提醒的位置添加以下内容.

<!--设置需要提醒的时间-->
<?php $halfyear = 3600 * 24 * 30 * 6; ?>
<!--计算文章距离上次修改的时间-->
<?php $lostTime = time() - $this->modified; ?>
<!--判断是否需要提醒-->
<?php if ($lostTime > $halfyear): ?>
    <!--提醒样式开始-->
    <div class="hint hint-warning">
        <span class="glyphicon glyphicon-question-sign hint-warning-icon" aria-hidden="true"></span><span class="sr-only">warning:</span>
        这篇文章距离上次修改已过<?php echo floor($lostTime/86400); ?>天,其中的信息可能已经有所发展或是发生改变。
    </div>
    <!--提醒样式结束-->
<?php endif; ?>