博客园小技巧

  1. 云栖社区>
  2. 博客>
  3. 正文

博客园小技巧

vamei 2012-11-29 00:15:00 浏览777
展开阅读全文

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!

 

在博客园写博的半年中,我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题,所以就把自己遇到的一些状况和解决方法列出来,以便交流。

在博客园看到不少很绚的博客页面,我很想知道都是怎么实现的。:-) 希望大家不要客气,在评论区留下诀窍。谢谢!

 

编辑器

下面是博客园的编辑器界面:

博客园编辑器界面

1. 查询HTML

写一篇文章实际上是构建了一个HTML网页,内容和格式都最终保存在这个HTML网页中。如果格式上有什么不确定的地方,都可以查询和修改HTML本身。你可以通过下面的“HTML”按钮来查看:

 

2. 插入代码

对于技术博客来说,代码插入是必不可少的一个环节。常规的博客编辑器通常都没有这个功能。博客园的插入代码算是比较齐全。值得注意的是“全部折叠”选项:

如果代码过长,而文章的重心又不在于分析代码,那么可以勾选这个选项。代码会隐藏成一个”View Code“的按钮,只有在点击之后才展开。这样,可以让读者专心于文章的脉络。读者快速浏览一遍之后,觉得还有兴趣的话,可以自行展开代码阅读,而不会在一开始的时候就被超长的代码吓走。

 

3. 格式与字体

格式

所谓的格式,实际上是html标签(tag)。比如,如果采用段落格式,那么内容就会被镶嵌在<p></p>的标签之间。再比如标题1,实际上是<h1>。你可以通过查询HTML源码来找出每种格式对应的标签。采用格式的好处是可以通过CSS来统一管理每一种标签所标示的内容。

 

字体

最值得推荐的字体Courier New。它是等宽字体,每一个字符的宽度相同,所以上下两行很容易对齐,比如:

TomIDNumber = 10

VivIDNumber = 22

如果是非等宽字体,字符宽度根据字符形状发生变化,比如i会比较窄,而o会比较宽,所以上下两行很难对齐。比如Arial

TomIDNumber = 10

VivIDNumber = 22

等宽字体是程序员的首选字体。

 

 

4. 关于颜色

每一个人都有自己的颜色喜好,有人会比较偏爱黑白的页面。但从认知心理学的角度来说,人们更容易阅读标出要点的段落和文字。特别是网络和电子阅读时代,彩色相对黑白没有额外的印刷成本,所以利用颜色标记值得一试。下划线粗体斜体也是相同的道理。 (在黑白印刷时代,人们惯用这三种方式来区分重点。你甚至可以在机械打字机上见到它们)。用这些标记方式的时候,最好可以在每篇博文中保持统一。比如可以用粗体表示命令,用斜体标记引用,用红色表示重点。这样,人们连续阅读同一个博客的时候不会觉得混乱。

 

CSS定制

管理 -> 设置 -> “通过CSS定制页面风”中,我们可以定制自己的CSS风格。这是很实用的功能。

 

1. 定制标签(tag)

在编辑器部分,我们看到所谓的格式实际上是HTML标签。这些标签可以通过CSS定制来统一管理和控制。比如我们想设置标题2的格式为:

 

 

可以通过添加如下CSS实现:

h2 {
  text-align: center;
  box-shadow: 10px 10px 5px #888888;
  background-color: #5FBDCE;
  color: #015666;
}

 

 

2. Image溢出和解决

图像溢出是个常见的问题。在一个小的屏幕或者浏览器中,图片的像素可能超出div的区域。比如:

 

调整前

 

你可能会重新设定图片的大小。但是由于可能的读者所使用设备可能差别很大(比如手机和大屏幕),我们并没法预估所应设定的大小。

我们可以在CSS定制中选择img,然后使用overflow属性:

 

img {
  overflow: scroll;
}

 

这样,溢出的图像会被隐藏在滚动条中。

 

我采用了另一个方法:

img {
 max-width: 80%;
}

这样,img的宽度不会超过div宽度的80%。图片会根据情况调整大小。

 

调整后

 

定制公告、页首、页脚HTML

管理 -> 设置中,这三者可以添加自己想要显示的HTML元素。比如在公告栏中我添加了微博的图片和豆瓣的Javascript(如上图)。你也可以增加其他更加个性化的东西。

微博:我的工具 -> 签名档 -> 获得代码,然后将代码复制到博客园的公告栏。

豆瓣:到下面网址http://www.douban.com/service/badgemaker,生成代码,然后将代码复制到博客园的公告栏。

网友评论

登录后评论
0/500
评论
vamei
+ 关注