今天知乎上收到一个邀请，如何使用Vim为每一行自动编号

把回答总结在这儿： vim内部有内置命令如 line(), 用法可以查看帮助 :h line()

常用的参数有：

• 所在行的行号 .
• 可视模式下首行的编号 ‘<

因此,可以方便的利用line函数进行一些行号相关的操作

• 每行前面插入行号如下

1

:%s/^/\=line(".")/

• 可视区域插入从1开始的编号

1

'<,'>s/^/\=line('.') - line("'<") + 1/

当:s 命令的替换字符串以“\=”开头时，表示以表达式的计算结果作为替换值。

inline-block元素是指通过设置display:inline-block属性的元素，对象可以是行内和块级元素。

1、inline-block 元素之间的空白

如下将span设置为display:inline-block,可以看见元素之间有明显可见的空白。

1
2
3
4
5

<div>
    <span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span>
    <span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span><span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span>
    <span style="display:inline-block;padding:5px; background:#399; color:#FFF;">the foolish wait</span>
</div>

将块级元素li设置为inline-block,有同样的问题。

• the foolish wait
• the foolish wait
• the foolish wait
• the foolish wait

这些空白产生的根本原因是我们在inline-block元素之间的换行。我在第二个和第三个元素之间没有插入换行，就没有产生空白。

2、img 等类inline-block元素

img是可替换元素，表现和inline-block元素一致,因此在img之间也会产生空白。

1
2
3
4
5

<div style="background:#00F;width:450px;">
    <img width="144px" height="144px" src="/images/postimg/github-gravatar.png" />
    <img width="144px" height="144px" src="/images/postimg/github-gravatar.png" />
    <img width="144px" height="144px" src="/images/postimg/github-gravatar.png" />
</div>

产生问题的原因同上。

解决方案

既然知道了问题产生的原因，那么解决方案也就比较容易得出：

1. 最粗暴的办法是不在并列的inline-block元素之间插入换行，直接在一行内写。这样的缺点是代码比较ugly，凌乱不能一目了然
2. 使用一个较大的负word-space,参照这篇文章
3. 换行也是字符，所占宽度和font-size和字体有关系，这个计算比较麻烦，不建议采用
4. 与上面方法同理，不过直接将父亲的font-size设置为0,在元素内部再重新设置font-size 我比较钟爱第四种方法。喜欢哪种解决方案可自行酌情选择,下面是使用font-size:0的效果。

1
2
3
4
5
6
7
8
9
10

<div class="demo" style="font-size:0;">
    <span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span>
    <span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span><span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span>
    <span style="display:inline-block;padding:5px; background:#399; font-size:16px; color:#FFF;">the foolish wait</span>
</div>
<div class="demo" style="background:#00F;font-size:0;width:450px;">
    <img width="144px" height="144px" src="/images/postimg/github-gravatar.png" />
    <img width="144px" height="144px" src="/images/postimg/github-gravatar.png" />
    <img width="144px" height="144px" src="/images/postimg/github-gravatar.png" />
</div>

More

同时注意到在img下方也有一块空白,不过这个和上面的不是同一个问题。这个问题可以通过设置vertical-align:top解决,如下。现在图片下面只剩下10px，是外边容器的padding,对照上面看已去掉了图片底下的空白。

有时候我们需要得到其它人的代码仓库，将别人（未push到远程仓库上的）修改与自己的修改进行合并，或者查看别人某个分支下的代码（而不真正切换别人的分支），本文介绍了相关的操作方法。

git remote

git remote用来管理本地工作目录对应的远程代码仓库，在一般的工作目录下，执行git remote结果如下：

1
2
3
4
5

$ git remote
origin
$ git remote -v
origin  git@git.sankuai.com:www (fetch)
origin  git@git.sankuai.com:www (push)

我们可以使用git remote add命令来增加一个远程仓库，这个远程仓库可以是ssh地址（如上面这种），可以是本地目录，也可以是git协议或者http协议的地址。 例如，我要把李波的仓库作为我的远程仓库之一，可以执行git remote add 来增加仓库，例如：

1
2
3
4
5
6
7
8
9

$ git remote add libo /home/libo/mt
$ git remote
libo
origin
$ git remote -v
libo  /home/libo/mt (fetch)
libo  /home/libo/mt (push)
origin  git@git.sankuai.com:www (fetch)
origin  git@git.sankuai.com:www (push)

这样就将/home/libo/mt作为我的远程仓库之一了。

相应的，可以使用git remote rm或者git remote rename对远程代码仓库的名称进行修改（本地的，不会影响到对方的目录）

git fetch

git fetch用来得到远程代码仓库中本地没有的内容，git fetch 即可，例如：

1
2
3
4
5
6
7
8
9
10

$ git fetch libo
remote: Counting objects: 20, done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 11 (delta 7), reused 4 (delta 2)
Unpacking objects: 100% (11/11), done.
From /home/libo/mt
 * [new branch]      card       -> libo/card
 * [new branch]      master     -> libo/master
 * [new branch]      test1      -> libo/test1
 * [new branch]      ziti       -> libo/ziti

这样正在开发的代码就被抓取到本地了。

git checkout

可以使用git checkout切换到其它人的代码分支，git checkout /，例如：

1
2
3
4
5
6
7
8
9

$git checkout libo/card
Note: checking out 'libo/card'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
 git checkout -b new_branch_name
HEAD is now at 20831f6... 自动充值

这样就可以看到已经commit过的代码了。

git checkout -b

checkout到别人的分支之后，处于detached HEAD状态，也就是说，这时候所作的commit都会被丢弃。要在别人代码的基础上进行修改，可以新建一个本地分支，例如：

1
2
3

(在libo/card分支中)
$git checkout -b newcard
Switched to a new branch 'newcard'

这样就建立了一个名为newcard的本地分支

修改gitconfig文件

有了本地分支之后，就可以在分支上修改和commit了，对于别人的改动，可以使用：

1
2
3

(在newcard分支中)
$git fetch libo
$git merge libo/master

和本地代码进行合并，但这样每次要运行两条命令。其实平常经常运行的git pull与上面两条命令功能相同，只要在配置文件中设置一下，就可以让git pull帮我们代劳：

在.gitconfig中[branch “newcard”]段（没有的话可以自己加上）增加：

1
2

remote = libo
merge = refs/heads/master

如此一来，每次远程更新后，便可以用git pull得到远程的代码。

git push

在本地分支修改并提交后，可以将这些改动提交到远程分支，格式为git push :, src代表本地分支，dst代表远程分支，例如：

$git push libo newcard:card

这样就可以把本地newcard的修改提交到libo下的card分支中。注意：只有在本地已merge远程分支最新代码，且对方不在此分支下才能操作成功。

工欲善其事，必先利其器。 –《论语.魏灵公》

mac下安装exuberant ctags

mac 下自带ctags但是功能有限，要使用一些常用的功能需要安装exuberant ctags

• 下载exuberant ctags
• 安装exuberant ctags

  ./configure
  make
  sudo make install

• 更改PATH，用exuberant ctags替代自带的ctags，在.bash_profile中添加

  export PATH=/usr/local/bin/:$PATH

配置ctags

ctags在查找函数时非常方便，但是对Javascript支持的不是很好,可以进行简单的配置使其生效。

• 创建.ctags文件

  touch ~/.ctags

• 编辑.ctags，填充以下内容

1
2
3
4
5
6
7
8

--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*new[[:blank:]]+Object\(/\2/o,object/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*\{/\2/o,object/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])(^[^\?][[:blank:]]*)([A-Za-z0-9_]+)[[:blank:]]*[:][[:blank:]]*[A-Za-z0-9._$'"()]+/\3/m,member/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*new[[:blank:]]+Array\(/\2/a,array/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*\[/\2/a,array/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([^! ]+[^= ]+)[[:blank:]]*=[[:blank:]]*[^""]'[^'']*/\2/s,string/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$()]+)[[:blank:]]*[:=][[:blank:]]*function[[:blank:]]*\(/\2/f,function/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])function[[:blank:]]+([A-Za-z0-9._$]+)[[:blank:]]*([^)])/\2/f,function/

some Tips about ctags

使用ctr + ] 可以跳转到目标函数
使用ctr + o 或 ctr + t 可以跳转回之前的文件

在Linode VPS上安装了octopress后，然后捣腾远程部署的问题，在wenbing的帮助下终于搞定了。 主要步骤：

• 在VPS以octopress安装目录为源库建立一个git仓库

    git clone --bare ~/octopress ~/git/octopress.git
  

• 更改远程仓库工作目录到需要部署的目录

    git config core.bare false
    git config core.worktree ~/octopress
    # 我把home下的octopress作为工作目录
    git config receive.denycurrentbranch ignore
  

• 在远程git仓库下设置钩子（hooks）脚本hooks/post-receive,内容如下

    #!/bin/sh
    GIT_WORK_TREE=$HOME/octopress/ git checkout -f
    cd $HOME/octopress/
    PATH=$PATH:/usr/local/rvm/rubies/ruby-1.9.2-p290/bin
    # 这个拼接的路径可以通过which rake 获取，我的服务器是ubuntu
    rake generate
    rake deploy
    # 我的工作目录不是web目录，这个设置方法参考octopress的doc
  

• 设置完成后将post-receive文件的权限设置为可执行,钩子脚本将在收到远程push之后执行

    chmod a+x post-receive
  

• 本地配置好octopress之后，将remote的url设置为远程仓库的地址

    git remote set-url origin linodevps://git/octopress.git
  

• 现在本地写完文章后push就可以自动发布了

之前做箭头一直都是用图片，也尝试过用新浪微博用的那种特殊符号“◆”，不过宽高，三角形的大小等都不太好控制，后来发现可以直接用css绘制，非css3，使用常规的border进行绘制，即使在IE6下也可以完美实现。

具体的做法是对一个矩形，设置border，并将width和height设置为0，即可模拟出箭头形状（三角形）。 如下图所示绘制了一个矩形，并将矩形的width和height设置为0，border设置为100px：

相关CSS: border-left:100px solid #F00;
border-right:100px solid #F00;
border-top:100px solid #00F;
border-bottom:100px solid #00F;
width:0;
height:0; 上面的其实就是四个矩形，分别是上下左右四个方向，如果我们想要某一个方向的矩形，就可以将它相邻两侧的border-color设置为transparent,对侧不设置border

第一个箭头的CSS，其余的类似： border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid #00F;
width:0;
height:0; 下面是一个箭头的Demo：

常用函数

_trackPageview()

_trackPageview(opt_pageURL)

Google Analytics（分析）跟踪代码 (GATC) 的主逻辑。如果启用了链接器功能，它会尝试从网址中提取 Cookie 值。否则，它会尽量从 document.cookie 中提取 Cookie 值。它还会根据需要更新或创建 Cookie，然后将它们回写到文档对象，并收集所有相应的指标发送到 UCFE（Urchin Collector Front-end，Urchin 收集器前端）。

异步代码段（推荐） gaq.push(['setAccount', 'UA-12345-1']); gaq.push(['trackPageview', '/home/landingPage']);

迁移到Octopress

历经磨难终于在vps上配置好了Octopress。 接下来在vps 上配置Repo
测试下在vps配置的Git Repo 和 自动发布钩子

OK,thx,yes