本攻略写给使用lonesome-typecho的朋友们看的。
主题推荐配合图床一起使用更搭配,合理利用每一个好的网络技巧才是真。
关于文章特色图
主题默认的是显示自带灰色特色图,使用特色图在撰写文章的下方自定义字段,字段值里填写你需要使用的特色图的链接
。
其实我还是比较推荐使用阿里云oss图片规则的。七牛或者腾讯cos其他的都可以的。使用图片规则的好处不言而喻,自动裁剪图片尺寸,让你的博客的页面优化更好。当然你要自己使用自己上传的图片我也不反对。萝卜白菜大家都各有所爱,不强迫使用。
- 图片规则平台:阿里云oss
- 图片规则下载:export.txt
- 使用方法:创建oss后直接导入本规则即可
- 导入规则方法:巧用阿里云oss图片规则
推荐一篇文章可以看看:解决博客图片存储——阿里云的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后,默认的好像是每页显示5篇文章。由于主题首页排版的原因,需要你自行设置为每页8篇文章或者10篇文章,反正是偶数就行。
依然是跟着截图走一遍。
其他说明
想到了再写吧。~
评论已关闭