2022-12-06 更新 2536 阅读
本攻略写给使用lonesome-typecho的朋友们看的。

主题推荐配合图床一起使用更搭配，合理利用每一个好的网络技巧才是真。

关于文章特色图

主题默认的是显示自带灰色特色图，使用特色图在撰写文章的下方自定义字段，字段值里填写你需要使用的特色图的链接。

文章缩略图使用

其实我还是比较推荐使用阿里云oss图片规则的。七牛或者腾讯cos其他的都可以的。使用图片规则的好处不言而喻，自动裁剪图片尺寸，让你的博客的页面优化更好。当然你要自己使用自己上传的图片我也不反对。萝卜白菜大家都各有所爱，不强迫使用。

推荐一篇文章可以看看：解决博客图片存储——阿里云的OSS运用

关于相册结构

在做本主题的时候，这个相册考虑的问题最多。毕竟现在网易云相册和百度云相册都相继停止运营了，很多使用我主题的朋友都是在记录自己的生活时刻。看了他们的博客里的照片，都存在一个问题，就是图片尺寸各有不同（缺点就是图片大小不一样的话，排版就要用css来做了。），然后就是图片的容量大小也不同，当页面上大体积的图片过多，页面当然就会慢咯。

如果不想使用图床图片规则来给图片定尺寸大小的话，这边有一篇文章可以让你来折腾哈。

推荐文章：美化WordPress插入到文章中的相册

相册依旧还是推荐用oss图片规则，看来我是对oss图片规则爱之深切啊，毕竟实在是太方便了。不用为了给相册图片美化排版写css，直接使用上面的规则里的!view添加到图片外链的尾部就自动裁剪对应的尺寸。

相册结构食用方法如下：

三张图一行

<!--三张图片一列，a标签里放原图链接，img标签里放缩略图-->
<ul class="album-img gallery-3">
    <li>
    <a href="原图链接"><img src="缩略图链接（可以使用oss图片规则）" alt="bingImg"></a>
    </li>
    <li>
    <a href="原图链接"><img src="缩略图链接（可以使用oss图片规则）" alt="bingImg1"></a>
    </li>
    <li>
    <a href="原图链接"><img src="缩略图链接（可以使用oss图片规则）" alt="bingImg2"></a>
    </li>
</ul>

两张图一行

<!--两张图片一列，a标签里放原图链接，img标签里放缩略图-->
<ul class="album-img gallery-2">
    <li>
    <a href="原图链接"><img src="缩略图链接（可以使用oss图片规则）" alt="bingImg3"></a>
    </li>
    <li>
    <a href="原图链接"><img src="缩略图链接（可以使用oss图片规则）" alt="bingImg4"></a>
    </li>
</ul>

具体的可以看看这篇文章：给博客配置灯箱-ViewImage

视频自适应插入

视频这个东西肯定也是不可避免，虽说很少人用，但是还是说一下。下面的代码只是做了自适应。将你从各大视频平台复制来的ifame视频链接像下面一样输出。

方式一：嵌入从各大视频站得到的链接，iframe包住。
!!!
<div class="video-box">
<iframe src="//player.bilibili.com/player.html?aid=50533739&cid=88472387&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
!!!

方式二：自己服务器的视频，用video包住。"controls"为不要自动播放。
!!!
<div class="video-box">
<video src="https://mrju.cn/video/yu.mp4" controls></video>
</div>
!!!

代码块显示

喜欢折腾的人大多都博客都有那么几篇代码分享文章。本主题特意将highlight.js代码高亮js整合进博客里了。当然你也可以自定义这个需要输出的代码类型，像java或者c++等高深的我没整，只整了博客折腾的常用几种代码类型。

文章目录说明

目前博客里整的是h3为文章目录的识别标题，当然其实h1到h6也可以。只需修改主题文件里的functions.php的相关代码。

//文章目录
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) { //这里修改为1-6就ok了
        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;
}

修改后的优点当然就是文章目录更细致，缺点就是输出的文章目录的排版你得自己用css去美化咯。

typecho固定链接

不管是使用wordpress或者typecho，都要设置固定链接，在设置固定链接后是要做好typecho的伪静态的，不然设置固定链接后，除了首页，其他页面都是404。

typecho固定链接

设置完伪静态后，跟着上面的截图一样的设置就好了。

首页文章数量

安装typecho后，默认的好像是每页显示5篇文章。由于主题首页排版的原因，需要你自行设置为每页8篇文章或者10篇文章，反正是偶数就行。

首页文章数量

依然是跟着截图走一遍。

其他说明

想到了再写吧。~