lonesome-typecho使用攻略

本攻略写给使用lonesome-typecho的朋友们看的。

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

关于文章特色图

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

文章缩略图使用

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

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


关于相册结构

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

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

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

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

相册结构食用方法如下:

三张图一行

<!--三张图片一列,a标签里放原图链接,img标签里放缩略图-->
<ul class="lonesome-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="lonesome-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="lonesome-video">
<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="lonesome-video">
<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篇文章,反正是偶数就行。

首页文章数量

依然是跟着截图走一遍。

其他说明

想到了再写吧。~

93年的一只单身狗,为了生活而在厦门努力挣扎的半吊子UI。

发表评论