Ghost 1.0.0 已经 RC1 了,我用着比之前的版本舒服多了。不过嘛,既然是候选版本,问题肯定还是有的(主要是新版 Casper 主题样式上的),结合我目前体验发现的一些 BUG 做个汇总。
表格中内容太长导致表格超出屏幕范围
这个问题我已经在 github 上提了 issue,希望能早日解决吧。
解决办法:手动修改content/themes/casper/assets/built/screen.css
,找到.post-full-content table
,将里边的white-space: nowrap
去掉,重启 ghost。
代码高亮
默认是没有代码高亮显示的,添加方法也简单:
进入 ghost 后台,在 Code injection 里,在 Blog Header 里添加
1 | <!-- 加载highlight.js样式 --> |
然后再在 Blog Footer 添加
1 | <!-- 执行highlight.js --> |
保存后刷新即可看到效果
图片超出文章宽度
默认的 CSS 会导致图片超过文章的总图宽度,而且会带动图片上面一段文字和图片等宽,看起来很不舒服。
解决办法:在 Code injection 的 Blog Header 添加
1 | <style type="text/css"> |
在移动设备中文章超出屏幕宽度
有时候在手机上浏览文章,会发现同一篇文章的某些段落的宽度会比较宽,超出屏幕宽度无法正常浏览。
解决办法:在 Code injection 的 Blog Header 添加
1 | <style type="text/css"> |
Disqus 评论框的宽度比正文宽
这个属于个人喜好吧,我喜欢同宽的,看起来比较和谐。默认的.post-full-comments
是min-width: 100%;
1 | <style type="text/css"> |
修改分享按钮(Twitter→ 微博,FB→ 微信)
效果不多说了,你看下我右上角的分享按钮就知道了。
改动的地方比较多
先去百度分享获取分享代码,只选择“页面分享功能”就行了,获取到的代码大概是这样:
1 | <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> |
上边的那段 div 的可以不要,要保留下边的 script 部分。
将代码添加到 Code injection 的 Blog Footer 中,保存。
修改content/themes/casper/partials/floating-header.hbs
未修改前的 header.hbs 是这样的
1 | <div class="floating-header"> |
修改后的是这样的
1 | <div class="floating-header"> |
并向content/themes/casper/partials/icons/
里放两个 svg 图标,后缀改名为 hbs,我这里放的是 weibo.hbs 和 wechat.hbs
这时重启后再看下页面,雏形已经出来了,不过样式还需再调整一下。
Code injection 的 Blog Header 添加
1 | <style type="text/css"> |
保存后再刷新看一下,是不是和原有的 tw、fb 差不多了。其实不用百度分享也能自己搞分享,微信分享就是将当前网址生成一个二维码然后呈现出来;微博自己去设置 url 就行了,不过谁让我懒呢,哈哈。
手动指定摘要位置
修改current/core/server/data/meta/excerpt.js
1 | var downsize = require('downsize') |
修改为
1 | var downsize = require('downsize') |
以上增加的代码是为了增加<!-- more -->
支持, 以及摘要分行显示.
全站 SSL
SSL 用免费的 Let’s encrypt 来实现。可以参考我之前写的「Let’s Encrypt 试用手记」或者直接使用这个脚本
至于之前用的百度分享不支持 https,可以参考百度分享不支持 Https 的解决方案
将config.production.json
中的url
改为https://your.domain.com
,重启 ghost。
可能会遇到TOO_MANY_REDIRECTS
这个错误。解决办法是在 nginx 里添加proxy_set_header X-Forwarded-Proto https;
。参考这个 issue
另外建议在config.production.json
配置中添加"forceAdminSSL": true
以使后台也实现 https
未备案引起的一些问题
微信分享之“分享给朋友”
现在微信自定义图片、文案分享,只能通过它的 js-sdk 接口,相关文档在这。它需要你在一个微信公众号里边设置“JS 接口安全域名”,而微信要求这个安全域名是已备案的。那我没备案怎么办?比如像我这样用的国外空间的,肯定是无法通过备案的。好在它有个测试用的平台,微信公众平台接口测试帐号申请,剩下的就不用说了吧 😄
不晓得测试账号获取 jsapi_ticket 和 access_token 有没有总数的限制,微信文档的说的是 1w:“目前为了方便测试提供了 1w 的获取量,超过阀值后,服务将不再可用,请确保在服务上线前一定全局缓存 access_token 和 jsapi_ticket,两者有效期均为 7200 秒,否则一旦上线触发频率限制,服务将不再可用”
微信分享之“分享到朋友圈”
微信很奇怪,分享给朋友的链接不会被它重新排版,而分享到朋友圈的链接,可能会被它重新排版(主要是去除了 js)导致非常难看甚至无法正常浏览。我试过直接把网址贴在正文里也不行。最后发现一种不是办法的办法,把网址生成二维码,然后 po 图上去。别人扫你的这个二维码打开的链接不会被重新排版。