标签 typecho 下的文章

有没有发现本站每一篇文章的下方都有一个非常非常非常可爱的打赏小按钮呢。没错,就类似微信公众号里的打赏功能。其实这个功能在Wordpress里很常见,下面就把适合Typecho打赏功能的代码和大家分享。
1577063404(12121212.png

<div style="social">
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
    </button>
    <div id="QR" class="qr clearfix">
        <div id="wechat" style="display: inline-block">
            <a class="fancybox" rel="group"><img id="wechat_qr" src="http://img.wusail.com/wx.png" alt="WeChat Pay"></a>
            <p>
                微信打赏
            </p>
        </div>
        <div id="alipay" style="display: inline-block">
            <a class="fancybox" rel="group"><img id="alipay_qr" src="http://img.wusail.com/zfb.png" alt="Alipay"></a>
            <p>
                支付宝打赏
            </p>
        </div>
    </div>
</div>

把上面的代码放到post页面你喜欢的位置即可。
下面是CSS

.social{padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;}
#QR{padding-top:20px;display: none;}
#QR a{border:1px solid #000;}
#QR img{width:180px;max-width:100%;display:inline-block;margin:.8em 2em 0 2em}
#rewardButton{border:1px solid #ccc;line-height:36px;text-align:center;height:36px;display:block;border-radius:4px;-webkit-transition-duration:.4s;transition-duration:.4s;background-color:#fff;color:#999;margin:0 auto;padding:0 25px}
#rewardButton:hover{color:#f77b83;border-color:#f77b83;outline-style:none}

上面代码很多还不完善,根据自己需要再修改修改吧。

如何获取收款二维码

微信收款二维码获取流程

  1. 点开右上角的 +
  2. 收付款
  3. 我要收款
  4. 长按二维码即可保存图片

支付宝收款二维码获取流程

  1. 打开支付宝
  2. 收款(一般在下方,或者更多里面)
  3. 保存二维码

要想再美观 一点,可以把下载的图片统一下大小。

在制作typecho博客主题时,如果想在网站的侧边栏调用一定数量的博客最新文章列表其实是和WP里差不多的,使用Widget_Contents_Post_Recent这个widget即可调用,通过pageSize参数即可限制调用数量。下面直接有三种代码都可达成最新文章的调用。

方法一

<?php $this->widget('Widget_Contents_Post_Recent','pageSize=10')->parse('<li><a href="{permalink}"><span>{year}/{month}/{day}</span>{title}</a></li>'); 
?>

说明:

  • pageSize – 要调用的文章数量,默认调用后台“设置-阅读-文章列表数目”里设置的数量
  • {permalink} – 文章链接标签代码
  • {year} – 文章发布时间年份
  • {month} – 文章发布时间月份
  • {day} – 文章发布时间天
  • {title} – 文章标题

方法二

<?php 
    $this->widget('Widget_Contents_Post_Recent','pageSize=10')->to($recent);
    if($recent->have()):
    while($recent->next()):
?>
<li><a href="<?php $recent->permalink();?>"><?php $recent->title();?></a></li>
<?php endwhile; endif;?>

方法三

<?php 
    $recent = $this->widget('Widget_Contents_Post_Recent','pageSize=10');
    if($recent->have()):
    while($recent->next()):
?>       
<li><a href="<?php $recent->permalink();?>"><?php $recent->title();?></a></li>

三种形式的代码都差不多。我自己是使用第三种

方法是和WP上是一样的,先要选择自己喜欢的暗箱样式,一般都会选择FACEBOX、Lightbox当然其他的也一样。这些插件提供了一种简单的方式为图片、网页和多媒体添加灯箱功能。
1576825165(1).png
1、引用 FancyBox插件

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--如果主题已经引用了jQuery库,可以忽略这条-->
<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>

2、给文章图片添加标签

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;
?>

用上面的代码替换post.php里的

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

3、在头部或者尾部初始化

<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

打完收工,其他插件方法是一样的,就是添加图片标签不太一样。

在function.php里添加

function thumb($obj) {
    $rand_num = 10; //随机图片数量,根据图片目录中图片实际数量设置
    if ($rand_num == 0) {
        $imgurl = "随机图片存放目录/0.jpg";
        //如果$rand_num = 0,则显示默认图片,须命名为"0.jpg",注意是绝对地址
    }else{
        $imgurl = "随机图片存放目录/".rand(1,$rand_num).".jpg";
            //随机图片,须按"1.jpg","2.jpg","3.jpg"...的顺序命名,注意是绝对地址
    }
    $attach = $obj->attachments(1)->attachment;
    if(isset($attach->isImage) && $attach->isImage == 1){
        $thumb = $attach->url;
    }else{
        $thumb = $imgurl;
    }
        return $thumb;
}

在需要处引用

<img src="<?php echo thumb($this); ?>"/>

function Postviews($archive) {
    $db = Typecho_Db::get();
    $cid = $archive->cid;
    if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents')))) {
        $db->query('ALTER TABLE `'.$db->getPrefix().'contents` ADD `views` INT(10) DEFAULT 0;');
    }
    $exist = $db->fetchRow($db->select('views')->from('table.contents')->where('cid = ?', $cid))['views'];
    if ($archive->is('single')) {
        $cookie = Typecho_Cookie::get('contents_views');
        $cookie = $cookie ? explode(',', $cookie) : array();
        if (!in_array($cid, $cookie)) {
            $db->query($db->update('table.contents')
                ->rows(array('views' => (int)$exist+1))
                ->where('cid = ?', $cid));
            $exist = (int)$exist+1;
            array_push($cookie, $cid);
            $cookie = implode(',', $cookie);
            Typecho_Cookie::set('contents_views', $cookie);
        }
    }
    echo $exist == 0 ? '暂无阅读' : $exist.' 次阅读';
}

判断当前页面加载是否快速,通常是直接在浏览器中访问网站,看自己的直观感受是否快速。而客观的方法则是计算具体的页面加载时间并显示出来给看。
1576822875(1).png
1、在当前主题的functions.php文件添加下面的代码:

function timer_start() {
    global $timestart;
    $mtime     = explode( ' ', microtime() );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
    global $timestart, $timeend;
    $mtime     = explode( ' ', microtime() );
    $timeend   = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision );
    $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display ) {
        echo $r;
    }
    return $r;
}

2、在要显示加载时间的位置添加调用代码:

<?php echo timer_stop();?>

3、刷新页面即可显示加载时间。

Typecho本身是不带友链功能的,基本上都靠着LINKs插件,下面说免插件实现链接功能

1、为主题设置添加链接内容输入框,在函数themeConfig()内合适位置添加以下内容

 $Links = new Typecho_Widget_Helper_Form_Element_Textarea('Links', NULL, NULL, _t('链接列表(注意:切换主题会被清空,注意备份!)'), _t('按照格式输入链接信息,格式:<br><strong>链接名称(必须),链接地址(必须),链接描述,链接分类</strong><br>不同信息之间用英文逗号“,”分隔,例如:<br><strong>OFFODD,http://www.offodd.com/,JIElive的博客 | 有点不同,Myself</strong><br>若中间有暂时不想填的信息,请留空,例如暂时不想填写链接描述:<br><strong>OFFODD,http://www.offodd.com/,,Myself</strong><br>多个链接换行即可,一行一个'));
    $form->addInput($Links);

- 阅读剩余部分 -

Typecho添加主题目录的教程好像不是很多,而且我找到的仅有的几个都是前台JS实现的,总感觉这样不如后台实现来的好。既然Typecho找不到现成的,只好“曲线救国”,由于实现文章目录的原理是通用的,所以就去WP里找了,那可是大把大把的。

function createCatalog($obj) {    //为文章标题添加锚点
    global $catalog;
    global $catalog_count;
    $catalog = array();
    $catalog_count = 0;
    $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function($obj) {
        global $catalog;
        global $catalog_count;
        $catalog_count ++;
        $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count);
        return '<h'.$obj[1].$obj[2].'><a name="cl-'.$catalog_count.'"></a>'.$obj[3].'</h'.$obj[1].'>';
    }, $obj);
    return $obj;
}

function getCatalog() {    //输出文章目录容器
    global $catalog;
    $index = '';
    if ($catalog) {
        $index = '<ul>'."\n";
        $prev_depth = '';
        $to_depth = 0;
        foreach($catalog as $catalog_item) {
            $catalog_depth = $catalog_item['depth'];
            if ($prev_depth) {
                if ($catalog_depth == $prev_depth) {
                    $index .= '</li>'."\n";
                } elseif ($catalog_depth > $prev_depth) {
                    $to_depth++;
                    $index .= '<ul>'."\n";
                } else {
                    $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth;
                    if ($to_depth2) {
                        for ($i=0; $i<$to_depth2; $i++) {
                            $index .= '</li>'."\n".'</ul>'."\n";
                            $to_depth--;
                        }
                    }
                    $index .= '</li>';
                }
            }
            $index .= '<li><a href="#cl-'.$catalog_item['count'].'">'.$catalog_item['text'].'</a>';
            $prev_depth = $catalog_item['depth'];
        }
        for ($i=0; $i<=$to_depth; $i++) {
            $index .= '</li>'."\n".'</ul>'."\n";
        }
    $index = '<div id="toc-container">'."\n".'<div id="toc">'."\n".'<strong>文章目录</strong>'."\n".$index.'</div>'."\n".'</div>'."\n";
    }
    echo $index;
}
function themeInit($archive) {
    if ($archive->is('single')) {
        $archive->content = createCatalog($archive->content);
    }
}

- 阅读剩余部分 -