工具指令备忘集

发表于 | 更新于: | 分类于 | 评论数： | 阅读次数:

hexo

hexo是一个博客框架，能够快速生成静态网页。支持评论、访问数统计等功能插件扩展。可以和Github域名绑定。

定制主题和安装插件

我选择的hexo主题是 NextT (因为很多人用)。需要自定义插件和修改主题样式时，可以看这篇NexT主题的优化定制修改指南。作者分门别类地收集了主题配置的各种可行操作，并预先踩实了官方文档中的一些坑，感谢。

部署到github

在站点配置文件 _config.yml中配置部署文件

1
2
3
4
deploy:
  type: git
  repo: git@github.com:yourGitHubName/yourGitHubName.github.io.git
  branch: master

部署类型是git，需要安装相关工具包，否则报错Deployer not found: gitgit：

1
npm install hexo-deployer-git --save

此时可以运行下面指令，构建静态页面并上传到Github

1
hexo d

相关指令集

1
hexo new "学习笔记 一"

新建一篇标题为 “学习笔记 一” 的文章，因为标题里有空格，所以加上了引号（也即普通命名不加引号也时可以的）。

1
hexo s

hexo server 的缩写，能够启动一个本地服务器，默认为地址：http://localhost:4000/。

1
hexo g

hexo generate 的缩写，生成网站静态文件到默认设置的 public 文件夹

1
2
hexo d
hexo d --g

hexo deploy 的缩写,第一条指令用于把静态文件部署到设定仓库。如果希望生成静态文件之后直接部署，可使用第二条指令。

1
hexo clean

清除缓存文件 db.json 和已生成的静态文件 public 。网站显示异常时可以执行这条命令试试。

1
hexo new page aboutme

新建一个标题为 aboutme 的页面，默认链接地址为 主页地址/aboutme/

博文中插入图片

如果博文中需要插入图片，则需要在站点配置文件 _config.yml 修改下面两个字段：

1
2
3
post_asset_folder:true
...
url: https://YourName.github.io

并且安装插件：

1
npm install  hexo-asset-image --save

打开 /node_modules/hexo-asset-image/index.js，将内容更换为下面的代码：

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

此后，每次新建博文的同时会多生成一个同名文件，用于存放该博文需要插入的图片。在博文中这么引用图片：

1
![你想输入的替代文字](图片名.jpg)

启用数学公式符号

主题配置文件设置mathjax属性：

1
2
3
4
mathjax:
  enable: true
  per_page: true
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

并在需要引用公式的文章中手动设置：

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
---

Git

Git 是一个分布是版本控制工具，和Github结合强无敌。本地安装好Git之后，想要和Github配合工作还需要一些配置。

配置账号

用户名和邮箱应该与在Github上注册的一致

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

配置SSH公钥

Git服务器使用SSH公钥进行验证，要证明当前电脑具有提交权限就要手持一份在Github上注册了的SSH公钥。按照官方文档说的“我们需要寻找一对以 id_dsa 或 id_rsa 命名的文件，其中一个带有 .pub 扩展名。 .pub 文件是你的公钥，另一个则是私钥。”

首先，确认自己是否已经拥有密钥。打开Git Bash，输入：

1
2
$ cd ~/.ssh
$ ls

如果没看到上述两个文件（或者根本没有 .ssh 目录），可运行 ssh-keygen 生成：

1
$ ssh-keygen

执行完后，可看到如下提示：

使用ssh-keygen生成ssh钥匙

再次进入 .ssh 文件就可以看到生成的钥匙了。打开 id_rsa.pub文件，并把里面的内容复制到 GitHub > Settings > SSH and GPG keys > new SSH key。同时还需要新建一个 YourName.github.io的仓库。（其实这个仓库的ssh下载地址就是 在 hexo> _config.yml > deploy > repo配置的地址。

跳过提交密码

每次提交代码时总会出现密码输入提示：

1
Enter passphrase for key '/c/Users/fujia/.ssh/id_rsa'

如果想跳过这一步骤，需要进行下面设置：

  1. 打开 ssh-agent
1
$ ssh-agent bash

如果给出错误提示：unable to start ssh-agent service...。就打开系统服务，找到OpenSSH Authentication Agent项，如果该项被禁止，把它改为自动。

Open-SSH_Agent

修改之后，按顺序执行下面操作：

1
$ ssh-keygen -p

提示输入 old passphrase 时输入旧密码，提示输入new passphrase 时，直接回车，确认密码时再次回车。

VSCode 插件

VSCode编辑器美化

插件名 介绍 备注
vscode-icons 文件图标 -
GlassIt-VSC 编辑器毛玻璃半透明效果 挺好看的

code相关

插件名 介绍 备注
search node_modules 快速搜索本地node_modules文件 ctrl+shift+p + node_module
Bracket Pair Colorizer 成对括号颜色提示 -
Vetur Vue提示 -
JavaScript (ES6) code snippets 提供ES6的语法支持和片段 -
eslint 格式化工具 -
Beautify 格式化工具 -

调试相关

插件名 介绍 备注
open in browser 浏览器打开html页面 All+B
debugger for chrome chrome 调试插件 神器，让你能在编辑器中调试
Live Server 建立本地服务器 为静态和动态页面提供实时刷新功能

Git相关

插件名 介绍 备注
Git history 看整个仓库文件的提交及修改历史 -

其他辅助工具

插件名 介绍 备注
Chinese (Simplified) Language Pack VSCode的简体中文包 -
Markdown Preview Enhanced markdown 预览 -
Markdown All in One 为编写markdown提供了一些快捷操作 -
0%