旧博客迁移文章，内容可能已失去价值，仅为留念，做了简单重新排版，勉强可看。
如果你之前来过小站（其实除了声总，应该没人来过），你一定会发现小站有一些新变化，有的一眼看得出来，有的则不然。话说我的博客折腾之旅，到目前要告一段落了，今日做个总结!
优化分为两个部分：界面美化和性能优化。
界面美化
美化部分其实不多，毕竟鄙人不会写代码，抄代码的水平还不错。主要体现在：
1. 代码框的高亮。
主要通过引入 Prismjs 高亮插件来实现，没有选择highlight.js，是觉得Prismjs更轻量级，默认风格也比较简约。为了减少文件请求数，可以让后台调用Prism.js处理代码片段，只在页面引入prism.css。参考博文：另一种Ghost添加代码高亮方式
2. 图片排版优化。
Ghost 直接插入图片时，图片是按原尺寸显示，经常会撑爆文章宽度，看起来十分不爽。解决方案是：在添加图片时，不使用Markdown语法，之间嵌入html代码，使用内嵌样式设置宽度。但这样查看原图的体验比较差，引入fluidbox插件之后，效果好许多。只是插入图片略微麻烦，但也只能退而求其次了！
插入图片示例代码：
<a href="https://st.xiaoyuyu.cn/blog/img/刘亦菲.jpeg" title="刘亦菲">
<img style="width:710px;"src="https://st.xiaoyuyu.cn/blog/img/刘亦菲.jpeg" alt="刘亦菲" title="刘亦菲" />
</a>
Tips:
1. 引入 fluidbox 文件后，如果未生效，可能与 js 文件引入的顺序有关，要在引入 fluidbox 之前，先引入 jQuery。
2. 上述代码插入时，标签之间最好不换行，在 img 标签前插入了
，可能导致 fluidbox 插件无法识别，从而不生效。
3.其他改动。剩下的便是一些微调了，根据自己喜好修改的，比如引用框的样式，文章字体什么的，抄抄改改，如今将就可以看了。
性能优化部分且看： Ghost博客优化大结局（2）
本文链接：https://blog.xiaoyuyu.cn/post/Ghost博客优化大结局（1）.html，参与评论 »
--EOF--
发表于 2016-02-26 05:14:00。
本站使用「署名 4.0 国际」创作共享协议，转载请注明作者及原网址。更多说明 »
提醒：本文最后更新于 3130 天前，文中所描述的信息可能已发生改变，请谨慎使用。
Comments