### 项目创建

#### 1. 安装脚手架

```shell
npm install -g yo generator-code
```

cd 到项目目录，运行

```shell
yo code
```

####  2. 运行看效果

构建完成后，直接用vscode打开项目，按F5运行项目，此时会弹出一个新的vscode窗口（类似我们写html后，会运行浏览器来看效果，新打开的vscode窗口就起到浏览器相同的作用）。

同时按下ctrl+shift+p，在输入框中输入Hello Word，即可在右下角看到插件运行的消息

#### 3. 项目结构

主要配置文件：extension.ts 和 package.json

![](https://qiniu.lgx123.cn/20200814171756.png)

package.json关键内容如下：

```json
	"name": "vscode-plugin-bear",
	"displayName": "vscode-plugin-bear",
	"description": "My VSCode plugin",
	"version": "0.0.1",
	"publisher": "bear",
	"engines": {
		"vscode": "^1.27.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"onCommand:extension.helloWorld"
	],
	"main": "./out/extension.js",
	"contributes": {
		"commands": [
			{
				"command": "extension.helloWorld",
				"title": "Hello World"
			}
		]
	}
```

关键说明：

- name 和 publisher：VS Code使用\<publisher>.\<name>作为插件的唯一ID，例如我这里会以bear.vscode-plugin-bear作为唯一ID。
- displayName：插件展示名称
- description：插件自我描述
- version：版本号
- engines：使用此插件的VS Code最低版本要求
- categories：插件分类，可选值[Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
- activationEvents：拓展可被激活的事件数组
- main：入口文件
- activationEvents

貌似有[博主](http://blog.haoji.me/vscode-plugin-package-json.html)描述的更全面，这里拿来用用：

```json
{
	// 插件的名字，应全部小写，不能有空格
	"name": "vscode-plugin-demo",
	// 插件的友好显示名称，用于显示在应用市场，支持中文
	"displayName": "VSCode插件demo",
	// 描述
	"description": "VSCode插件demo集锦",
	// 关键字，用于应用市场搜索
	"keywords": ["vscode", "plugin", "demo"],
	// 版本号
	"version": "1.0.0",
	// 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
	"publisher": "sxei",
	// 表示插件最低支持的vscode版本
	"engines": {
		"vscode": "^1.27.0"
	},
	// 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
	"categories": [
		"Other"
	],
	// 插件图标，至少128x128像素
	"icon": "images/icon.png",
	// 扩展的激活事件数组，可以被哪些事件激活扩展，后文有详细介绍
	"activationEvents": [
		"onCommand:extension.sayHello"
	],
	// 插件的主入口
	"main": "./src/extension",
	// 贡献点，整个插件最重要最多的配置项
	"contributes": {
		// 插件配置项
		"configuration": {
			"type": "object",
			// 配置项标题，会显示在vscode的设置页
			"title": "vscode-plugin-demo",
			"properties": {
				// 这里我随便写了2个设置，配置你的昵称
				"vscodePluginDemo.yourName": {
					"type": "string",
					"default": "guest",
					"description": "你的名字"
				},
				// 是否在启动时显示提示
				"vscodePluginDemo.showTip": {
					"type": "boolean",
					"default": true,
					"description": "是否在每次启动时显示欢迎提示！"
				}
			}
		},
		// 命令
		"commands": [
			{
				"command": "extension.sayHello",
				"title": "Hello World"
			}
		],
		// 快捷键绑定
		"keybindings": [
			{
				"command": "extension.sayHello",
				"key": "ctrl+f10",
				"mac": "cmd+f10",
				"when": "editorTextFocus"
			}
		],
		// 菜单
		"menus": {
			// 编辑器右键菜单
			"editor/context": [
				{
					// 表示只有编辑器具有焦点时才会在菜单中出现
					"when": "editorFocus",
					"command": "extension.sayHello",
					// navigation是一个永远置顶的分组，后面的@6是人工进行组内排序
					"group": "navigation@6"
				},
				{
					"when": "editorFocus",
					"command": "extension.demo.getCurrentFilePath",
					"group": "navigation@5"
				},
				{
					// 只有编辑器具有焦点，并且打开的是JS文件才会出现
					"when": "editorFocus && resourceLangId == javascript",
					"command": "extension.demo.testMenuShow",
					"group": "z_commands"
				},
				{
					"command": "extension.demo.openWebview",
					"group": "navigation"
				}
			],
			// 编辑器右上角图标，不配置图片就显示文字
			"editor/title": [
				{
					"when": "editorFocus && resourceLangId == javascript",
					"command": "extension.demo.testMenuShow",
					"group": "navigation"
				}
			],
			// 编辑器标题右键菜单
			"editor/title/context": [
				{
					"when": "resourceLangId == javascript",
					"command": "extension.demo.testMenuShow",
					"group": "navigation"
				}
			],
			// 资源管理器右键菜单
			"explorer/context": [
				{
					"command": "extension.demo.getCurrentFilePath",
					"group": "navigation"
				},
				{
					"command": "extension.demo.openWebview",
					"group": "navigation"
				}
			]
		},
		// 代码片段
		"snippets": [
			{
				"language": "javascript",
				"path": "./snippets/javascript.json"
			},
			{
				"language": "html",
				"path": "./snippets/html.json"
			}
		],
		// 自定义新的activitybar图标，也就是左侧侧边栏大的图标
		"viewsContainers": {
			"activitybar": [
				{
					"id": "beautifulGirl",
					"title": "美女",
					"icon": "images/beautifulGirl.svg"
				}
			]
		},
		// 自定义侧边栏内view的实现
		"views": {
			// 和 viewsContainers 的id对应
			"beautifulGirl": [
				{
					"id": "beautifulGirl1",
					"name": "国内美女"
				},
				{
					"id": "beautifulGirl2",
					"name": "国外美女"
				},
				{
					"id": "beautifulGirl3",
					"name": "人妖"
				}
			]
		},
		// 图标主题
		"iconThemes": [
			{
				"id": "testIconTheme",
				"label": "测试图标主题",
				"path": "./theme/icon-theme.json"
			}
		]
	},
	// 同 npm scripts
	"scripts": {
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "node ./node_modules/vscode/bin/test"
	},
	// 开发依赖
	"devDependencies": {
		"typescript": "^2.6.1",
		"vscode": "^1.1.6",
		"eslint": "^4.11.0",
		"@types/node": "^7.0.43",
		"@types/mocha": "^2.2.42"
	},
	// 后面这几个应该不用介绍了
	"license": "SEE LICENSE IN LICENSE.txt",
	"bugs": {
		"url": "https://github.com/sxei/vscode-plugin-demo/issues"
	},
	"repository": {
		"type": "git",
		"url": "https://github.com/sxei/vscode-plugin-demo"
	},
	// 主页
	"homepage": "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md"
}

```



---

### 命令

前面项目构建完成后运行看效果实际上完成了三件事：

- 注册**onCommand**的激活事件：`onCommand:extension.helloWorld`，所以插件会在运行Hello World命令的时候被激活。
- 在`contributes.commands`配置 Hello World命令，并绑定到`extension.helloWorld`上
- 使用VSCode API `commands.registerCommand`绑定方法到已经注册的命令ID`extension.helloWorld`上

#### 创建命令

在extension.ts中，添加以下代码：

```js
context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => {
	vscode.window.showInformationMessage('您执行了extension.sayHello命令！');
}));
```

然后在package.json清单位置，添加声明

```json
"commands": [
	{
		"command": "extension.sayHello",
		"title": "Hello World"
	},
]
```

说明：`vscode.commands.registerCommand`是注册命令的API，返回Disposable，最后将结果放到`context.subscriptions`中

**回调函数参数**

注册命令回调函数可接受uri参数

> - 注册资源管理器右键命令时，会把选中的资源路径uri传到回调函数中；
> - 在编辑器打开文件中右键，则会将当前文件路径回调回去；
> - 使用ctrl+shift+p执行命令时，则uir为空；

在extension.ts中添加：

```javascript
context.subscriptions.push(vscode.commands.registerCommand('extension.showMyPath', (uri)=>{
		vscode.window.showInformationMessage(`当前文件路径：${uri ? uri.path : 'kk'}`);
	}));
```

package.json添加：

```json
"menus": {
    "editor/context": [
        {
            "when": "editorFocus",
            "command": "extension.showMyPath",
            "group": "navigation"
        }
    ],
    "explorer/context": [
        {
            "command": "extension.showMyPath",
            "group": "navigation"
        }
    ]
}
	
```

### 创建菜单

一个菜单项创建如下：

```json
"contributes": {
	"menus": {
		"editor/title": [{
			"when": "resourceLangId == markdown",
			"command": "markdown.showPreview",
			"alt": "markdown.showPreviewToSide",
			"group": "navigation"
		}]
	}
}
```

- `editor/title`是key值，定义这个菜单出现在哪里；

- `when`控制菜单合适出现；

- `command`定义菜单被点击后要执行什么操作；

- `alt`定义备用命令，按住`alt`键打开菜单时将执行对应命令；

- `group`定义菜单分组；

  

#### **插件位置选择**

- 资源管理器上下文菜单 - `explorer/context`
- 编辑器上下文菜单 - `editor/context`
- 编辑标题菜单栏 - `editor/title`
- 编辑器标题上下文菜单 - `editor/title/context`
- 调试callstack视图上下文菜单 - `debug/callstack/context`
- SCM标题菜单 -`scm/title`
- SCM资源组菜单 -`scm/resourceGroup/context`
- SCM资源菜单 -`scm/resource/context`
- SCM更改标题菜单 -`scm/change/title`
- 左侧视图标题菜单 -`view/title`
- 视图项菜单 -`view/item/context`
- 控制命令是否显示在命令选项板中 - `commandPalette`



图标在`commands`里面配置，light和dark分别对应浅色和深色主题，如果不配置图标则直接显示文字：

```json
"commands": [
	{
		"command": "extension.demo.testMenuShow",
		"title": "这个菜单仅在JS文件中出现",
		"icon": {
			"light": "./images/tool-light.svg",
			"dark": "./images/tool-light.svg"
		}
	}
]

```

#### 时机when

通过可选的when语句，`VS Code`可以很好地控制什么时候显示菜单项，当然，when语句语法不仅仅适用于菜单项的控制。

when语句语法有很多，这里列举几个常用的：

- `resourceLangId == javascript`：当编辑的文件是js文件时；
- `resourceFilename == test.js`：当当前打开文件名是`test.js`时；
- `isLinux`、`isMac`、`isWindows`：判断当前操作系统；
- `editorFocus`：编辑器具有焦点时；
- `editorHasSelection`：编辑器中有文本被选中时；
- `view == someViewId`：当当前视图ID等于`someViewId`时；
- 等等等

多个条件可以通过与或非进行组合，例如：`editorFocus && isWindows && resourceLangId == javascript`。

有关when语句的更多完整语法请参考官方文档：https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts

#### alt

`alt`很好理解，表示没有按下alt键时，点击右键菜单执行的是`command`对应的命令，而按下了alt键后执行的是alt对应的命令。这里不做过多解释。

#### group

##### 组间排序

控制菜单的分组和排序。不同的菜单拥有不同的默认分组

`editor/context`中有这些默认组：

- `navigation`- 放在这个组的永远排在最前面；
- `1_modification` - 更改组；
- `9_cutcopypaste` - 编辑组
- `z_commands` - 最后一个默认组，其中包含用于打开命令选项板的条目。

![](https://qiniu.lgx123.cn/20200815131125.png)

除了`navigation`是强制放在最前面之外，其它分组都是按照0-9、a-z的顺序排列的，所以如果你想在`1_modification`和`9_cutcopypaste`插入一个新的组别的话，你可以定义一个诸如`6_test`：

`explorer/context`有这些默认组：

- navigation - 放在这个组的永远排在最前面；
- 2_workspace - 与工作空间操作相关的命令。
- 3_compare - 与差异编辑器中的文件比较相关的命令。
- 4_search - 与在搜索视图中搜索相关的命令。
- 5_cutcopypaste - 与剪切，复制和粘贴文件相关的命令。
- 7_modification - 与修改文件相关的命令。

在`编辑器选项卡上下文菜单`有这些默认组：

- 1_close - 与关闭编辑器相关的命令。
- 3_preview - 与固定编辑器相关的命令。

在`editor/title`有这些默认组：

- 1_diff - 与使用差异编辑器相关的命令。
- 3_open - 与打开编辑器相关的命令。
- 5_close - 与关闭编辑器相关的命令。

##### 组内排序

默认同一个组的顺序取决于菜单名称，如果想自定义排序的话可以再组后面通过`@<number>`的方式来自定义顺序，例如：

```json
"editor/context": [
	{
		"when": "editorFocus",
		"command": "extension.sayHello",
		// 强制放在navigation组的第2个
		"group": "navigation@2"
	},
	{
		"when": "editorFocus",
		"command": "extension.demo.getCurrentFilePath",
		// 强制放在navigation组的第1个
		"group": "navigation@1"
	}
]

```

### 快捷键

```json
"contributes": {
	"keybindings": [{
		// 指定快捷键执行的操作
		"command": "extension.sayHello",
		// windows下快捷键
		"key": "ctrl+f10",
		// mac下快捷键
		"mac": "cmd+f10",
		// 快捷键何时生效
		"when": "editorTextFocus"
	}]
}
```

如果您想了解更多有关快捷键绑定的详细细节可以继续阅读官方文档：https://code.visualstudio.com/docs/getstarted/keybindings



---

### 打包发布

#### 本地打包

打包需要借助vsce工具，先安装：

```shell
npm i vsce -g
```

cd到项目根目录，运行打包命令：

```shell
vsce package
```

生成的vsix，可在vscode插件窗口，右上角选择`Install from VSIX`安装

#### 发布到应用市场

1. 注册Miscrosoft账户，已经有账户的直接进入下一步

   注册地址：[https://login.live.com/](https://login.live.com/)

2. 访问[https://aka.ms/SignupAzureDevOps](https://aka.ms/SignupAzureDevOps)，没使用过会出现如下提示框，直接点继续

   ![](https://qiniu.lgx123.cn/20200815211354.png)

3. 创建令牌

   进入组织主页后，点击右上角，选择`Personal access tokens`

   ![](https://qiniu.lgx123.cn/20200815211900.png)

   选择New Token，会出现下面界面，`Organization`要选择`all accessible organizations`，`Scopes`要选择`Full access`，否则后面发布会失败。

   ![](https://qiniu.lgx123.cn/20200815212302.png)

   随后就会生成一个令牌，此时必须拷贝保存起来，要是忘了就找不回来了。

4. 创建发布账户

   获得令牌后，接下来创建发布者

   ```shell
   vsce create-publisher your-publisher-name
   ```

   此处`your-publisher-name`需要以字母数字下划线组成，然后依次输入昵称，邮箱，和刚才生成的令牌。

   ```shell
   E:\Projects\vscode_extension\plugin-bear (master) (bear@0.0.1)
   λ vsce create-publisher lgx123
   Publisher human-friendly name: (lgx123) 呵呵到天亮
   E-mail: 1134569285@qq.com
   Personal Access Token: ****************************************************
    DONE  Created publisher 'lgx123'.
   ```

   创建成功后，默认会登陆这个账户，假如已经创建过账户了，可以直接登陆：

   ```shell
   vsce login your-publisher-name
   ```

   也可以用网页版来创建发布账户：https://marketplace.visualstudio.com/manage

5. 发布

   上面登陆好发布者账户后，直接可以运行发布命令：

   ```shell
   vsce publish
   ```

   成功结果：

   ```shell
   vsce publish
   Executing prepublish script 'npm run vscode:prepublish'...
   
   > bear@0.0.1 vscode:prepublish E:\Projects\vscode_extension\plugin-bear
   > npm run compile
   
   
   > bear@0.0.1 compile E:\Projects\vscode_extension\plugin-bear
   > tsc -p ./
   
   Personal Access Token for publisher 'lgx': ****************************************************
   
   Publishing lgx.bear@0.0.1...
    DONE  Published lgx.bear@0.0.1
   Your extension will live at https://marketplace.visualstudio.com/items?itemName=lgx.bear (might take a few minutes for it to show up).
   ```

   发布成功稍等几分钟即可在应用市场搜到，也可在vscode网页应用市场搜到

   https://marketplace.visualstudio.com/items?itemName=lgx.bear

   ![](https://qiniu.lgx123.cn/20200815214537.png)

6. 发布注意事项

- `README.md`文件默认会显示在插件主页；
- `README.md`中的资源必须全部是`HTTPS`的，如果是`HTTP`会发布失败；
- `CHANGELOG.md`会显示在变更选项卡；
- 如果代码是放在git仓库并且设置了repository字段，发布前必须先提交git，否则会提示`Git working directory not clean`；

7. 增量发布

   版本号：`major.minor.patch`

   如果想让发布之后版本号的patch自增，例如：`1.0.2` -> `1.0.3`，可以这样：

   ```shell
   vsce publish patch
   ```

   结果：

   ```shell
   vsce publish patch
   v0.0.2
   Executing prepublish script 'npm run vscode:prepublish'...
   
   > bear@0.0.2 vscode:prepublish E:\Projects\vscode_extension\plugin-bear
   > npm run compile
   
   
   > bear@0.0.2 compile E:\Projects\vscode_extension\plugin-bear
   > tsc -p ./
   
   Publishing lgx.bear@0.0.2...
    DONE  Published lgx.bear@0.0.2
   Your extension will live at https://marketplace.visualstudio.com/items?itemName=lgx.bear (might take a few minutes for it to show up).
   ```

   执行这个命令后会自动修改`package.json`里面的版本号。同理，`vsce publish minor`也是可以的。

8. 取消发布

   ```shell
   vsce unpublish (publisher name).(extension name)
   ```

9. 更新

   如果修改了插件代码想要重新发布，只需要修改版本号然后重新执行`vsce publish`即可

10. vsce 其他命令

    ```shell
      # vsce --help
    
      Usage: vsce [options] [command]
    
    
      Options:
    
        -V, --version  output the version number
        -h, --help     output usage information
    
     Commands:
    
        ls [options]                         列出实际会发布的文件列表
        package [options]                    打包成一个插件
        publish [options] [<version>]        发布插件
        unpublish [options] [<extensionid>]  插件下架
        list <publisher>                     列出某个发布者下所有发布的,需要配置好token 额,不然会提示输入
        ls-publishers                        列出所有已知的发布者
        create-publisher <publisher>         创建一个新的发布者
        delete-publisher <publisher>         删除一个发布者
        login <publisher>                    登录一个发布者到发布者列表中
        logout <publisher>                   反之,退出发布者
    
    ```
    
    
    
11. 

    

  

> 本文大部分内容出自[http://blog.haoji.me/?tag=vscode](http://blog.haoji.me/?tag=vscode)

vscode插件开发

### 1. 初始化仓库

1. 创远程仓库

2. 在项目中git init

3. 关联远程仓库 git remote add origin 地址

4. git add .

5. git commit -m “内容”

6. 更新项目，避免与远程仓库冲突

   ```
   git pull --rebase origin master
   ```

7. ```
   git push origin master
   ```

   

### 2. 反斜杠错误'\\'

git 2.24版本存在这样的问题，更新git项目中的子模块会报错，导致不成功，错误如下

```
error: filename in tree entry contains backslash: '\'
```

![](https://qiniu.lgx123.cn/20200210214233-1.png)

**解决办法：**

- 升级git版本到2.25或者降到2.23都可解决此问题
- 禁用[core.protectNTFS](https://translate.googleusercontent.com/translate_c?depth=1&hl=zh-CN&prev=search&rurl=translate.google.com&sl=en&sp=nmt4&u=https://git-scm.com/docs/git-config&xid=17259,15700022,15700186,15700190,15700259,15700271,15700302&usg=ALkJrhgI-ExxieOLS4BgBJejN9E-jIKJ3w#Documentation/git-config.txt-coreprotectNTFS) ： `git config --global core.protectNTFS false`



### 3. 设置提交模板

```
git config commit.template [模板文件名]
```



### 4. 删除分支

先切到master

```
git checkout master
```

查看本地已有的和远端的所有分支

```
git branch -a
```

#### 4.1 删除远程分支

```
git push origin --delete 分支名
```

#### 4.2 删除本地分支

```
git branch -d 分支名
//有可能会提示使用-D的命令
git branch -D 分支名
```



### 5. 远端分支已经删除，本地依旧能看到

1.使用git branch -a查看本地和远程分支，会发现有些已经在远程仓库删除的分支，本地依旧能看到

2.查看本地分支与远程分支的关系

```
git remote show origin
```

3.删除远程仓库已经不存在的分支

```
git remote prune origin
```



### 6. TortoiseGit设置ssh方式

1.进入tortoise的设置界面-->点击 `Re-run First Start Wizard`

![](https://qiniu.lgx123.cn/20200217000941-1.png)

一直next(下一步)，直到 Authentication an credential store界面，设置ssh为OpenSSH方式，完成

![](https://qiniu.lgx123.cn/20200217001227-1.png)

### 7. 已提交的项目添加.gitignore文件

1.清除本地项目缓存

```
git rm -r --cached .
```

2.新建.gitignore文件

```
touch .gitignore
```

3.再次提交所有文件

```
git add .
git commit -m "add ignore"
```

4.提交到远端

```
git push
```



### 8. 修改本地以及远程分支名称

1. 重命名本地分支

   ```
   git branch -m oldBranch newBranch
   ```

2. 删除远端分支

   ```
   git push --delete origin oldBranch
   ```

3. 将本地已重命名的分支推到远端

   ```
   git push origin newBranch
   ```

4. 切换到新分支

   ```
   git checkout newBranch
   ```

5. 关联本地和远端的分支

   ```
   git branch --set-upstrean-to=origin/newBranch
   ```

   

### 9. tag操作

- 列出tag

```git
git tag -l
git tag -l "v1.1.1*"	//筛选出v1.1.1开头的tag
git ls-remote -t		//查看远端tags
```

- 创建tag

```git
git tag -a [tagName] -m '[注释]'

//给某次提交加tag
git tag -a [tagName] [commitid]
```

- 推送tag到远端

```git
git push origin [tagName]

//推送所有本地tag到远端
git push origin --tags
```

- 删除tag

  + 删除本地tag

    ```git
    git tag -d [tagName]
    ```

  + 删除本地所有tag

    ```git
    git tag -l|xargs git tag -d
    
    //拉取远端所有tag
    git fetch origin --prune
    ```

  + 删除远端tag

    ```git
    //方式一
    git push origin :refs/tags/[tagName]
    //方式二
    git push origin --delete [tagName]
    ```



### 10. SSL certificate problem

在clone 仓库的时候报：SSL certificate problem: unable to get local issuer certificate

大概就是 SSL证书过期导致的

解决办法：

直接关闭SSL证书校验

```git
git config --global http.sslVerify false
```



git 备忘

玩hexo过程中遇到的坑



本文主要参考自 https://chaooo.github.io/article/20161229.html，主要用来记录hexo搭建的整个过程，方便后面查看。

### 1.hexo安装

在安装[hexo](https://hexo.io/zh-cn/)之前，必须确认你已经安装了[Node.js](http://nodejs.org/)和[Git](http://git-scm.com/)。

#### 1.1.hexo 初始化

安装 hexo

```
npm install -g hexo-cli
```

在你想要存放该博客项目的目录下，执行以下命令，这两步都比较耗时，因为要下载许多文件

```
hexo init
npm install
```

先预览一下效果

```
hexo generate
hexo server
```

上面命令可简化成如下：

```
hexo g
hexo s
```

运行成功后，即可在浏览器输入localhost:4000即可看到效果。

#### 1.2.部署到远端

我们这里以gitee码云作为远端进行部署，在根目录下找到_config.yml，添加以下代码

```
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repository:
    #github: git@github.com:lingengxiong/lingengxiong.github.io.git
    gitee: git@gitee.com:lingengxiong/lingengxiong.git
  branch: master
```

假如需要部署到多个远端，只需要在repository中配置多个地址即可。

配置完成后，安装deployer插件，该插件用来将生产的静态文件部署到远端仓库

```
npm install hexo-deployer-git --save
```

安装完成即可生产静态文件，继而推送到远端

```
hexo generate
hexo deploy
```

**温馨提示：**第一次使用git时会弹出输入框，此时输入git仓库的用户名和密码即可。



---

### 2.hexo 主题安装

尝试了很多种主题，最后决定用[BlueLake](https://github.com/chaooo/hexo-theme-BlueLake)，一方面是因为布局功能都很符合自己的需求，另一方面则是挺好看的

![](https://qiniu.lgx123.cn/20200106142713-1.jpg)

#### 2.1.安装

安装主题和渲染:

```
$ git clone https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake
```

Blue是基于jade和stylus写的，所有需要安装hexo-renderer-jade和hexo-renderer-stylus

```
$ npm install hexo-renderer-jade@0.3.0 --save
$ npm install hexo-renderer-stylus --save
```

切到themes/BlueLake，下载主题所需要的库

```
$ cd themes/BlueLake
$ npm install
```

#### 2.2.启用主题

要使用刚下载好的主题，只需要修改根目录下_config.yml配置文件，找到theme字段，修改为BlueLake

```
theme: BuleLake
```

依次执行以下命令，然后打开localhost:4000就可以看效果了

```
hexo clean
hexo g
hexo s
```

![](https://qiniu.lgx123.cn/20200106153336-1.jpg)

#### 2.3 配置

目前的整个工程都还是比较原始的状态，我们的工作就是添加我们自己的东西进去了。

##### 2.3.1 配置网站头部显示文字

打开_config.yml，找到：

```
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
```

`title`和`subtitle`分别是网站主标题和副标题，会显示在网站头部；

`description`在网站界面不会显示，内容会加入网站源码的`meta`标签中，主要用于SEO；

`author`就填写网站所有者的名字，会在网站底部的`Copyright`处有所显示。



##### 2.3.2 设置语言

该主题目前有七种语言：简体中文（zh-CN），繁体中文（zh-TW），英语（en），法语（fr-FR），德语（de-DE），韩语 （ko）,西班牙语（es-ES）；例如选用简体中文，在`根_config.yml`配置如下：

```
language: zh-CN
```



##### 2.3.3 添加about页

about页是一个介绍自己的页面，可以在上面写一些自己的联系方式或者其他平台博客链接之类

在根目录下运行命令：

```
hexo new page 'about'
```

打开主题_config.yml，补充详细信息：

```

# About page
about:
  photo_url: ## Your photo e.g. http://cdn.chaooo.top/blog/themeauthor.jpg
  items:
  - label: email
    url: ## Your email with mailto: e.g.  mailto:zhenggchaoo@gmail.com
    title: ## Your email e.g.  zhenggchaoo@gmail.com
  - label: github
    url: ## Your github'url e.g.  https://github.com/chaooo
    title: ## Your github'name e.g.  chaooo
  - label: weibo
    url: ## Your weibo's url e.g.  http://weibo.com/zhengchaooo
    title: ## Your weibo's name e.g.  秋过冬漫长
```

##### 2.3.4 安装 RSS(订阅) 和 sitemap(网站地图) 插件

在根目录打开命令行，运行以下命令：

```
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
```

添加`主题_config.yml`配置：

```
Plugins:
  hexo-generator-feed
  hexo-generator-sitemap
  hexo-generator-baidu-sitemap

feed:
  type: atom
  path: atom.xml
  limit: 20

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
```

##### 2.3.5 更换主题背景

该主题目前有两种背景，深色和浅色，需要设置为深色只需要修改主题_config.yml

```
# Theme tone
dark: false #true/false
```

##### 2.3.6 添加文章版权信息

修改主题_config.yml

```
# Theme tone
#Copyright
copyright: 
  enable: true #true/false  
  describe: 转载请注明出处(必须保留原文作者署名原文链接) #自定义描述替换默认描述
```



#### 2.4 添加本地搜索

默认本地搜索是用原生JS写的，但还需要HEXO插件创建的JSON数据文件配合。安装插件[hexo-generator-json-content](https://github.com/alexbruno/hexo-generator-json-content)来创建JSON数据文件：

```
$ npm install hexo-generator-json-content@2.2.0 --save
```

然后在`根_config.yml`添加配置：

```
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true
```

最后在`主题_config.yml`添加配置：

```
local_search: true
```

#### 2.5 首页添加文章置顶

在根目录下打开命令行窗口安装：

```
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
```

假如文章需要添加置顶，只需要在Front-matter中加上top: true即可

```
---
title: BlueLake博客主题的详细配置
tags: [hexo,BlueLake]
categories: Hexo博客折腾
top: true
---
```



2.6 修改站点图标

站点图标存放在主题的`Source`目录下，已经默认为您准备了两张图片。您也可以自己设计站点LOGO。
您需要准备一张ico格式并命名为** favicon.ico **，请将其放入hexo目录的`source`文件夹，建议大小：32px X 32px。
您需要为苹果设备添加网站徽标，请命名为** apple-touch-icon.png **的图像放入hexo目录的“source”文件夹中，建议大小为：114px X 114px。
(有很多网站都可以在线生成ico格式的图片。)

---

### 3. 笔记仓库与博客项目分离

我们可以看到目前文章放在source/_posts目录下，我们不可能每次写笔记都跑到这里写，这里我采用git子模块的形式，我们平常笔记在自己的笔记仓库里写，写完推到远端仓库，更新博客只需要先拉一下笔记仓库里的文件，再更新到线上博客。这样做博客项目只负责发布，不负责编辑笔记。我的博客笔记放在https://gitee.com/lingengxiong/blog-note.git

#### 3.1添加子模块的方法

```
git submodule add 仓库名 路径
```

其中，仓库地址是指子模块仓库地址，路径指将子模块放置在当前工程下的路径。 
注意：路径不能以 / 结尾（会造成修改不生效）、不能是现有工程已有的目录（不能順利 Clone）

#### 3.2删除子模块方法

submodule的删除稍微麻烦点：首先，要在“.gitmodules”文件中删除相应配置信息。然后，执行“git rm –cached ”命令将子模块所在的文件从git中删除。



故先把source/_post文件夹删除，然后执行

```
git submodule add https://gitee.com/lingengxiong/blog-note.git source/_posts/
```

这样我们已经成功把笔记仓库引入博客项目内，以后只需要定时拉取最新内容进行发布即可

#### 3.3  README.md等文件不生成博客内容

我们引入的博客仓库中包含有该仓库的README.md文件，这些文件不需要生成文章，可以修改根目录_config.yml文件进行屏蔽：

```
skip_render: ['_posts/**/README.md','_posts/**/README.en.md']
```



### 4.hexo备份与恢复

#### 4.1.备份

在公司好不容易把工程搭建起来，却到了下班的时候，回家想继续搞岂不是蛋疼得再配置一遍？这可不行，而且要是电脑坏了怎么办，前面的时间岂不是白费，所以肯定得做好备份~

最开始想到的是用传统的git 进行备份，但在网上搜了一下，发现前辈们早已想出更懒的办法，并做成插件---hexo-git-backup，依旧是备份到github，但用起来更加便捷。

首先安装该插件

```
npm install hexo-git-backup --save
```

然后到你的博客根目录的_config.yml配置文件中添加如下配置：

```
#备份博客
backup:
  type: git
  theme: hexo-theme-yilia-master
  message: Back up my blog
  repository:
    github: git@github.com:lingengxiong/lingengxiong.github.io.git，backup
    gitee: git@gitee.com:lingengxiong/lingengxiong.git,backup
```

参数解释：

- theme：你要备份的主题名称
- message：自定义提交信息
- repository：仓库名，注意仓库地址后面要添加一个分支名，比如我就创建了一个 backup 分支

我这里备份了两份，一份到github，另一份备份到码云，不需要的只配置一个即可，实际上我们是在放博客静态文件的仓库上拉了一个backup分支，如果你不放心，也可新建一个仓库用来存放整个博客工程

实际上，并不是整个工程都需要备份的，只需要备份关键几个文件夹即可，其余到时再次生成即可

1.生成.gitignore文件

```
touch .gitignore
```

2.输入要忽略的文件及文件夹

```
.DS_Store
Thumbs.db
db.json
.log
node_modules/
public/
.deploy/
```

3.最后用以下命令备份博客：

```
hexo backup
```

或者简写：

```
hexo b
```



#### 4.2.恢复

已经备份好的hexo，到新发电脑只需要使用以下步骤即可恢复，无需从头开始配置，这里以我的仓库地址为例，实际情况改成自己的地址即可

1.先安装hexo

`npm install -g hexo-cli`

2.把存在远端的备份git clone下来

`git clone https://gitee.com/lingengxiong/lingengxiong.git `

这里备份在backup分支，可以直接下载对应分支

`git clone -b backup https://gitee.com/lingengxiong/lingengxiong.git `

3.下载所需要的库文件

`npm install`

4.下载推送工具deployer

`npm install hexo-deployer-git`

5.接下来就可以用熟悉的命令生成博客站点了

```
hexo clean
hexo g
hexo s
```

正常情况下以上步骤完成后即可在浏览器用localhost:4000打开你的博客

继而发布到远端

`hexo d`

### 5.添加评论系统gitalk

#### 5.1申请

第三方评论系统很多，如

[多说评论](http://duoshuo.com/)、[Disqus评论](https://disqus.com/)、[来必力评论](https://livere.com/)、[友言评论](http://www.uyan.cc/)、[网易云跟帖评论](https://gentie.163.com/info.html)、[畅言评论](http://changyan.kuaizhan.com/)、基于Github Issue的[GITALK](https://gitalk.github.io/)

但国内的有写时不时就没法用了，所以这里还是使用gitalk

1.[申请GitHub Application](https://github.com/settings/applications/new)

![](https://qiniu.lgx123.cn/20200115194943-1.png)

- Application name： 应用名称，随便起
- Homepage URL： 网站URL，对应自己博客地址
- Application description ：描述，随意
- Authorization callback URL：# 网站URL，博客地址就好
- 点击注册，页面会出现其中**Client ID**和**Client Secret**在后面的配置中需要用到

#### 5.2 配置

在主题_config.yml配置：

```
comment:
  gitalk:
    enable: true 
    ## If you want to use Gitment comment system please set the value to true.
    owner: lingengxiong 
    ## Your GitHub ID, e.g. username
    repo: blogtalk
    ## The repository to store your comments, make sure you're the repo's owner, e.g. gitalk.github.io
    client_id: 
    ## GitHub client ID, e.g. 75752dafe7907a897619
    client_secret: 
    ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50
    admin: lingengxiong
    ## Github repo owner and collaborators, only these guys can initialize github issues.
    language: zh-CN 
    ## Language
    pagerDirection: last 
    # Comment sorting direction, available values are last and first.
```

**注意:** 

1.repo ,存放评论的仓库，这里我们新建一个名为blogtalk的仓库，这里只需要填入blogtalk即可，而不是完整地址

#### 5.3 踩坑

##### 5.3.1 Error:Not Found

![](https://qiniu.lgx123.cn/20200115200837-1.png)

发现是gittalk中的信息填写错了，name随便写；Homepage URL是你的仓库的名字，Authorization callback URL如果你指向了新

的域名就填新的，比如说我指向了域名http://blog.lgx123.cn/；否则也写仓库的名字就可以。



##### 5.3.2未找到相关Issues进行评论

![](https://qiniu.lgx123.cn/20200115195902-1.png)

1.理想状态登录一下github账号即可，假如点击后返回首页，那应该是配置有问题，检测gitalk各项参数

2.配置完成未发布到线上，使用localhost:4000访问，也会出现这种情况，点击登录会跳到线上工程地址，此时只需要试试发布到线上

hexo笔记

Android笔记

## 目录管理

linux目录结构为树状结构，顶级目录为根目录/。

### 绝对路径与相对路径

- 绝对路径

  由根路径 / 写起，如：/usr/local/share

- 相对路径

  不是由 / 写起，例如从/usr/local/share到/usr/local/src中去，可以这样写：cd  ../src，这样的写法就是相对路径的写法。

### 常用目录命令

- ls：列出目录
- cd：切换目录
- mkdir：创建新目录
- rmdir：删除空目录
- cp：复制文件或目录
- rm：移除文件或目录
- mv：移动文件与目录，或者重命名文件或目录

