typecho 给文章添加短代码功能

短代码可以很方便快捷地实现一些特定功能。

经过一番搜索，网上找到了一个叫做 ShortCode 的短代码插件，再经过一番学习，终于实现了短代码功能。

一、下载插件

下载地址：ShortCode

下载插件后，解压放入usr/plugins目录，并启用该插件。

二、注册短代码

可以通过 ShortCode 类的 set 方法来实现短代码注册：格式为：

ShortCode::set(names, collbacks,overried);

参数名	类型	说明
names	mixed	短代码名称，可以一个字符串或字符串数组
callbacks	mixed	短代码对应回调函数，可以一个回调函数或回调函数数组
overried	bool	覆盖已存在的短代码设置,可选，默认false

接下来就是在 function.php 中注册短代码了。


// 短代码注册
if (class_exists('ShortCode')) {
    ShortCode::set(['video', 'audio', 'img', 'album-grid', 'album-auto'], 'ShorCode');
}

//短代码回调函数
function ShorCode($name, $attr, $text, $code)
{
    switch ($name) {
        case 'video':
            $str = '<div class="iframe_div iframe_div-16x9">';
            $str = $str . '<iframe class="iframe_video" src="' . $text . '" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>';
            $str = $str . '</div>';
            return $str;
        case 'audio':
            return '<audio controls="controls"' . $attr . '><source src="' . $text . '"></audio>';
        case 'img':
            return '<img' . $attr . ' src="' . $text . '">';
        case 'album-grid':
            // <div class="album-grid   row-cols-sm-1 row-cols-md-2 row-cols-lg-3 "></div>
            //将set属性转换为html
            preg_match('/set\=\"(.*?)\"/', $attr, $set); // 获取set属性
            $sets = explode(",", $set[1]); // set属性值转化为数组
            $attr = ' ';
            foreach ($sets as $set) {
                $attr = $attr . ' row-cols-' . $set;
            }
            $attr = $attr . ' ';

            // 将短代码转换为html
            return '<div class="album-grid ' . $attr . '">' . $text . '</div>';

        case 'album-auto':
            return '<div class="album-auto">' . $text . '</div>';
    }
    return $code;
}

对上面回调函数中自适应相册短代码,网格相册短代码,视频短代码用到的css类为：

/* 短代码-自适应相册 */
.album-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.album-auto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.album-auto img:hover {
  transform: scale(1.05);
  transition: all 0.2s ease;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* 短代码-网格相册 */
.album-grid {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.album-grid>* {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.album-grid *:hover {
  transform: scale(1.05);
  transition: all 0.2s ease;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 576px) {

  .row-cols-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .row-cols-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .row-cols-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .row-cols-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (min-width: 768px) {
  .row-cols-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .row-cols-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .row-cols-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .row-cols-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .row-cols-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .row-cols-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .row-cols-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .row-cols-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .row-cols-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .row-cols-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .row-cols-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}


/* 短代码-视频挂载 */

.iframe_div {
  margin-top: 2rem;
  margin-bottom: 2rem;
  position: relative;
  display: block;
  padding: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.iframe_div .iframe_video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  /* background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: rgba(120, 120, 120, 0.1); */
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.iframe_div:after {
  content: "";
  display: block;
  padding-top: 100%;
}

.iframe_div-16x9:after {
  padding-top: 56.25%;
}

三、使用短代码

编辑文章，对上面的几个短代码使用和验证其效果。

### 说明：因为短代码会作用于<code>标签内，这里在前面加入反斜杠阻止其发生作用（还未想到更好解决办法）
### 演示视频短代码
[video]https://www.runoob.com/try/demo_source/mov_bbb.mp4[/video]

### 演示网格相册短代码
[album-grid set="sm-1,md-2,lg-3"]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_3.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_2.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_3.jpg[/img]
[/album-grid]

### 演示自适应相册短代码
[album-auto]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/logodemo/logo_3.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_1.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_2.jpg[/img]
[img]https://www.hollowman.cn/usr/themes/ymz/images/backgroundimages/pub_3.jpg[/img]
[/album]