Web

Web

给博客添加邮件订阅功能

Android周报发布了十几期了，有不少朋友问是否支持邮件订阅周报。今天才认真考虑怎样来支持这个功能。 经过搜索，很快发现了一个专门提供这类服务的网站——MailChimp。据说这个网站发展了十多年了，也非常有名，我今天才使用，其功能强大和专业，让我很激动。关于邮件订阅的功能，甚至每个细节都做的非常完美。下面我大概纪录一下怎么使用 MailChimp 来实现Android周报的邮件订阅功能。 1. 首先到这里免费注册账号，点击这里注册。每个月2000个订阅者以下是免费的。 2. 创建一个订阅邮件列表，也就是你的订阅者集合。例如我这里创建一个Android周报的订阅者列表。点击这里新建列表 在这个邮件列表中你可以手动添加一些邮件地址。系统也给你自动生成了一个链接，打开这个链接，就能让其他用户自己添加邮件订阅，而且这个页面的样子可以完全自己定义，例如Android周报的邮件订阅地址是：http://eepurl.com/bgYx0j，欢迎点击订阅。还可以生成嵌入网页的订阅框等等。 3. 创建一个 Campaign，也就是一个邮件订阅活动，点击这里创建。这里你可以设置你的邮件内容来

By Race604

Web

Ghost评论系统换成多说

之前在Ghost添加评论这篇文章中已经提到，把给博客系统加上了第三方评论服务DISQUS。DISQUS在各方面都很不错，要替换掉还是有点不舍。只是因为它有点“水土不服”，要评论还需要注册一个帐号。 今天发现一个国内版本的DISQUS———多说，支持国内各种社交帐号登陆评论。集成方法也和DISQUS类似。基本步骤就是：注册帐号，添加代码。但是多说有点不一样，需要手动天蝎博客id和title。解决方法是参考这里Ghost添加多说评论 注册成功后，在多说工具页面，把多说通用代码添加到content/themes/casper/post.hbs中，并且把代码： <!-- 多说评论框 start --> <div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址">

By Race604

Web

Ghost添加代码高亮

参考的这篇文章：Add code highlighting to your Ghost blog. 使用的是Prism代码高亮库，使用很简单，只要在你的网页中引入prism.css和Prism.js即可。 使用方法如下： ```language-markup <h1>Hello World!</h1> ``` 效果如下： <h1>Hello World!</h1> Prism代码不会自动换行，如果你要自动换行的话，可以添加如下CSS代码： code { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera

By Race604

Web

Ghost添加评论

今天看到一个技术博客-Glow技术团队博客，也是使用的Ghost，甚是亲切，并且还有评论。Google一下，果然有给Ghost添加评论的教程：How to Add Comments to Ghost。(PS: 这里参考的这篇文章，来自Ghost for Beginners，看名字就知道，这个站点提供的都是Ghost的教程，计划有空的时候，都研究一下。) 这里是集成的是第三方的评论服务-DISQUS。集成过程非常简单，3步就搞定： 1. 注册/登陆DISQUS； 2. 添加你的网站： 在这里注册一个你的站点，这里名字啥的可以你任意填写。 在网页上添加代码： 上面一步完成注册，选择你要继承的平台，因为我们是Ghost平台，选择Universal Code即可，会得到一段代码。把这段代码添加到你的Theme文件中： /path/to/ghost/content/themes/casper/post.hbs 添加的位置如下： <section

By Race604

Web

博客从MEAN到Ghost迁移

从启程开始搭建基于MEAN.IO的博客，从Change log中也能看到，博客的每个功能都需要自己去折腾。整个过程中还是挺好玩的。其实还有很多功能没有实现，比如博客草稿箱，图片上传，标签等。今天偶然发现这个Ghost博客平台。Ghost本身是开源的Github，可以下载代码自己搭建，也可以使用其博客服务（收费的）。 第一眼看到这个博客，就被惊艳到，体验非常好。 1. 使用Markdown编写博文，编辑器非常棒； 2. 完美适配移动设备； 3. 博客功能齐全； 4. 界面交互也深得我心 5. 支持博文链接自定义 6. ... 也有一些不爽的地方，数据库还不支持MongoDB，让我还要装一个MySql，听说会在后续版本中支持NoSQL数据库。 另外，插入图片功能方便的超出的我想象，如果能支持上传到图片托管服务器就好了，例如七牛，后面准备自己折腾一下。 从自己搭建到使用成熟的博客产品，体会到一句话： 不要重复发明轮子！

By Race604

Web

博客加载很慢的问题

在家里打开博客，发现加载非常慢，使用Chrome的开发工具看一下网络加载。发现是加载fonts.googleapis.com一直加载不成。显然是Google的网站被和谐掉了，看到网上也有不少解决方案，例如这里，就是替换这种资源。 国内有一些完整的替换方案，例如360网站卫士提供常用全套的CDN服务，还有开放静态文件。替换之后，网站加载速度果然瞬间加载完成了。

By Race604

Web

博客添加SEO

本博客的前段是AngularJS的，所以内容都是通过JS动态渲染的。我也在Google的Webmaster上提交了我的网站，内容一直没有被检索到。搜索site:www.race604.com只有一条内容。 搜索了一下angularjs seo indexing，发现Google的爬虫并不能很好检索JS渲染的网页，大牛门建议把网页静态化，专门给爬虫抓取。而且还有很多这样的服务的提供方，专门静态化缓存你的AngularJS网页。我这里就选择了Prerender.io来解决。 原理是Google爬虫在抓去AngularJS的网站的时候，遇到#！这样的URL，会自动替换为?_escaped_fragment_=。例如本来访问的是： http://www.race604.com/#!/articles实际上被替换为了http://www.race604.com/?_escaped_fragment_=/articles。我们就可以把?_escaped_fragment_=这样的URL，路由到一个静态的缓存网页上去。 使用Caching服务 Prerender本身是一个开源的项目，也提供C

By Race604

Web

博客导航栏的优化

博客默认的导航栏在移动设备上的显示各种难看，一直是一个心病。今天抽时间修复了一下，在移动设备上显示也非常优雅了。 MEAN.io的导航栏用的就是Bootstrap的navbar，它本身能很好的兼容移动设备，这里有一个例子。可见是mean.io没有用好。参照前面的例子，下面来进行修改。 导航栏的代码在packages/system/public/views/header.html里面。需要修改如下： <div class="container-fluid" data-ng-controller="HeaderController"> <div class="navbar-header"> <!-- 收起来时的toggle button，注意data-target的值要和后面的对应 --> <button type="button"

By Race604

Web

博客列表页优化

博客快写了20篇了，首页有点太长了。考虑优化一下。 显示摘要 之前在列表页也是全文显示，这里做一个简单的截取，仅取文章前200字符做为摘要。为了避免把句子和Mardown语法截取一半，就会造成混乱，做法是找200字符最后最近的换行符作为截取点。代码如下，虽然有点暴力，显示效果还可以： for (var i = articles.length - 1; i >= 0; i-=1) { var content = articles[i].content; if (content.length > 200) { var idx = content.indexOf('\n', 200); if (idx === -1 || idx > 400) { idx

By Race604

Web

我的博客数据自动备份脚本

之前的这篇MongoDB的数据备份里面提到了一些基本备份命令。我需要把远程的服务器上的数据备份到本地，以防远程Server挂掉而丢失数据。弄了几次，发现这样手动操作实在是太麻烦了。怎么做到全程自动备份？操作如下： 先写一个dump.sh脚本： #!/bin/sh export LC_ALL="en_US.UTF-8" dbname='jlog-prod' if [ $# -gt 1 ]; then $dbname=$1 fi cd ~/backup/ rm -rf $dbname mongodump -d $dbname -o . tarfile=$dbname-`date +%Y%m%d`.tar tar cf $tarfile $dbname

By Race604

Web

MongoDB的数据备份

写这个Blog到今天也有一点心血，如果数据突然丢了也挺可惜的。今天看了一下，在数据量不是很大情况下，MongoDB的数据备份还是非常方便的。原文参考MongoDB整库备份与还原以及单个collection备份、恢复方法。 mongodump备份/mongorestore恢复 这个方法备份是把数据库里面的内容整个dump成BSON文件，使用很简单。 备份： mongodump -d <dbname> -o <dest_dir> 或者 mongodump -h <dbhost> -d <dbname> -o <dest_dir> -h：MongDB所在服务器地址，例如：127.0.0.1，当然也可以指定端口号：127.0.0.1:27017

By Race604

Web

Angular-marked中添加代码高亮

折腾 Angular-marked中大致说了一下添加代码高亮的方法，总结起来就是如下代码： app.config(['markedProvider', function(markedProvider) { markedProvider.setOptions({ gfm: true, tables: true, highlight: function (code) { return hljs.highlightAuto(code).value; } }); }]); 按照说明，把Highlight.js的css和js文件引用进来： <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css">

By Race604

Web

启程

写在前面 搭建这个网站，就是为了做我平时的笔记，便于输入，便于检索和分享。为什么不用博客？因为博客太重了，好像不写上几百上千字，都不敢写一篇。为什么不用微博？微博就是一个那格式、那文字，实在不像一个严肃的东西。为什么不用云笔记？不便于分享。 实现 今天是使用MEAN搭建了这个网站。基本上没有修改写什么代码，但是还是折腾了一段时间。MEAN是一个好东西，JS全栈网站开发，关注这个很久了。什么NodeJS、MongoDB、AngularJS、express.js，这写时髦的东西全部到了。 自己加上了一个时髦的Markdown的格式。选用的是angular-marked这个库。添加的方法是，首先安装这个包，在bower.json中添加一行： "angular-marked": "latest" 根据mean docs中的说明，在packages/articales/app.js中添加一句： Articles.angularDependencies(['hc.

By Race604