标签 代码 下的文章

typecho的首页文章列表默认显示的是全部内容,如果需要显示部分内容的话,需要在编辑框中增加标签,效果看起来并不是很好。

在网上找了一段代码,修改如下:

在index.php中找到

<?php $this->content('- 阅读剩余部分 -'); ?>

修改为:
[hide]

    <?php 
if(preg_match('/<!--more-->/',$this->content)||mb_strlen($this->content, 'utf-8') < 150)
{
$this->content('阅读全文...');
}
else
{ 
$c=mb_substr($this->content, 0, 150, 'utf-8');
$c=preg_replace("/<[img|IMG].*?src=[\'\"](.*?(?:[\.gif|\.jpg|\.jpeg|\.png|\.tiff|\.bmp]))[\'|\"].*?[\/]?>/","",$c);
if(preg_match('/<pre>/',$c))
{
echo $c,'</code></pre>','...';;
}
else
{
echo $c.'...';
}
echo '</br><p class="more"><a href="',$this->permalink(),'" title="',$this->title(),'">阅读全文...</a></p>';
}
?>

[/hide]


- 阅读剩余部分 -

常用代码

[hide]
最简单的点赞插件,支持自定义样式。以及支持点赞排行榜,很实用。

<?php Like_Plugin::theLike(); ?>
#显示点赞按钮
<?php Like_Plugin::theLike($link = false); ?>
#仅显示点赞数量
<?php Like_Plugin::theMostLiked(10); ?>
#输出得到最多攒的带点赞按钮的前10条文章列表
<?php Like_Plugin::theMostLiked($limit = 10, $showlink = false, $before = '<br/> - ( 点赞: ', $after = ' 次 ) '); ?>
#输出得到最多攒的前10条文章列表,仅显示被赞次数并将文字描述前缀设置为XX,后缀设置为XX
HTML部分
插入到你当前主题的post.php里,一般如果是文章下的那个位置的话,应该是在这个代码段的下面插入

<?php parseContent($this); ?>

HTML:

<!-- 赞赏部分 begin -->
<div class="entry-shang text-center">
    <p>「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」</p>
    <button class="zs show-zs btn btn-bred">赞赏</button>
</div>
<div class="zs-modal-bg"></div>
<div class="zs-modal-box">
    <div class="zs-modal-head">
        <button type="button" class="close">×</button>
        <p class="author">
            <a href="https://www.zuozuovera.com">
                <img src="https://secure.gravatar.com/avatar/29016c0d931044b1660a872ced6c06ef?s=80&r=G&d=mm"/>
            薇拉航线</a>
        </p>
        <p class="tip"><i></i><span> (๑>ڡ<)☆谢谢老板~</span></p>
    </div>
    <div class="zs-modal-body">
        <div class="zs-modal-btns">
            <button class="btn btn-blink" data-num="2">2元</button>
            <button class="btn btn-blink" data-num="5">5元</button>
            <button class="btn btn-blink" data-num="10">10元</button>
            <button class="btn btn-blink" data-num="50">50元</button>
            <button class="btn btn-blink" data-num="100">100元</button>
            <button class="btn btn-blink" data-num="any">任意金额</button>
        </div>
        <div class="zs-modal-pay">
            <button class="btn btn-bred" id="pay-text">2元</button>
            <p>使用<span id="pay-type">微信</span>扫描二维码完成支付</p>
            <img src="./images/alipay-2.jpg" id="pay-image"/>
        </div>
    </div>
    <div class="zs-modal-footer">
        <label style="float: left;width: 130px;">
            <input type="radio" name="zs-type" value="alipay" class="zs-type" checked="checked" style="float: left;">
            <span class="zs-alipay">
                <img src="./images/alipay-btn.png"/>
            </span>
        </label>
        <label style="float: left;width: 130px;">
            <input type="radio" name="zs-type" value="wechat" class="zs-type" style="float: left;">
            <span class="zs-wechat">
                <img src="./images/wechat-btn.png"/>
            </span>
        </label>
    </div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script> 
<script type="text/javascript" src="./js/zanshang.js"></script> 
<!-- 赞赏部分end -->

JS和CSS
在这里下载完整文件

Typecho-zanshang Github
然后将js文件夹里的jquery.min.js和zanshang.js丢到你主题目录下的js文件夹里去,然后根目录下的donate.css丢到和你的post.php同级的目录下。
支付宝微信账号
二维码图片是放在当前目录中的images文件中的,支付宝和微信的命名规则为:type+'-'+data-num。详细规则在zanshang.js里有。
千万记得要改哦~不然钱就会到我这里啦~


如果图片出了bug,检查下是不是路径的问题。
如果js出了问题,弹窗出不来,同理F12检查路径是否出错
如果css出了问题,F12自己针对自己使用的主题修一下。
[/hide]

使用指南

1)首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码: PJAX回调函数也加入这个代码

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子!::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")
    }
};

2)打开主题目录的component/comments.php里面的126行到144行附近:

                    <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO" style="display: inline;"></div>
                                            <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
              <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
          <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

3)在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

使用方法:
在网站的 CSS 代码中添加以下代码
Handsome 主题在后台 设置外观 - 开发者设置 - 自定义 CSS 中添加
[hide]

/* 页面特效 by Leo */
@keyframes pop{
0%{opacity:0;transform:scale(0.2);-ms-transform:scale(0.2);}
60%{opacity:0.75;transform:scale(1.1);-ms-transform:scale(1.1);}
100%{opacity:1;transform:scale(1);-ms-transform:scale(1);}
}
@-moz-keyframes pop{
0%{opacity:0;-moz-transform:scale(0.2);}
60%{opacity:0.75;-moz-transform:scale(1.1);}
100%{opacity:1;-moz-transform:scale(1);}
}
@-webkit-keyframes pop{
0%{opacity:0;-webkit-transform:scale(0.2);}
60%{opacity:0.75;-webkit-transform:scale(1.1);}
100%{opacity:1;-webkit-transform:scale(1);}
}
@keyframes fastr{
0%{opacity:0;transform:translate(0,60px);}
100%{opacity:1;transform:translate(0,0);}
}
@-webkit-keyframes fastr{
0%{opacity:0;-webkit-transform:translate(0,60px);}
100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-moz-keyframes fastr{
0%{opacity:0;-moz-transform:translate(0,60px);}
100%{opacity:1;-moz-transform:translate(0,0);}
}
@keyframes afastr{
0%{opacity:0;transform:translate(0,-60px);}
67%{opacity:1;transform:translate(0,0);}
86%{opacity:1;transform:translate(0,-2px);}
100%{opacity:1;transform:translate(0,0);}
}
@-webkit-keyframes afastr{
0%{opacity:0;-webkit-transform:translate(0,-60px);}
67%{opacity:1;-webkit-transform:translate(0,0);}
86%{opacity:1;-webkit-transform:translate(0,-2px);}
100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-moz-keyframes afastr{
0%{opacity:0;-moz-transform:translate(0,-60px);}
67%{opacity:1;-moz-transform:translate(0,0);}
86%{opacity:1;-moz-transform:translate(0,-2px);}
100%{opacity:1;-moz-transform:translate(0,0);}
}
@keyframes fastscale{
0%{opacity:0;transform:scale(0.2,1) translate(-226px,0);}
100%{opacity:1;transform:scale(1,1) translate(0,0);}
}
@-webkit-keyframes fastscale{
0%{opacity:0;-webkit-transform:scale(0.2,1) translate(-226px,0);}
100%{opacity:1;-webkit-transform:scale(1,1) translate(0,0);}
}
@-moz-keyframes fastscale{
0%{opacity:0;-moz-transform:scale(0.2,1) translate(-226px,0);}
100%{opacity:1;-moz-transform:scale(1,1) translate(0,0);}
}
.fwinmask{animation:pop 0.4s;-moz-animation:pop 0.4s;-webkit-animation:pop 0.4s;}
.p_pop{animation:afastr 0.2s;-moz-animation:afastr 0.2s;-webkit-animation:afastr 0.2s;}
.fastpreview{animation:afastr 0.5s;-webkit-animation:afastr 0.5s;-moz-animation:afastr 0.5s;}
.pct{animation:fastr 0.5s;-webkit-animation:fastr 0.5s;-moz-animation:fastr 0.5s;}
.tip{animation:pop 0.3s;-webkit-animation:pop 0.3s;-moz-animation:pop 0.3s;}
#hd h2{animation:afastr 0.4s;-webkit-animation:afastr 0.4s;-moz-animation:afastr 0.4s;}
#um,#toptb,.pns{animation:afastr 1s;-webkit-animation:afastr 1s;-moz-animation:afastr 1s;}
#hd h2{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;}
#hd h2:hover{transform:scale(1.07) rotate(-1deg);-webkit-transform:scale(1.07) rotate(-1deg);-moz-transform:scale(1.07) rotate(-1deg);}
.avt{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;}
.avt:hover{transform:scale(1.07);-webkit-transform:scale(1.07);-moz-transform:scale(1.07);}
#scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;}
#scbar_txt:focus,#scbar:hover #scbar_txt{width:450px}
#ls_username,#ls_password{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;}
#ls_username:focus,#ls_password:focus{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}
a{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
a:hover,a:visited:hover{text-shadow:#585858 0px 0px 3px;text-decoration:none;}
.fl_g:hover img{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);}

.appl img,.fl_icn_g img{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
.appl li:hover img{transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);}
.bui{animation:fastscale 0.2s;-webkit-animation:fastscale 0.2s;-moz-animation:fastscale 0.2s;}

[/hide]