标签 Typecho 下的文章

自动生成markdown表格的网站

Typecho支持表格,想想当初像傻子一样在ide里手撸 table 画表格。真是蛋疼。

但后来发现markdown画表格,和手撸 HTML 半斤八两,区别无外乎一个蛋疼还是一对蛋疼。

然后,我发现了一个拯救我的网站:Tables Generator

Tables GeneratorTables Generator

可视化,自动生成,真幸福。。。

可视化表格绘制可视化表格绘制

生成的markdown表格生成的markdown表格

表格示例

TablesAreCool
col 1 isleft-aligned$1600
col 2 iscentered$12
col 3 isright-aligned$1

PS:至于左右对齐就无视好了。

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; ?>

Typecho 添加图片灯箱

ok,上一篇文章已经对img标签下手了。这次更彻底点,给图片添加上灯箱效果

2020-01-02_215330.png2020-01-02_215330.png

首先,引入相关js文件

<!--在header里添加这个-->
<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

<!--先加载jquery依赖-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!--fancybox的js,还是bootcdn-->
<script src="//cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>

修改Typecho

首先找到HyperDown.php文件,在Typecho下的var目录里。

然后搜索img,一般在349行开始,修改img标签为

<a data-fancybox=\"gallery\" href=\"{$url}\"><img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"></a>

HyperDown.php文件位置HyperDown.php文件位置

正则替换,与上面方案任选其一

ps:这会导致 <!--more--> 无法正常截断文章。
2020-01-05 更新,修正 <!--more--> 无法正常截断文章的问题。
2020-02-09 跟新,正则表达式增加对atl和title属性的匹配。

首先在你的主题文件找到这个

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

用正则修改img标签

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

    //需要支持截断的添加下面两行
    $array=explode('<!--more-->', $content);
    $content=$array[0];

    echo $content;
?>