NodeJs分享

技术分享以及项目实践

目录

  • 起源
  • 特性
  • 发展
  • 影响
  • 安装
  • 生态圈
  • 项目应用

起源

Nodejs是什么?

  • 服务器端运行的 Javascript
  • 基于 Google Chrome的javascript engine V8
  • 事件驱动,无阻塞 Evented,no-blocking
  • 扩展js语义:增加了模块化
  • 大约有8000行 c/c++代码,2000行 js 代码

另外这里有一篇在线的文章深入浅出Node.js可以参阅。

特性

  • 支持高并发
  • 异步io

发展

Nodejs版本

在和io.js合并之前一直维持着0.x.x版本,但是和io.js合并后就已经开始是4.x.x5.x.x甚至6.x.x

影响

由于js语法简单,掌握起来非常快,且大多数开发者都比较熟悉,所以上手很快。再加上有npm库的支持,使得nodejs开发也是很快,而且是越发展越迅猛的势头。它可以运用于许多场景,不仅仅是web开发,可以做桌面应用,手机App,可以命令行等等。

  • 在web通讯中运用最广的应该是socket.io,它可以应用到web实时通讯,可以用于游戏通讯,可以用于在线开发工具通讯或者热重载等等。
  • 在服务器领域最火的应该是express,用它开发web服务器非常快而且性能不错。
  • 在用户身份认证方面使用最多的应该是passport,它为身份认证提供了统一的接口,支持本地身份认证和各种第三方身份认证。
  • 在桌面应用开发方面有nw.jselectron,相对来说electron更好,而且Github官方出的开发工具Atom就是使用electron开发的。使用它们开发的工具还有很多,包括slack // todo
  • 在手机App方向应用最火的、热度最高的应该算是ionicReact Native,前者借助于AngularjsPhoneGap可以实现用js开发跨平台的手机应用。后者是Fackbook依赖于其React推出的手机应用开发套件,其火热程度非同一般。
  • 其它更多的产品等你发现和分享。

安装

Nodejs环境的安装方法各平台不一致,但都比较简单。非windows平台建议使用nvm进行nodejs的安装和版本管理。

全局安装模块

使用npm安装全局模块npm install -g some-module

本地安装

使用npm安装本地模块npm install some-module,它有2个常用的参数--save--save-dev,分别表示将该模块依赖信息保存到package.jsondependenciesdevDependencies,分别表示运行时依赖和开发时依赖。这样项目发布出去后别人就可以通过npm install --productionnpm install命令将依赖安装上。

安装指定版本或指定tag

  • 安装指定版本 npm install some-module@1.3.0
  • 安装指定tag npm install some-module#dev
  • 更多其它的安装条件在这里不做说明

更新

更新可以直接重新安装也可以使用update命令npm update [-g] some-module

卸载

对应于install命令有uninstall命令,使用方法和install一致npm uninstall [-g] [--save|--save-dev]

一些说明

  • npm的包大多是嵌套的,即包A依赖包B,包B又依赖包C,npm会处理所有的依赖关系并全部安装(npm 2和npm 3有所区别,npm 2是在每个包下安装其所有的依赖包,包括嵌套依赖,而npm 3会先分析包的依赖关系,将依赖扁平化,减少重复依赖)
  • 由于国内网络管制原因,可能有些包在安装时会出现失败,如果出现失败,建议使用国内npm源,比如cnpm等。个人喜欢使用nrm进行管理
1
2
3
npm install -g nrm
nrm ls
nrm use taobao # 这里使用的是淘宝源

生态圈

Nodejs的生态圈主要靠npm(node package manager)。这里面有成千上万的工具,每天更新的包数量就有//todo
当我们需要使用node开发某些功能时要善用npm,因为它里面已经有很多现成的包,不需要我们重复造轮子,直接拿来用就可以了。
我们可以通过npm search或者去npm官网搜索,输入关键词,找到包后查看其说明,如果是我们想要的,那就npm install它吧。

项目应用

此次精总前端项目就大量使用了Nodejs的相关技术。

  • 包安装。使用npm(npm也是很多前端库文件的发布目录,bower等已经不适合现在的趋势)将项目使用的框架文件安装到本地并使用node的文件模块将其复制到我们的项目目录中(多这一步是因为我们没有采用开发时编译的思路,因为这对框架的搭建和开发学习的成本要求较高)
  • gulp任务。使用gulp添加开发时任务gulp dev,包括代码风格检查和预编译语言的实时编译以及浏览器自动重载等。还有其它的包括js文档生成任务和文档查看服务器任务等。
  • 源代码的构建。使用nodejs生态圈中的构建工具对源码进行构建,生成服务发布的目录文件,主要是对代码进行合并压缩和版本控制。
分享到

Git迁移记录

背景

之前公司的Git服务器是用的Gogs,当时安装时选择的是tidb数据库。后来发现tidb数据库无法使用ssh服务(更改为其它数据库是可以的),但是我们的开发过程中有很多命令行的一些操作,导致每次使用命令时都需要输入用户名和密码,很麻烦,所以想改下数据库,然后使用ssh://格式的Git仓库。

尝试

第一次是打算从Gogs入手,但是Gogs并不提供数据迁移的能力。
后来准备从数据库角度出发,备份之前的数据库和仓库。仓库备份很简单,但是数据库是tidb采用了xorm库封装的,没有启动服务,所以没法用mysql客户端连接。
再后来准备尝试用xorm库提供的方法新建个工程然后把数据备份出来,奈何需要学习Go语言,而且好多不会玩,后来还是没有尝试了。
也找过DBA帮我看下,无果…

现行解决方案

现在采用的解决方案虽然有点麻烦,但好歹也是可行的。首先重新建个Gogs的服务,初始化安装(这次选择的是sqlite,因为那台服务器上没有mysql,也就懒得装了),重新建立组织和空仓库,建用户。然后通过clone之前的仓库并添加新的仓库地址最后push的方式来完成的。理论虽然简单,但中间还是遇到了一些小问题,这里记录下。下面是shell脚本(参考了Push local Git repo to new remote including all branches and tags)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/bin/sh
sourceProtocal='http://'
sourcePrefix='192.168.10.240:3000/'
targetPrefix='git@192.168.10.240:'
array=(
org/repo.git
org/repo1.git
)
for repository in ${array[@]}; do
# username是原仓库的用户名,password是原仓库的密码
source=${sourceProtocal}username:password@${sourcePrefix}${repository}
target=${targetPrefix}${repository}
tmp=${repository##*/}
dir=${tmp%.git*}
git clone ${source}
cd ${dir}
git remote add target ${target}
for remote in `git branch -r | grep -v master `; do
git checkout --track remotes/$remote
done
# git push target '*:*'
git push target --all
git push target --tags
echo 'source '${source}' clone OK.'
cd ../
done

添加ssh公钥

ssh公钥是为了让我们和服务器通讯时免去输入用户名和密码的一种认证方式,详细可以查看这篇文章),我们改成ssh方式后需要将我们电脑的公钥上传至Gogs才能实现无需密码的push操作。
1.生成公钥(已经生成过可以跳过)。如果电脑上安装了Git并且有Git Bash,那么可以打开Git Bash运行

1
2
# -C 后面的是注释,可不传
ssh-keygen -t rsa -C "youremail@xxx.com"

然后一路回车生成我们的公私钥,文件存放在C:\Users\{your windows accoutn}\.ssh
如果该方法不适合你请自行百度生成ssh公钥。
2.上传我们的公钥。打开上面说的目录里面的id_rsa.pub文件,复制里面的所有内容。再打开Gogs服务的网址,登陆。
点击右上角头像,选择用户设置,选择管理 SSH 密钥,点击增加密钥密钥名称处随便填写个,然后在密钥内容中粘贴我们前面复制的内容,点击下面的增加密钥按钮完成添加。

工作副本的仓库地址修改

1.进入原克隆的工作目录

1
cd /path/to/your/workspace

2.查看原工作副本的远程地址

1
git remote -v

可以看到之前的地址是以http://开头的,我们需要修改其为新的ssh://方式。
3.修改地址

1
git remote set-url origin <git@192.168.10.240:org/repo.git>

orgrepo为上述git remote -v查看得到的组织名和仓库名,该地址也可以通过网页上复制得到
Gogs ssh
一切OK!

如果有其它非origin远程,可以通过同样的方法修改仓库地址。

分享到

mp4视频实现边下载边播放

在做视频播放时,出现了这样一个问题,就是网页上播放mp4视频时,必须要等到视频下载完成之后,才能播放,不能够随意拖拽,之后通过一个叫做ffmpeg的视频转码软件解决了这个问题.

1.软件地址:链接: http://pan.baidu.com/s/1qW2ZpJe 密码: 291n

2.windows下进入,通过cmd命令行进入该软件的目录bin文件夹下,然后,输入qt-faststart.exe 源文件.mp4 新文件.mp4 就会当前目录生成一个转过的mp4视频,

3.最后,视频要通过nginx服务器作为中转来实现在线播放,具体配置如下:

nginx服务器的root目录要改为具体的tomcat目录存放转换好了的视频资源路径,端口要改成一个不和tomcat冲突的端口号

jsp视频播放页面,加载视频资源的时候访问的是nginx服务器(通过nginx的端口号来访问)不访问tomcat,访问nginx之后,然后nginx寻找资源从tomcat的静态资源存放路径中去读取事先上传过来的视频,当然如果你愿意把视频直接拷到nginx的默认根目录,也可以不需要改动nginx的conf配置文件的root目录
这里是当时jsp页面端的部分代码,nginx的端口号改的是8080,视频播放插件用的是ckplayer

1
2
3
4
5
6
7
8
9
//nginx服务器视频地址
var path=location.protocol+"//"+window.location.host+":8080"+"${path}";
var flashvars={
f:path,
c:0,
b:1
};
var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
CKobject.embedSWF("<c:url value='/static/ckplayer6.4/ckplayer/ckplayer.swf'/>",'a1','ckplayer_a1','800','470',flashvars,params);

分享到

ppt-online

在做科大学生骨干培训班这个项目时 ,由于需要用到在线浏览学生的ppt文件,为了实现这个问题,采用的解决方案是通过一个软件将其转换为flash进行播放.

软件准备:链接:http://pan.baidu.com/s/1sjv5DPb

解压之后,可以看到iSpring Presenter文件夹,iSpring Presenter 是以 PowerPoint 插件的形式工作的,下载解压后先运行 !)iSpringPresenterPortable.exe,选择安装后会自动添加插件,再打开 PowerPoint 就能看到了,支持 Microsoft PowerPoint 2003/2007/2010.

安装完毕之后,打开一个ppt文件,这时ppt菜单工具栏会出现一个iSpring Presenter工具选项,点击切换到该工具选项,点击publish按钮,弹出一个对话框,general选项卡有个Player Template,可以选择一个适合的播放器模板,还有就是选择生成路径,其他选项卡设置可以不动,点击弹出框的按钮publish即可.具体如下图

完了之后生成一个文件,里面有swf文件以及js 和html文件,在实际应用中,把html和js文件写成jsp形式,然后把jsp文件里面引用swf的路径替换为从数据库读取的路径即可.

整个过程就是把ppt转swf文件,然后通过,软件提供的html和js整合一个公共的ppt在线播放页面,用来加载swf文件即可.

分享到

vsftpd的安装配置

参考自http://www.cnblogs.com/whoamme/p/3494128.html

1.安装相关工具包

1
yum -y install pam vsftpd db4 db4-utils

2.创建一个不能登录的用户,用作ftp服务的虚拟用户

1
useradd -d /home/xxx -s /sbin/nologin vuser_ftp

/home/xxx为用户根目录,/sbin/nologin指定用户不能使用shell,该账号不能用于登录系统
这里使用vuser_ftp作为虚拟用户的映射对象,在web服务器中可以使用httpd
这个服务的用户来作为虚拟用的映射。比如www apapche web,没大明白~
3.创建一个记录ftp虚拟用户的用户名和密码文件,如login.txt
第一行用户名,第二行密码,以此类推

1
2
3
4
5
vi /etc/vsftpd/login.txt
user1
pwd1
user2
pwd2

4.使用db_load 命令生成虚拟用户认证文件

1
db_load -T -t hash -f /etc/vsftpd/login.txt /etc/vsftpd/vsftpd_login.db

vsftpd_login.db文件是db_load命令生成的虚拟用户认证文件
5.备份vsftpd配置文件,再修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
vi /etc/vsftpd/vsftpd.conf

anonymous_enable=NO
local_enable=YES
write_enable=YES
local_umask=022
dirmessage_enable=YES
xferlog_enable=YES
connect_from_port_20=YES
xferlog_file=/var/log/vsftpd.log
xferlog_std_format=YES
listen=YES
userlist_enable=YES
tcp_wrappers=YES
max_per_ip=5
max_clients=100

#### 下面是关于虚拟用户的配置

guest_enable=YES #打开用户虚拟
guest_username=vuser_ftp #将所有虚拟用户映射成vuer_ftp这个本地用户
#此用户是之前新建的用户
pam_service_name=ftp.vu #ftp用户的pam验证方式,默认是vsftpd,必须改掉。
user_config_dir=/etc/vsftpd/vsftpd_user_conf #这里放置每个虚拟用户的配置文件

6.创建vsftpd.conf中提到的验证文件
使用rpm -ql vsftpd这个命令查找验证模块的例文,找到如下一段

1
/usr/share/doc/vsftpd-2.2.2/EXAMPLE/VIRTUAL_USERS/vsftpd.pam

将其拷贝到vsftpd.conf文件中配置的路径中并改变文件名

1
cp /usr/share/doc/vsftpd-2.2.2/EXAMPLE/VIRTUAL_USERS/vsftpd.pam /etc/pam.d/ftp.vu

前面配置中的pam_service_name=ftp.vu中ftp.vu使用的是相对路径,绝对路径是/etc/pam.d/ftp.vu

上面这条命令就是把vsftpd程序自带的关于pam认证的模板文件拷贝到pam.d这个服务的工作目录,同时改变文件名为ftp.vu
/etc/pam.d/目录下已经有了一个vsftpd.pam文件,现在要做的是让vsftpd虚拟用户的这个功能用到的一个特殊的pam认证。还要修改下ftp.vu这个文件

先来看下原文件的内容:

1
2
3
4
vi /usr/share/doc/vsftpd-2.2.2/EXAMPLE/VIRTUAL_USERS/vsftpd.pam

auth required /lib/security/pam_userdb.so db=/etc/vsftpd/login
account required /lib/security/pam_userdb.so db=/etc/vsftpd/login

将两处的db=/etc/vsftpd/login修改成db=/etc/vsftpd/vsftpd_login,文件都是以.db结尾的,但此处不要填写.db。同时由于我们的系统是64位的,还需要将配置中间的/lib/改为/lib64/

1
2
3
4
vi /etc/pam.d/ftp.vu

auth required /lib64/security/pam_userdb.so db=/etc/vsftpd/vsftpd_login
account required /lib64/security/pam_userdb.so db=/etc/vsftpd/vsftpd_login

7.创建vsftpd.conf中提到的虚拟用户配置目录user_config_dir=/etc/vsftpd/vsftpd_user_conf,以及在这个目录下面创建每个用户的权限配置文件
创建/etc/vsftpd/vsftpd_user_conf目录

1
mkdir /etc/vsftpd/vsftpd_user_conf

/etc/vsftpd/vsftpd_user_conf目录下面分别创建之前在login.txt虚拟用户名和密码文件中提到的user1 user2 这两个虚拟用户的权限配置文件

1
2
3
4
5
6
7
8
vi /etc/vsftpd/vsftpd_user_conf/user1

anon_world_readable_only=no #用户可以浏览和下载文件,不能设为yes,否则无法看到文件
write_enable=yes #用户可以创建文件
anon_upload_enable=yes #用户可以上传文件
anon_mkdir_write_enable=yes #用户有创建和删除目录的权限
anon_other_write_enable=yes #用户具有文件改名和删除文件的权限
local_root=/home/xxx #指定这个虚拟FTP用户的家目录。这里的xxx是你网站的根目录

之后再创建user2的权限文件(略)
8.OK!结束!重启vsftpd服务

1
service vsftpd restart

分享到

服务器安全登录

搬瓦工的VPS要到期了,以前用着好难受的感觉,所以决定加点钱换个好点的,最后还是买了Linode。这里记录一下以一个更安全的方式连接VPS的设置过程。

新建用户

首先新建用户,不使用root用户登录

1
useradd -g root erguotou

设置密码

1
passwd erguotou

添加到root组(不确定该步骤是否必须)

1
vi /etc/sudoers

找到

1
2
## Allow root to run any commands anywhere
root ALL=(ALL) ALL

在下面添加

1
erguotou ALL=(ALL)     ALL

使用公私钥方式登录

首先退出root用户,使用新建的用户登录,然后在用户目录下新建.ssh/authorized_keys文件。

1
2
3
mkdir ~/.ssh
touch ~/.ssh/authorized_keys
chmod 700 ~/.ssh

然后复制本机的公钥内容添加到VPS的authorized_keys文件中,保存,退出登录,重新登录后就可以不用输入密码了。

禁root禁密码登录

使用root用户执行

1
vi /etc/ssh/sshd_config

找到PasswordAuthentication配置,并改为no

1
PasswordAuthentication no

找到PermitRootLogin配置,并改为no

1
PermitRootLogin no

最后退出当前用户登录,然后尝试使用root登录,再尝试是否可以用密码方式登录。

分享到

优秀Web字体收集

  • InfoQ
1
2
3
p: {
font-family: 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, STHeiti, 'WenQuanYi Micro Hei', SimSun, Helvetica, sans-serif;
}
  • Vue.js

    1
    2
    3
    p: {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    }
  • Source code

    1
    2
    3
    pre: {
    font-family: "Source Code Pro", Consolas, Monaco, Menlo, monospace;
    }
分享到

在树莓派上安装Ghost的一些坑

最近开始玩树莓派,自然要在小pi上装个node,跑个Ghost啊。中途遇到了一些小坑,这里记录一下。

1.raspbian系统安装后默认只有大概4G左右的空间(可以使用df -hl查看磁盘空间),tf卡的其它空间浪费了,需要扩容到整个tf卡的大小。在raspbian中运行

1
sudo raspi-config

选择expand_rootfs,按照提示操作并重启。

2.删除了一些不需要的安装包。首先安装wajig(这个工具集成了apt-get/dpkg/aptitude等等):

1
sudo apt-get install wajig -y

然后查看已安装的包

1
wajig large

找到后面几个用不到的且占用体积较大的删除掉,可一次性删除多个:

1
sudo aptitude remove xxxx xxxx xxxx

3.nodejs的sqlite3模块似乎没有arm平台的编译包,我也懒得自己编辑了,直接改成使用mysql了。

4.其它没什么不一样的,使用pm2守护Ghost,使用Nginx做代理,运行,OK!

分享到

前端学习之路

以下只是自己总结的一些经验,欢迎大家讨论并提出自己的意见。

####1. 道亦有道
  学习任何一门语言,都应该遵循它的编程规范,前端也不例外,一致的代码规范为我们后面的学习和维护会减少很多麻烦。这里介绍几个前端规范文档。
GOOGLE的前端代码规范
编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

####2. 历史沉淀
  在WEB开发中,有许多问题是需要我们解决的,其中比较让人头疼的就是浏览器规范不一,我们需要一个统一的工具来实现多浏览器的通用,而Jquery就是一个不错的实现。对于新人来说,学习Jquery似乎是一个必经之路,只有走过这条路才能发现更好的更适合使用需求的。文档方面首推w3school ,这里有很多新人学习的资料,也是很多人成长道路上的第一份学习资料,建议将“HTML教程”和“浏览器脚本”这2个部分学习好,尤其是“JQuery”这部分,还有一个JQuery的API
  同样是历史遗留问题,各浏览器的兼容也是一个很大的难题,虽然我们很希望所有的浏览器的表现都一样,所写的代码在各浏览器都运行正常,但是目前的形式并不是我们理想的那样,有时候我们很多代码是为了适应各种浏览器而写的(当然,未来是光明的,未来肯定不会再有这么多问题)。多浏览器的兼容我觉得主要靠经验积累,因为你可能会遇到各种不同的情况,这里提供一些经验参考。
知乎上关于浏览器兼容性的讨论
前端工程师如何系统地整理和累积兼容性相关的知识?
  这里还有一点需要介绍,也是新人必须学习的,那就是调试技巧,调试也是开发过程中最重要的环节。我个人常用的调试工具还是用Chrome的Developer Tools,如果用FireFox,那么调试工具就是使用FireBug,如果是IE,似乎就是用自带的开发者工具,这些调试工具的使用大致相同,都可以通过F12键调出(Mac下不是的),调试代码也是经验的积累,前期掌握调试的步骤就可以了。

####3. 时下热门
  前端发展到现在已经要进入了一个爆炸式的时期了,要学习和掌握的技能太多了,而这一切都是因为NodeJs的异军突起。不过在学习NodeJ之前,可以先看看一些常见的CSS框架和JS框架,这些框架可以帮助我们更好地布局或者更好的码代码。

  • BootStrap 这个是现在非常火的一个框架,由Twitter开发,让那些即使不太会前端的人也能开发出不错的布局和界面。
  • AngularJs 同样也是一个很火的JS框架,由Google开发,其数据双向绑定功能非常吸引人,能大量减少开发者的工作量,Gmail就是非常成功的一个转型。
  • ReactJs 今年特别火的一个JS框架,由Facebook开发,其背后也是有很多故事,这个东西也是非常新,自己还没有去学习,不做过多介绍。
  • RequireJs/SeaJs 都是模块化开发的工具,让代码的组织性更强,不再杂乱无章。
  • NodeJs 无疑是当前最火的一个点,从NodeJs后诞生出了很多新的技术,不过NodeJs的学习还是比较快的,因为代码都是js。
  • Grunt/Gulp 在NodeJs出来之前很多的自动化工具都是基于Ant的,但是现在有了NodeJs后这2个自动化工具就变得非常火热,这些自动化工具可以一键完成各种任务,包括代码检查、代码压缩和合并等等。
  • CoffeeScript 一门编译到 JavaScript 的小巧语言,它尝试用简洁的方式展示 JavaScript 优秀的部分。还有后来发展的TypeScript
  • Less/Sass/Stylus 这些是css的预编译语言,也是为了更好的书写CSS。
    ####4. 展望未来
      因水平有限,此处也不做过多展望,免得误导大家,不过可以知道的是前端的发展速度太快,不跟紧脚步就会赶不上大部队,别人说的东西你就不懂了,这里给出一个Github里的流行趋势,在这里可以看到现在有哪些东西比较热门,总的来说学习前端就要保持一个时刻学习的心。
      再说说前端演化的发展吧,一个是混合开发(Hybrid App),其中以IonicHBuilder/HTML5+/mui为代表,还有一个是NodeJs桌面级应用开发。这些都可以作为前端学习道路中的一个分支吧,也会是一个不错的方向。

这里有一个别人推荐的网站,我看了觉得还是挺不错的,也是推荐给大家菜鸟教程。还有一个很有意思的Web Developer技能树,像玩游戏一样查看自己的技能结构。

分享到

Ghost中添加评论系统

Ghost系统默认是没有评论系统的,虽然官方也在关注这个问题,不过短时间内应该是不会有所进展,所以现在如果要在Ghost中使用评论,还是先使用第三方服务吧。下面介绍几种常见的评论系统,如果有更好的,欢迎来补充。
  1. Disqus 一个国外的评论系统。首先注册一个账号,这个不多介绍,记得激活邮箱。进去后点击头像旁边的设置下拉里面的”Add Disqus To Site”,
Disqus
然后在弹出的页面中根据情况设置属性,
Disqus profile
完成后会跳到安装页面,在这里我们选择“Universal Code”,
Disqus code selection
最后我们复制页面中的脚本插入到Ghost的主题文件中,位置是/content/themes/[casper]/post.hbs文件的</article>结束标签之前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<article>
...
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
/* * * 请将此处改为你自己的 * * */
var disqus_shortname = 'erguotou';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</article>

到这里应该说基本是完成了,你已经可以在文章页面中看到Disqus的内容了,页面下面还有个统计评论数量的,这里不做介绍了。到这里基本上已经成功地使用上了Disqus,但是我们是不是可以做一点设置,让它更本地化,样式更好看呢?答案肯定是可以的,在Disqus的设置页面(Settings)中有很多设置,其中General选项卡中有一个Language,你可以选择Chinese,这样你的Disqus就是中文的了,这里还有很多其它设置,请自行研究。另外目前Disqus无法修改样式,虽然可以微调,然而并没有乱用啊。
  2. 多说 一个国内的评论系统。同样是先登录,然后点击“我要安装”,根据自己情况填写,
Duoshuo然后选择通用代码-稳定版进行复制,同样插入到post.hbs文件的</article>结束标签之前。复制后我们需要对复制的代码进行一些修改,我们将第一行修改为

1
<div class="ds-thread" data-thread-key="{{id}}" data-title="{{title}}" data-url="{{url absolute="true"}}"></div>

这样就完成来多说的安装,在多说的设置中有很多是我们可以调节的,多说支持自定义CSS,这样我们就可以将多说的评论框调成我们自己喜欢的样子,这部分请自行研究,这里不做过多介绍,我这个博客用的就是多说评论,自己简单的改了点样式。
  3. 友言以及畅言等其它的第三方社会化评论系统都有类似的功能,安装方式大抵相同,欢迎大家自己研究,给出更多教程。
  另外关于各个评论的比较,大家可以看下这篇文章,不过个人觉得畅言的样式更符合ghost一些。

分享到