typecho文章使用markdown解析器可以插入图片，但图片信息只能作为alt属性存在，还需要单独为图片写注释，如：

  • 插入方式如下：
![我是注释](https://i.loli.net/2019/08/22/aMzOEdkTth1F4Km.png)
  • 原始markdown插入图片

  • 更改后插入图片

我是注释

我是注释

将注释信息直接显示出来，更清晰直观。

修改方式如下：

  1. 找到typecho安装目录下的var/HyperDown.php，搜索image，找到如下代码
  // image
        $text = preg_replace_callback(
            "/!\[((?:[^\]]|\\\\\]|\\\\\[)*?)\]\(((?:[^\)]|\\\\\)|\\\\\()+?)\)/",
            function ($matches) use ($self) {
                $escaped = htmlspecialchars($self->escapeBracket($matches[1]));
                $url = $self->escapeBracket($matches[2]);
                $url = $self->cleanUrl($url);
                return $self->makeHolder(
                    "<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
                );
            },
            $text
        );

将357行的：

<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">

修改为

<img class=\"img\" src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"><center><div class=\"image-caption\">{$escaped}</div></center>
  1. 添加自定义css
/*设置图片插入居中*/
.img {clear:both;display:block;margin:auto;}
/* 设置注释样式*/
.image-caption{
min-width: 20%;
    max-width: 80%;
    min-height: 22px;
    display: inline-block;
    padding: 10px;
    margin: 0 auto;
    border-bottom: 1px solid #d9d9d9;
    font-size: 14px;
    color: #969696;
    line-height: 1.7;
}

默认的字体颜色是配合非透明模式的，透明模式将上面color: #969696;改为color:white;

版权属于：gogobody

本文链接：https://blog.gogobody.cn/archives/17/

转载时须注明出处及本声明

Last modification：September 18th, 2019 at 05:01 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏