本地化 Casper 主题的分享按钮

前言

Ghost 的默认主题 Casper,在每篇文章的底部都会附有 Tweet, Facebook, Google+ 这三个分享按钮,但对于国内来说,这些按钮有些鸡肋。所以我将它们修改成了 微博、微信、Google+
因为微信没有可以直接分享的链接,所以替换成了二维码,用的是联图网的二维码服务,用微信扫描二维码就可以跳转到博客链接进行分享了。

项目地址:blade254353074/casper-custom

修改 HTML

文章页面的模板文件为post.hbs,修改为如下内容: post.hbs

因为这个主题原来的分享按钮用的是 WebFont,修改它的字体文件又太麻烦,所以我就用了两个 SVG(可缩放矢量图形,Scalable Vector Graphics) 图片做背景了。 svg share button hover 值得注意的是如何让 SVG 背景变色是一个大问题,如果 svg 是嵌入到 html 中的,那可以通过 css 修改 svg 的 fill 颜色来修改图标的颜色,但将 SVG 嵌入到 html 中代码会非常多,所以更好的方法是使用背景图。那么如何让 SVG 背景变色呢? 答案是:

CSS Mask 可以简单地理解成 Photoshop 中的遮罩,在背景(backgound)中将遮罩图片(mask-image)中的透明部分隐藏,非透明部分显示出来。实现代码如下:

[class^="svg-icon"]:before,
[class*=" svg-icon"]:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #bbc7cc;
  vertical-align: text-top;
  transition: background 0.3s ease;
  speak: none;
}

.svg-icon-weibo:before {
  -webkit-mask:  url(../imgs/weibo.svg) center/cover no-repeat;
  mask: url(../imgs/weibo.svg) center/cover no-repeat;
}

.svg-icon-weixin:before {
  -webkit-mask:  url(../imgs/weixin.svg) center/cover no-repeat;
  mask: url(../imgs/weixin.svg) center/cover no-repeat;
}

.svg-icon-weibo:hover:before {
  background-color: #e6162d;
}

.svg-icon-weixin:hover:before {
  background-color: #44b549;
}

目前 CSS Mask 的浏览器支持情况如下: CSS Mask 早在 FFv3.5 和 Chromev4 版本就已经实现了该功能,而微软最新的 Edge 浏览器还在考虑(帅的人早已实现,丑的人还在考虑)。

微信二维码弹出层

微信的分享是用 CSS 实现的,鼠标 hover 之后弹出二维码框: weixin share

hover 弹出实现方法如下:

.popover {
  position: relative;
}

.popover .popover-wrapper {
  display: none;
}

.popover:hover .popover-wrapper,
.popover:focus .popover-wrapper {
  position: absolute;
  display: block;
  top: -120px;
  left: 50%;
  background: #fff;
  border: 1px solid #bbc7cc;
  border-radius: 3px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  cursor: pointer;
  z-index: 10;
}

值得注意的是,需要在.popover这个 a 标签中加上 href="javascript:;"属性,并且在样式中加上cursor: pointer;,不然在移动端浏览器中点击是不会触发 hover 状态的。

箭头用两个伪元素就可以实现了:

.popover .popover-wrapper:before,
.popover .popover-wrapper:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  border-width: 6px 6px 0 6px;
  border-color: #fff rgba(0, 0, 0, 0);
  border-style: solid;
  z-index: 10;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.popover .popover-wrapper:after {
  bottom: -7px;
  border-width: 7px 7px 0 7px;
  border-color: #bbc7cc rgba(0, 0, 0, 0);
  z-index: 9;
}

最后限制一下二维码图片的宽高,让它变成二倍图的样子(Retina 屏幕中会更清晰些)。

最后

DEMO: 其实就是本页面
share button hover 效果不是这样的同学,请升级浏览器。对于坚持用 IE 的同学,手动再见

正在加载 Disqus 评论组件...