效率

VSCode 中 snippets 的使用

新建snippet

Code -> 首选项 -> 用户片段

之后Code为我们生成了一个filename.code-snippets的json文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

snippets 语法：

1
2
3
4
5
6
prefix      :代码片段名字，即输入此名字就可以调用代码片段。
body        :这个是代码段的主体.需要编写的代码放在这里,　　　　　
$1          :生成代码后光标的初始位置.
$2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。

注：

  • 如果没有description，默认提示信息是类似上图中Print to console一样的信息（即key值）
  • 代码多行语句的以 , 隔开
  • 每行代码需要用引号包裹住
  • 字符串间如果值里包含特殊字符需要 \ 进行转义.

下面这些变量可以在snipates中使用:

1
2
3
4
5
6
7
8
9
10
11
TM_SELECTED_TEXT The currently selected text or the emptstring
TM_CURRENT_LINE The contents of the current line
TM_CURRENT_WORD The contents of the word under cursor othe empty string
TM_LINE_INDEX The zero-index based line number
TM_LINE_NUMBER The one-index based line number
TM_FILENAME The filename of the current document
TM_FILENAME_BASE The filename of the current documenwithout its extensions
TM_DIRECTORY The directory of the current document
TM_FILEPATH The full file path of the current document
CLIPBOARD The contents of your clipboard
WORKSPACE_NAME The name of the opened workspace or folder

当前日期和时间:

1
2
3
4
5
6
7
8
9
10
11
CURRENT_YEAR The current year
CURRENT_YEAR_SHORT The current year’s last two digits
CURRENT_MONTH The month as two digits (example ‘02’)
CURRENT_MONTH_NAME The full name of the month (example ‘July’)
CURRENT_MONTH_NAME_SHORT The short name of the month (example ‘Jul’)
CURRENT_DATE The day of the month
CURRENT_DAY_NAME The name of day (example ‘Monday’)
CURRENT_DAY_NAME_SHORT The short name of the day (example ‘Mon’)
CURRENT_HOUR The current hour in 24-hour clock format
CURRENT_MINUTE The current minute
CURRENT_SECOND The current second

针对当前语言，插入单行或多行注释:

1
2
3
BLOCK_COMMENT_START Example output: in PHP /* or in HTML <!–
BLOCK_COMMENT_END Example output: in PHP */ or in HTML -->
LINE_COMMENT Example output: in PHP // or in HTML <!-- -->

栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"c_header": {
        "prefix": "c_header",
        "body": [
            "/**",
            " * Copyright © 2020 Moonwhite. All rights reserved.",
            " * ",
            " * @author: Moonwhite",
            " * @date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE ",
            " */",
            "#include <stdio.h>",
            "#include <stdlib.h>",
            "#include <string.h>",
            "",
            "int main() {",
            "    /****** your code ******/",
            "    $0",
            "    return 0;",
            "}"
        ]
        // "description": "Log output to console"
    }

生成的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Copyright © 2020 Moonwhite. All rights reserved.
 *
 * @author: Moonwhite
 * @date: 2020-11-12
 */
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

int main() {
    /****** your code ******/

    return 0;
}
前端

使用Gitpage和Jekyll搭建个人博客

工作生活中经常会遇到一些需要记录下来的东西，设想是本地编写markdown文档，文档中的各种图片资源会随时使用截图工具或者图片文件，使用Alfred或者AutoHotKey自动将图片或者剪贴板中的截图内容上传至七牛云图床，并返回markdown格式的图片链接，本地编写好之后git push到GitHub上面，使用GitPages自动生成博客。
将搭建的过程记录下来以备和我有相同需求或者遇到相同问题的同学参考，本页会不断更新。
本人使用Mac，搭建过程也以Mac过程为主，主要使用到的工具如下：

  • Github账户 + GitPage配置
  • Jekyll / Hexo （生成静态HTML页面）
  • 七牛云账户 + qshell（用于存储Blog重的图片）
  • Alfred + Powerpack + qimage-mac（用于本地截图或文档自动上传七牛云对象存储，Windows可使用AutoHotKey）
  • vscode + Markdown All in One + Markdown Preview Github Styling (用于本地编辑markdown及实时预览)
  • Snipaste 或其他截图工具
  • 一个免费或收费的域名

1. GitHub及相关配置

1-1 创建repository

登陆Github，并新建一个repository，这里需要注意一下的是需要按照username.github.io格式来创建repository，这样后面才能够使用https://username.github.io这样的URL来访问GitPage。

img

1-2 修改repository的Setting

找到Repository的Setting tab页面，如下图：
img

向下一直拖动到GitHub Pages页面，启用GitPages，这里可以设置GitPages使用哪个分支，修改显示的主题风格，以及修改为自定义的域名。

img

至此，基于GitPages的一个免费个人博客就已经搭建成功了，我们在代码中可以直接编辑html，然后访问username.github.io即可看到个人博客网站的显示结果。
比如将以下代码保存成index.html放到repository的根目录：

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
	<head>
	<title>m00nwhite</title>
	</head>
	<body>
		welcome to m00nwhite.github.io!
	</body>
</html>

然后访问username.github.io 即可看到显示结果

img

2.Jekyll及相关配置

Jekyll是一个的免费Blog生成框架，可以运行在GitHub Pages上，详细的使用教程请参考 官方文档。 也可以使用Hexo，看个人喜好，Jekyll和GitPage的契合度更高一些，但是生成静态页面的速度方面不如Hexo迅速，使用方面较Hexo也略微复杂一些，这里使用Jekyll，单纯的是因为想学习一下。

官方网址：Jekyll

2-1 jekyll的安装

先来看一下官方安装教程，简单得只有一张图：

需要安装bundler，gem

1
2
3
4
5
6
7
8
9
# 安装bundler和gem
gem install bundler jekyll

# 使用jekyll新建一个博客项目，m00nwhite请替换成你喜欢的名字
jekyll new m00nwhite

# 进入到jekyll为你创建的文件夹，并启动jekyll的本地服务
cd m00nwhite
bundle exec jekyll serve

执行了上面的命令之后，jekyll就为你在本地4000端口创建了一个博客服务。
img

使用浏览器访问一下，可以看到Jekyll为我们生成的页面：
img

3 图片配置

其实上面两步完成之后，对于简单的博客来说应该就基本够用了，但是对于追求效率的重度使用者来说还需要优化一下，比如贴图的过程。一张一张手工编辑链接地址并且上传的话未免效率低下，体验不是很友好。于是考虑使用七牛云图床，一来可以提高效率，二来可以使用CDN加速提高访问速度。

3-1 七牛云配置

需要注册七牛云账户并登陆至管理控制台，添加对象存储。

img

3-2 安装及配置qshell

创建完存储空间之后，我们就可以使用七牛提供的管理控制台来上传和管理我们的图片了。也可以使用客户端，这里选择使用七牛提供的命令行工具（qshell）来方便地上传和使用图片。

官方安装链接在七牛的：开发者中心
下载对应平台的qshell并安装即可。

一些需要鉴权的qshell命令需要先设置好AK（AccessKey）和SK(SecretKey)，这两个Key在七牛管理控制台右侧的密钥管理中可以找到。

img

然后使用下面的命令设置好qshell的AK和SK，这样我们就可以使用Alfred创建Workflow来调用qshell自动上传图片了。

1
qshell account ak sk name

其他qshell的使用请参考官方文档，这里不再赘述。

3-3 配置Alfred的workflow

这里使用qimage-mac
详细的教程请参考使用 Alfred 在 markdown 中愉快的贴图

导入workflow之后需要修改一下热键

修改一下参数配置，设置七牛的AK，SK和bucket等参数。
img

这里在执行的时候报错了，调试发现设置qshell账户的shell命令行参数数量不对，因为之前已经设置过了，这里就直接注释掉了，速度还能快一些。

最后，将GitHub上的仓库克隆到本地，修改之后再push就可以直接更新博客内容了。

1
2
3
4
git clone git@github.com:username/username.github.io.git
# 修改markdown文档
git commit -m "your comment"
git push

本地修改可以使用vscode或者typora，vscode需要安装Markdown All in One 和 Markdown Preview Github Styling两个插件，可以在编辑markdown文件的时候实时生成预览效果。

4. 丰富你的站点

4.1 Jeykll主题

在GitHub的setting中可以更换选择主题

img

4.2 Jeykll插件

  • 使用kramdown自动生成目录树
    在_config.yml 配置文件中添加如下内容：
    1
    2
    # 启用kramdown自动生成目录树
    markdown: kramdown
    然后在markdown文章中需要插入目录树的地方添加：
    1
    2
    * 目录
    {:toc}
    预览效果：

5. 一些问题

搭建过程中并不是一帆风顺的，难免遇到一些问题

GitPage上面七牛的图片显示不出。

原因：GitPage不绑定域名时默认使用https方式提供服务，而七牛云提供的图片外链是http的。
解决方法：GitPage使用自定义域名，并将服务方式修改为http，GitPage和七牛云都修改为Https应该也可以，留待以后验证。
首先申请一个域名，这里选择腾讯云的域名。然后在腾讯云的管理控制台中将域名的CNAME指向修改为GitPage的username.github.io

CNAME修改后一般需要十分钟左右才能生效

在GitPages的setting中也将域名修改为自定义域名

另外，由于七牛的测试域名只能使用30天，所以这里把七牛云空间也一并修改为自定义域名，修改方式也是在腾讯云的管理控制台里面把域名的CNAME修改为七牛云提供的CNAME即可。

前端

Bootstrap4 笔记

Bootstrap4 笔记

示例代码

1
2
3
4
5
<div class="d-flex p-3 bg-secondary text-dark container-fluid">
    <div class="item p-2 bg-info">Flex item 1</div>
    <div class="item p-2 bg-warning">Flex item 2</div>
    <div class="item p-2 bg-primary">Flex item 3</div>
</div>

  • bg-info、bg-warning、bg-primary：设置各种背景色

  • text-white：白色字体

  • text-black-50: 半黑字体

  • container/container-fluid：容器/全屏容器

  • d-flex：

  • flex-direction：可以取四个值：

    • row: 主轴水平方向，从左至右排列

    • row-reverse：主轴水平方向，从右至左排列

    • column：主轴竖直方向，从上至下排列

    • column-reverse：主轴竖直方向，从下至上排列

  • flex-wrap/flex-nowrap ： 当容器显示不下时换行/不换行

    • flex-wrap:

    • flex-nowrap:

  • flex-basis：定义了item元素的空间大小。

  • flex-grow：若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸，后面的数值为增长比例。

  • flex-shrink：flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。按照后面的数值比例进行收缩。

  • flex简写：你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  display: flex;
}

.one {
  flex: 1 1 auto;
}

.two {
  flex: 1 1 auto;
}

.three {
  flex: 1 1 auto;
}

1
2
3
4
5
<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

  • align-items：属性可以使元素在交叉轴方向对齐，应用于父容器。

    • streth： 拉伸到最大容器对齐

    • flex-start：

    • flex-end

    • center

  • Justify-content：使元素在主轴方向对齐，主轴方向是通过 flex-direction 设置的方向，初始值为flex-start，

    你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

    • stretch ：

    • flex-start：

    • flex-end：

    • center：

    • space-evenly:

    • space-around：

    • space-between：