typecho文章设置字体颜色,及更多玩法

很早就有人询问过,在typecho这种Markdown编辑器下,文字的颜色该怎样定义,而且就像我初次接触typecho的时候,也觉得它的编辑器实在是太不友好,因为功能太简单了。结果用了这么久,才觉得,简单才是最优雅的策略,至少帮助我成功的专注于文字,舍弃了各种花哨的东西。不过在有的时候,花哨还是必要的。
这篇文章不止是说明文字颜色和样式的定义,还包括了Markdown代码嵌入的标签可以做到的全部实用功能,而且我从来都觉得,typecho在功能上,不逊色其它任何的内容管理程序。

你比如像这段基佬紫的颜色,是不是充满了视觉压迫力?我甚至还可以让它变绿,再粗壮一点!

又或者是,像下面这个黑家伙一样,带点黄。

上面那些效果,实现起来特别简单,如果是用过typecho的老手,基本都可以猜到,这就是Markdown支持html代码嵌入的标签实现的。具体的代码如下,为了防止被解析,我加上了@符号,实际使用可以去掉。

紫色文字:

@!!!
<font color="#a416af">你比如像这段基佬紫的颜色,是不是充满了视觉压迫力?</font>
@!!!

绿色加粗文字:

@!!!
<font color="#117113" style="font-weight:600;">我甚至还可以让它变绿,再粗壮一点!</font>
@!!!

黑中带黄区块:

@!!!
<div style="width:100px;height:100px;background:#000;text-align:center;line-height:100px;">
<p><font color="#e6de22">黄</font></p>
</div>
@!!!

只要懂点html加css,什么花样都可以变出来,当然我们不可能把typecho的文章发布变成什么代码编辑器,上述的案例就是为了实现一些重要信息的标注,或者是一些前端教程案例的具体实现。其实代码嵌入标签的玩法不局限于此,比如外部音乐,视频嵌套播放代码,一些需要让它生效的js和css远程文件,都可以通过这个标签来让它在页面生效。
那么还可以继续玩一下。
加个bilibili的鸡你太美(我用js处理了一下自适应,都可以按照我的格式进行视频插入):

代码是啥呢?其实不算太复杂:

@!!!
<script>
$(function () {
var iw = $(".iframe-box").width();
var ih = iw*0.7;
$(".iframe-box").height(ih);
});
</script>
<iframe src="//player.bilibili.com/player.html?aid=47992618&cid=84068462&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" class="iframe-box"> </iframe>
@!!!

以上代码我插入了一个完整的视频外部嵌套,通过js处理自适应的效果,比如把高度计算为宽度的70%。那个js可以写在网站的全局js里面,这样所有的外部引入视频都可以在后面加上width="100%" class="iframe-box"让它直接生效,当然,尽量还是得避免css冲突。

再来个网易云音乐的鸡你太美:

这种比较简单,官网生成的代码已经定义好的宽高,而且本身就比较小的缘故,在手机上也不是什么大问题,代码如下。

@!!!
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1361144868&auto=0&height=66"></iframe>
@!!!

以上就是通过Markdown代码嵌入的标签实现的基本玩法,更多牛逼的操作我太懒不想写了,要是花点时间都可以把typecho变成菜鸟教程那种代码执行,或者就是各种统计图啊,表单之类的呈现,那样的就以后再说吧。其实我写完的时候,因为博客是typecho1.1的稳定版本,没有直接页面预览的功能,我并不知道自己的代码是否会成功(滑稽)。
结尾丢个妖王镇场!

timg.jpg
规则之树版权所有,转载请注明来源,标明作者及原文链接

发表评论
加载中...

相关文章