2020年7月

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]

做人如草,低调就好!

虽然普通,却有自己的个性;
虽然渺小,却有自己的颜色;
坚强的生长,低调的活着。

做人如草,踏实就好!

不与大树争高低,
不与花朵比美丽,
有自己的姿态和特点,
风来,吹不倒,
雨来,淋不跑。

做人如草,努力就好!

不羡慕花朵的芳香,
不嫉妒大树的粗壮,
即使普普通通,也不放弃生长;
就算平平凡凡,也不求人可怜。

做人如草,充实就好!

坚定不移的站在自己的岗位上,
随风摇摆,却不轻易倒下,
被雨冲刷,却不改变色彩。

做人如草,豁达就好!

虽小,心胸开阔,
虽弱,内心坚强,
开不了花,依然不放弃生命;
结不了果,依然会努力活着。

做人如草,

在平淡中活出自己的性格,
在雨水下彰显自己的独特。
就算某一天生命到了尽头,
也从来不后悔,
至少来过、活过、奉献过!

做人如草,是活给自己看的。

做一棵默默无闻的小草,
没有人鼓掌,也在努力生长;
做一棵自力更生的小草,
没有人心疼,也要无比坚强;
做一棵一身傲骨的小草,
没有人欣赏,也要活得漂亮。

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

右侧列表

[collapse status="false" title="右侧列表图标"]

/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-twitter{color: #52DE97;}
.sidebar-icon svg.feather.feather-message-square{color:#495DC3;}
.sidebar-icon svg.feather.feather-refresh-cw{color:#F67280;}

[/collapse]

左侧列表

[hide]
[collapse status="false" title="左侧列表图标"]

/*左侧列表导航栏图标颜色*/
.nav-icon svg.feather.feather-grid{color:#F67280;}
.nav-icon svg.feather.feather-file{color: #52DE97;}
.nav-icon svg.feather.feather-users{color:#32cd32;}
.nav-icon svg.feather.feather-home{color:#000000;}
.nav-icon svg.feather.feather-coffee{color:#B8860B;}
.nav-icon svg.feather.feather-book{color:#FF77FF;}

[/collapse]
[/hide]

左下角

[hide]
[collapse status="false" title="左下角列表图标"]

/*左下角图标颜色*/
.left-bottom-icons svg.feather.feather-settings{color:#000000;}
.left-bottom-icons svg.feather.feather-rss{color:#000000;}
.left-bottom-icons svg.feather.feather-message-square{color:#000000;}

[/collapse]
[/hide]