oh My Ghostium

oh my ghostium

之前装了Wordpress扔在大洋彼岸一个Arizona搬瓦工的VPS后就再没去理过它,想想也有半年了。
后来分析觉得,首先肯定是自己懒惰浮躁,静不下来写东西。其次是博客页面没有漂亮到让我有一种打开就想写的冲动。
但是他们说为什么你应该(从现在开始就)写博客,于是紧跟大牛的步伐,虽然没有什么牛逼技术可以跟别人分享,但是看看大牛写的技术文章谢谢心得也是一种进步。于是就开始了万劫不复的折腾深渊...
在谷歌搜寻平台的时候看到了一个同是F2E的一个博客罗磊的独立博客,瞬间被大Banner的设计吸引到,看了很久后拖到了网页末尾,扫到了一行字本博客基于拽酷炫的 GHOST
比较了Ghost/Jekyll/Octo/Hexo 等等之后,认为Ghost还是最适合我:

  1. 基于 Node.js 的博客平台。
  2. Just a blogging platform.简单简洁,响应式设计。
  3. 免费,支持完全的自定义

DigitalOcean很贴心的有Ghost的APP安装镜像包,安装后直接打开http://your.domain/2368就会看到第一次登陆的窗口,设置好Blog Title,用户名,密码就可以愉快的开始体验Ghost了。
又过了几天,手贱浏览了很多搭建在Ghost的博客,发现大家怎么都这样啊,使用默认的Casper主题已到审美疲劳。
那么在连博文都没写几篇的情况下,继续万劫不复的折腾深渊 咯。

很喜欢Medium那个网站的设计风格,漂亮的排版和字体,恰当的行高,带有震撼般视觉冲击的大Banner图片...1 感觉一切的设计都如此恰到好处(一股浓浓的高逼格气息扑面而来)。

谷歌搜索类Medium的Ghost主题,
Ghostium, a medium-like theme.
先给作者@oswaldoacauan点赞,心中想要的样式全都有。 安装完在网站上跑了一会后,发现有些细节地方还是不尽如我意。
那么,还是自己动手丰衣足食,开始万劫不复的折腾深渊 第四弹。 一边看Ghost Developer DocumentationHandelbars.js Guide,一边用自学的一点点 HTML&CSS&JS 来调试和修改原主题。


####HTML

  • 修改Drawer侧栏的导航(Navigation.hbs),增加Links如下:
    <li class="drawer-list-item">
    <a href="{{@blog.url}}/timeline/">
      <i class="fa fa-clock-o"></i>Timeline
    </a>
    </li>
    <li class="drawer-list-item">
    <a href="{{@blog.url}}/wiki/">
      <i class="fa fa-coffee"></i>Wiki
    </a>
    </li>
    <li class="drawer-list-item">
    <a href="{{@blog.url}}/book/">
      <i class="fa fa-camera-retro"></i>Portfolio
    </a>
    </li>
    <li class="drawer-list-item">
    <a href="{{@blog.url}}/about/">
      <i class="fa fa-comment-o"></i>About Me
    </a>
    </li>
  • 在博客文章内容页(post.hbs)删除了分享到G+图标,增加了分享到微博图标:
    <a href="#" data-action="share-weibo"><i class="fa fa-fw fa-lg fa-weibo"></i></a>

####CSS(main.css)

  • 字体类型及大小
    原来的字体太小,而且因为主题原作者不说汉语,故默认在主题内显示的汉字为宋体,且行高较小,不方便阅读。
    搜索后发现这么几篇文章:web中文字体应用指南適合閱讀的中文字體網頁上95%的內容其實都是"typography“
    于是根据自己的喜好,同时照顾到广大Mac、Windows用户,字体样式如下:

    / 文章内容 衬线字体 /
    / "Xin Gothic" 信黑体;"STXihei" 华文细黑;"Hiragino Sans GB" 冬青黑体 /
    body {
      font: 400 20px/1.62 "Lora", Georgia, "Xin Gothic", "STXihei", Cambria, "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
      background: #fff;
      color: #333
      }
    / 文章标题、按钮等 非衬线 /
    {font-family: "Lato","Myriad Pro","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;} / Footer底部字体 Optima更为优雅低调 / {font-family: Optima, sans-serif;}

    我选择了Lato & Lora搭配,同为 Transitional Fonts 2

  • 主页(index.hbs)的封面/边距/文章摘要

    • 原来的cover大概占据了页面的30%,看起来图片有点喧宾夺主,经过反复折腾后,觉得25%的比例最不错。
      .cover {
        position: relative;
            top: 0;
        left: 0;
        width: 25%;
        height: 100%;
        z-index: 100
      }
  • 主页右侧文章内容距顶端太近。中文内容会感觉一块块的,特别突兀,调整padding,使内边距更大。反复比较后,6%看起来最自然。

      .wrapper-container {
          position: relative;
          padding: 6% 10% 40px 185px;
          max-width: 910px
      }
    • 主页右侧的文章摘要(post/list.hbs)原来为
      <section itemprop="description" class="post-item-excerpt">
         <p>{{excerpt words="35"}}&hellip;</p>
       </section>
      如果是英文内容恰好,但是对于中文内容,Ghost貌似对这个支持不太好(因为是按空格来计算word数量),所以显示的摘要往往会过多,查看文档后发现有另一种character字符数计数方式。很高兴地修改如下:
      <section itemprop="description" class="post-item-excerpt">
         <p>{{excerpt characters="140"}}&hellip;</p>
       </section>
  • 全局导航栏(drawer.hbs)
    每个导航栏(.drawer-list-item)字体过小,且挨得太近。参考了一下我最喜欢的Medium设计后,修改如下:

      .drawer-list-item {
          font-family: "Lato","Myriad Pro","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
          font-weight: 600;
          font-size: .9em;
          color: #9c9c9c;
          line-height: 2.2;
      }
  • 博客内容分页(post.hbs)
    对于作者的头像.post-author-avatar,原作者可能了为了保证质量,头像不被随意拉伸,

    .post-author-avatar { width: 100%; height: 100%; border-radius: 100% }

    采取了长宽度100%,但是四个角自然圆角,所以如果传的头像是矩形就会出现椭圆形的效果,但是个人觉得还是圆形头像更精致。所以为了保证无论上传何种比例的图片,得到的都是圆形的头像,那么就采用固定长宽度(此处在看Ghost后台时候,发现默认的作者头像就是圆形,查看源代码发现使用的是js-model-image,涉及到JS还未深入研究)。

      .post-author-avatar {
              width: 80px;
          height: 80px;
          display: block;
          margin-bottom: 10px
      }

优化
对于谷歌字体在国内访问速度不佳无法访问,使用了360网站卫士加速库

<link href="//fonts.useso.com/css?family=*">

大体地方修改完毕,把修改后主题上传到VPS,重启Ghost服务(因Ghost无法实时探测到content/theme/内容改变)。
Well done.


Roadmaps:

  • 微博官方的分享按钮太花哨,想使用FontAwesome的图标但还未解决如何触发微博分享;(使用一个JS函数解决)
  • 把博客内容页面post样式从main.css中分离出来,方便以后Ghost升级做所见即所得;
  • post页面加入一个返回顶部的小箭头;
  • Ghost不支持Markdown中的footnote,也就是脚注语法,但个人觉得这是挺实用的一项功能,试着自己写原生JavaScript来支持它;
    ps.官方说此功能在后台编辑器的RoadMap中,以后会更新。暂使用HTML解决如下:
    The sentence leading up to the notation.<sup><a href="#fn1" id="ref1">1</a></sup>
    <sup id="fn1">1. Here is the notation that the sentence above leads up to.<a href="#ref1">↩</a></sup>
  • post页面应用类似于Medium文章打开后顶部为震撼图片的大Banner;
  • 学习使用JS-model-image 自动切割Avatar及Logo;
  • Navigation各种链接网页的相关建设及完善;
  • 博文搜索;
  • 画个网站结构图 site-map。

你问我为何要如此折腾?哈,你不知道吗——

参差多态,实乃幸福本源。

1. 知乎:怎样评价Medium的设计
2. Foundamental of Design by Code School

cool4ZBL

👻 Web Developer. 👾 Front End. 🤖 DevOps. 🤓 Tool Enthusiast.