维斯塔的餐桌个人主页味景设置那些事，能省事的设置小抄

（引用开始）

维斯塔的餐桌个人主页味景设置那些事,能省事的设置小抄

今天想来聊聊部落格侧边栏的“个人主页味景”这个区块，这个功能挺有意思的，它能让你在 sidebar 放上一张自己的照片，然后写一段简短的自我介绍，让访客能快速认识你，我发现很多朋友对于这个区块的设置有点伤脑筋，尤其是那张“代表图片”，常常会遇到图片尺寸不合、显示不完整，或者怎么调整都觉得怪怪的状况。

Vista 已经把这个功能设计得很弹性了，但弹性大也意味着选项多，容易让人不知所措，我花了一点时间研究，整理出一份“能省事的设置小抄”，希望能帮大家快速搞定这个门面担当。

我们得先找到设置的地方,很简单，请到你的部落格后台，点选“外观”下的“小工具”选项，你应该可以在可用小工具的清单中找到“Vista：个人主页味景”这个项目，直接用鼠标把它拖曳到你想要的侧边栏位置就行了，通常是放在最上方。

把小工具拉进去之后,点开它来进行细部设定，你会看到几个栏位需要填写：

1. ：这个会显示在小工具的最上方，像是“关于我”、“站长介绍”之类的，你可以自由发挥，或者不填也可以。
2. 代表图片：这就是最关键的部分了！也是最多人卡关的地方，后面会详细说。
3. 自我介绍：你可以在这里打上一段简短的文字，介绍你自己、你的部落格主题或任何你想说的话，支持简单的 HTML 语法，比如换行 <br> 或加粗 <strong>。
4. 图片样式：这里有三个选项，分别是“圆形”、“方形”和“长方形”，这个选择会直接影响你“代表图片”的显示外观。
5. 连结网址：如果你希望访客点击这个“个人主页味景”区块时，可以连到某个特定页面（例如关于我页面），就可以在这里填入网址。

好,现在我们来解决最大的魔王：“代表图片”的设置，为什么图片老是跑版？关键就在于“长宽比”。

根据我的实测（来源：维斯塔的餐桌部落格后台实验），这个“个人主页味景”小工具对图片的容器有一个预设的固定比例，当你选择不同的“图片样式”时，它其实是在套用不同的长宽比框架：

• 如果你选“圆形”：系统会用一个 1:1 的正方形框架去裁切你的图片，也就是说，无论你上传的图片是长方形还是什么形状，最后显示出来的都会是一个正圆，而这个正圆是从你图片的正中央裁切出来的。
• 如果你选“方形”：系统同样是用 1:1 的正方形框架，但显示时不会变成圆形，而是保留方正的四个角。
• 如果你选“长方形”：系统会用一个大概是 4:3 的比例框架去裁切图片。

理解了这个原理,省事的诀窍就来了！与其上传图片后，在那里徒劳地拖曳裁剪框，不如一开始就准备一张符合比例的图片。

省事小抄第一条：事先裁好图

• 想要用圆形或方形显示？：那你最省事的方法，就是先用电脑或手机里的图片编辑软件，把你要当代表图片的照片，裁成一个完美的正方形（600px x 600px），这样你上传之后，无论选择圆形还是方形，显示效果都会和你预想的几乎一模一样，不会出现奇怪的裁切。
• 想要用长方形显示？：那就先把图片裁成大约 4:3 的比例，比如宽度 800px，高度 600px，这样上传后，画面就会很完整。

这样做的好处是,你完全掌握了主导权，不会因为系统自动裁切而把你照片里重要的部分（比如你的脸）给切掉了。

省事小抄第二条：善用“圆形”样式

我个人最推荐大家直接使用“圆形”样式，为什么呢？因为圆形头像看起来比较柔和、有设计感，而且它能完美地隐藏掉图片背景的杂乱边缘，即使你事先裁切的正方形图片背景有点不整齐，一旦变成圆形，这些问题就通通不见了，视觉效果非常干净利落。

省事小抄第三条：图片档案别太大

虽然 Vista 的部落格系统能处理大图，但为了网页加载速度着想，上传一张尺寸适中的图片就够了，你的侧边栏宽度通常不会超过 300 像素，所以你准备一张宽度在 600 像素左右的图片已经绰绰有余（为了适应高分辨率屏幕），档案大小尽量控制在 100KB 以下，这样既能保证清晰度，又不会拖慢速度。

省事小抄第四条：自我介绍文字精简易读

侧边栏的空间有限,你的自我介绍最好不要写成长篇大论，抓个重点，用两三行文字简洁有力地说明你是谁、你的部落格在写什么，或者放上一句吸引人的标语就可以了，字太多的话，访客反而没耐心看完。

想要快速又完美地设置好“个人主页味景”，核心心法就是：理解系统裁切规则，事先准备好比例正确的图片，特别是直接准备一张正方形图片并选择“圆形”样式，堪称是最省事又好看的组合拳。

希望这份小抄能帮你省下摸索的时间,轻松打造出专属于你的部落格门面！如果设置上还有其他问题，也欢迎在底下留言一起讨论。

（引用结束）