Typecho Yone 主题坑点解决方案
本来移植的时候确实只花了半天时间,但是后期优化以及调整细节花了不少时间。这篇文章记录下这些坑点,如果对你折腾主题有帮助那也是极好的。
本来移植的时候确实只花了半天时间,但是后期优化以及调整细节花了不少时间。这篇文章记录下这些坑点,如果对你折腾主题有帮助那也是极好的。
看到 @chopstack 在用的主题,觉得蛮简洁实用的,于是花了半天时间移植过来并使用起来了。
开始喜欢文字博客了。单纯的打几句话就概括自己的心情和心事儿。毕竟长篇大论的没人看,自己也懒得写。可有的时候就是想写写东西,但是又觉得文笔不好,写的多,献丑也多。
现在是「快餐」时代,什么都追求快。
微博 140 个字,视频现在也是短视频火,干脆我也就只在博客打几句话就完事儿了。
折腾了好几天,终于给小米游戏本装上了黑苹果系统了。单纯就是为了体验。毕竟白苹果太贵了。
经i5-8300H测试可用的硬件:1触控板和手势 2Fn亮度音量调节 3USB3.0 4蓝牙 5声卡和耳麦3.5口 6摄像头 7待机 8电量显示
刚买小米游戏本的时候,就已经给 adobe pr 顺带给下载了,但是一直没有去使用过。最近看到手机里还有点余小家伙(我的小外甥)的视频,就拿来当我练手的素材吧,哈哈。
本攻略写给使用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去美化咯。
不管是使用wordpress或者typecho,都要设置固定链接,在设置固定链接后是要做好typecho的伪静态的,不然设置固定链接后,除了首页,其他页面都是404。
设置完伪静态后,跟着上面的截图一样的设置就好了。
安装typecho后,默认的好像是每页显示5篇文章。由于主题首页排版的原因,需要你自行设置为每页8篇文章或者10篇文章,反正是偶数就行。
依然是跟着截图走一遍。
想到了再写吧。~