📣 :D 获取中...

lonesome-typecho使用攻略

本攻略写给使用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篇文章,反正是偶数就行。

首页文章数量

依然是跟着截图走一遍。

其他说明

想到了再写吧。~

typecho判断当前页面

typecho判断“大法”在做模板的时候还是很重要的,记录下。

比较全的一个Typecho模板文档大全之is判断语法,可也还是漏了下面这个。在具体文章正文内的判断。

<?php if($this->category == "分类A的缩略名"): ?>
这里是分类A的文章页面HTML代码
<?php else: ?>
这里是分类B的文章页面HTML代码
<?php endif; ?>

先记录下,也给后来的人作个记录。这篇文章正文前的那个注意就是用这个代码来判断该文章是不是为“折腾”分类下的文章,是“折腾”分类下的文章就给一个更新时间。毕竟我博客里的“折腾”分类文章基本上都是记录的一些代码片段。技术的时效性还是很重要的。

其他资料:在制作typecho模板中常用的调用函数

巧用阿里云oss图片规则

今天又发了一篇教程,其实也是针对小白来写的。因为看到好多人博客的文章缩略图都有问题。还让自己的博客速度变得很慢,我就有点强迫症想提醒下博主:你的缩略图有问题的。有强迫症的人没办法。

- 阅读剩余部分 -

typecho添加侧边栏滑动

有之前购买过我主题的一位朋友让我出一篇侧边栏滑动的教程。其实我也是小白,这只是个js效果,wordpress也能用。理论上是不限制任何后台系统的。其实如果只做博客的话,强烈推荐typecho养老。哈哈~

在还没搜到这个js效果前的时候,也用过github里某位老外的jq侧边栏库,用起来不是很得劲,我一般会找相关功能的代码会先测试下,哪一种比较适合再去放到主题里。另外就是为了这么小的一个功能专门去加载一个js库真的很没必要。原谅我真的不会原生写js啊。我甚至看不懂该段js的意思。下面来记录下这个侧边栏的一些关键代码和个人在部署时遇到的坑位。

- 阅读剩余部分 -