Clarity

用 Docker 快速架设一个 Anki 同步服务器

Wed, 29 Sep 2021 00:00:00 +0000

Anki 是一个辅助记忆软件，{{ 简介}}。最近打算用它来快速记忆一些知识，但是 Anki 的服务器架设在国外，导致同步速度很慢，为了解决这个问题，我参考文档地址打算自己架设一个 Anki 同步服务器。

要求：

技术要求：了解终端（命令行工具）、理解 IP 和域名的概念、docker 以及 docker-compose 的基本使用
硬件要求：一台电脑或者一个虚拟机或者一个云服务器（总之要能够满足相关软件要求）
软件要求：docker + docker-compose

启动服务

新建一个 docker-anki-server 目录，在此目录下创建一个 docker-compose.yml 文件，文件内容如下。

 1version: "3"
 2
 3services:
 4 anki-container:
 5 image: kuklinistvan/anki-sync-server:latest
 6 container_name: anki-container
 7
 8 restart: always
 9 ports:
10 - "27701:27701"
11 volumes:
12 - data:/app/data
13volumes:
14 data:

然后在当前路径下的终端执行命令

1docker-compose up -d

执行 docker-compose ps 命令可以看到

1 Name Command State Ports
2-----------------------------------------------------------------------------------------
3anki-container /bin/sh -c /app/scripts/st ... Up (healthy) 0.0.0.0:27701->27701/tcp

这就说明服务已经正常启动了，对应的服务地址是 http://<ip>:27701，这个 <ip> 是你物理机（宿主机）的 ip 而非 docker 容器 ip。

域名设置

启动服务之后，就可以通过链接 http://<ip>:27701 访问了。

但是由于安卓版 anki 要求同步地址为 https 协议，因此我又启动了一个代理服务。

我使用的 Caddy 启动服务，这是一款使用 Go 语言开发的 web 服务器，选用 Caddy 的一个重要原因就是它使用 Let’s Encrypt 让你的站点全自动变成 HTTPS，除此之外它的配置简单很容易上手使用。

我的配置就这么简单：

1anki.example.com {
2 tls example@qq.com
3 reverse_proxy 127.0.0.1:27701
4}

第一行声明一个二级域名 anki.example.com
第二行告诉 caddy 为网站开启 https 并自动申请证书，后面的 email 参数是告知 CA 申请人的邮箱，
第三行则是反向代理，此时访问 anki.example.com，实际访问的是 127.0.0.1:27701 的内容

客户端设置

桌面端

如果是桌面端(Windows\MacOS\Linux)，需要安装 SyncRedirector 插件。

SyncRedirector 插件要求 Anki 版本低于 2.1.19，推荐使用 2.1.0 和 2.1.15 版本。你可以在这里下载 Anki 所有版本的安装包

插件安装之后，在其设置中填写对应的地址即可

1{
2 "msyncUrl": "https://anki.zhangwencai.com/msync",
3 "syncUrl": "https://anki.zhangwencai.com/sync"
4}

安卓端

如果是安卓端 AnkiDroid 则可以直接配置，我的 AnkiDroid 版本是 2.13.1。你可以通过「设置 -> 高级设置 -> 自定义同步服务器」找到配置页面。

安卓下载地址： Anki-Android · github

echarts

Fri, 24 Sep 2021 00:00:00 +0000

ECharts 图例（legend）分两行显示并且初始化设置不选中状态

请问visualMap中的手柄可否精确控制位置 #2940

markLine没有tooltip层吗？希望鼠标经过markLine时可以把markLine信息在tooltip中显示。

Using Notices

Fri, 20 Aug 2021 00:00:00 +0000

The "Notices" shortcode enables you to call out pieces of information - sidebars, warnings, tips, etc.

To create a notice on a page, you can use the notice shortcode.
You use the notice shortcode, with the first parameter being one of note, info, tip, and warning. Then add a title for your note in quotes as the second parameter. The inner body of the note can be whatever markdown you want to create.

The following shortcode syntax within a markdown doc:

1{{% notice note "Note" %}}
2This is a standard "note" style.
3{{% /notice %}}

will render as:

Note

This is a standard "note" style.

The other three variants follow.

Info

Here is the "info" style.

Tip

Here is a "tip" variant of a notice.

Warning

Here is the "warning" flavor of a notice.

Also note that the content of a notice can contain anything you could put on a normal page - as shown below:

Complex Notices are Possible!

This is a notice that has a lot of various kinds of content in it.

Here is a bulleted list
With more than one bullet
- And even more than one level

Code blocks are fine here, too....

1public void SayHello()
2{
3 Console.WriteLine("Hello, world!");
4}

Productivity Booster!

If you're using VS Code for your editing, copy the .vscode\clarity.code-snippets file into a .vscode root folder on your repo. This will enable you to type note then <tab> then choose with up/down arrows which flavor notice you want, then <tab> again to provide a title, then <tab> to add your content!

To use the snippet, you need to first enable quickSuggestions for Markdown (one time only):

Go to Preferences->Settings then search for quickSuggestions
Follow the link to Edit in settings.json
Toward the bottom of the file, paste in the following JSON:

1"[markdown]": {
2 "editor.quickSuggestions": true
3 }

Close and save the settings.

将两次 Git 提交合并为一次

Tue, 03 Aug 2021 00:00:00 +0000

1git rebase -i HEAD~2

封装日期相关函数

Thu, 29 Jul 2021 00:00:00 +0000

获取某年某月共有多少天

1function getDaysCountByMonth (year, month) {
2 if (typeof month !== 'number' || month < 1 || month > 12) {
3 throw new Error('请输入月份，1-12 之间的数字')
4 return;
5 }
6 return new Date(year, month, 0).getDate();
7}

Vue.js 项目中二次封装一个按钮组件

Wed, 28 Jul 2021 00:00:00 +0000

Vue2 中容易被忽略的两个重要的 API 介绍

Vue2 中封装

 1<template>
 2 <a-button
 3 icon="sync"
 4 title="刷新"
 5 v-bind="$attrs"
 6 v-on="$listeners"
 7 />
 8</template>
 9
10<script>
11/**
12 * 和 a-button 外观、行为完全一致
13 * 区别是预设 icon 和 title 属性
14 */
15export default {
16 inheritAttrs: false,
17}
18</script>

Vue3 中有了一些变化

移除 $listeners (非兼容)

 1<template>
 2 <a-button
 3 icon="sync"
 4 title="刷新"
 5 v-bind="$attrs"
 6 />
 7</template>
 8
 9<script>
10/**
11 * 和 a-button 外观、行为完全一致
12 * 区别是预设 icon 和 title 属性
13 */
14export default {
15 inheritAttrs: false,
16}
17</script>

升级到 Vue3.x 之后，$attrs 和 $listeners 合并到 $attrs 中，因此直接删除 $listeners 即可，但是要保留 $attrs。

uniapp 中的一个坑

uni-app 仅在 H5 端和 App端V3 中支持 $listeners, 小程序不支持 $listeners ，这就导致了

实例属性 - uni-app

Git 秘钥

Mon, 26 Jul 2021 00:00:00 +0000

https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh

https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/checking-for-existing-ssh-keys

https://git-scm.com/book/zh/v2/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E7%9A%84-Git-%E7%94%9F%E6%88%90-SSH-%E5%85%AC%E9%92%A5

封装简易 DOM 选择器

Wed, 21 Jul 2021 00:00:00 +0000

JavaScript 原生的 DOM 选择器代码写起来太长了，我们像一个简单的办法来简化一下吧。

偶然间发现 Chrome 开发工具的 console 面板内置了两个方法 $ 和 $$，作用和 document.querySelector 以及 document.querySelectorAll 这两个方法类似。

测试后发现这两个变量只在开发工具的 console 面板中才能使用，如果想要在代码中使用，就需要我们自己来封装了。但是要注意确保不会和 jQuery 的符号 $ 冲突。

1const $ = document.querySelector.bind(document)
2const $$ = document.querySelectorAll.bind(document)

测试代码：

1console.log($('body'));
2
3console.log($$('div'));

思考题

思考一下，为什么不能像下面这样用直接赋值的方式来封装？

Tip

提示：思考封装前后 this 的分别指向谁？

1// 方式一
2const $ = document.querySelector
3const $$ = document.querySelectorAll
4
5// 方式二
6const $ = document.querySelector.bind(document)
7const $$ = document.querySelectorAll.bind(document)

解决 uView Parse 富文本解析器 ready 事件触发时机不准确的问题

Thu, 15 Jul 2021 00:00:00 +0000

监听事件bindready，获取高度有时不准确 #195

对应的源码部分

判断 ready 的标准是每 350ms 检查一次高度，两次高度不变化就认为加载完毕，然后返回大小，处理的地方在这里

这个处理方式确实可能在某些情况下不准确，如果 350ms 总高度不变化就会触发，但这个很难权衡，因为要确保一定准确的话可能这个时间间隔要更长或者多次不变化后再触发，这样的话触发的就会很慢，某些情况下会带来问题（比如进入页面后等待图片加载完要跳转到某个锚点，等待时间过长就会影响体验），所以这里如果要求很高的话可能需要自行调整一下

ps：对于这个问题最准确的获取时机应该是所有图片都触发 load 事件的时候，但由于开启懒加载后，一些图片不会立即加载，所以无法判断是否全部加载完毕，以及另外一些原因这个方法不适用，所以只能通过高度变化判断

 1export default {
 2 data () {
 3 return {
 4 _timer: null
 5 }
 6 },
 7 method () {
 8 /**
 9 * @description 获取内容大小和位置
10 * @return {Promise}
11 */
12 getRect (selector) {
13 return new Promise((resolve, reject) => {
14 uni.createSelectorQuery()
15 // #ifndef MP-ALIPAY
16 .in(this)
17 // #endif
18 .select(selector).boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
19 })
20 },
21
22 watchGoodsDetail () {
23 let times = 0; // 监听次数
24 let maxTimes = 10; // 连续 10 获取高度相同视为加载完毕
25 let wait = 350; // 间隔
26 let height = 0; // 详情高度
27
28 clearInterval(this._timer)
29 this._timer = setInterval(() => {
30 this.getRect('#tab3').then(rect => {
31 // 350ms 总高度无变化就触发 ready 事件
32 if (rect.height === height) {
33 times++
34 if (times >= maxTimes) {
35 clearInterval(this._timer)
36 }
37 } else {
38 times = 0
39 height = rect.height
40 this.onNavTargetChange()
41 }
42 }).catch(() => { })
43 }, wait)
44 }
45 }
46}

git subtree 使用记录

Fri, 09 Jul 2021 00:00:00 +0000

参考文章： git subtree教程

1git subtree push --prefix=content/posts post master

目前主要使用这三个命令即可，分别是添加、更新和推送远程。

1git subtree add --prefix=<prefix> <repository> <ref>
2git subtree pull --prefix=<prefix> <repository> <ref>
3git subtree push --prefix=<prefix> <repository> <ref>

其中 <prefix> 是子模块的路径，<repository> 是子模块自身的 git 地址。

1{
2 "scripts": {
3 "set:posts": "git remote add posts git@github.com:wencaizhang/wencaizhang.github.io.git",
4 "add:posts": "git subtree add --prefix=content/posts post master ",
5 "pull:posts": "git subtree pull --prefix=content/posts post master ",
6 "push:posts": "git subtree push --prefix=content/posts post master"
7 }
8}

一个合并分支的新姿势

Fri, 09 Jul 2021 00:00:00 +0000

Git 是程序员日常开发离不开的工具，合并分支也是多人开发协作过程中必不可少的环节。

设置input的placeholder的字体样式

Sun, 06 Jun 2021 00:00:00 +0000

设置input占位符的样式

HTML 代码：

1<input type="text" placeholder="请设置用户名">

CSS 代码：

 1input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 2 color: red;
 3}
 4input::-moz-placeholder { /* Firefox 19+ */
 5 color: red;
 6}
 7input:-ms-input-placeholder { /* IE 10+ */
 8 color: red;
 9}
10input:-moz-placeholder { /* Firefox 18- */
11 color: red;
12}

示例：

设置滚动条样式

Sun, 06 Jun 2021 00:00:00 +0000

设置滚动条样式

HTML 代码：

1<p class="scroll-container">
2 庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
3</p>

CSS 代码：

1.scroll-container {
2 width: 500px;
3 height: 150px;
4 border: 1px solid #ddd;
5 padding: 15px;
6 overflow: auto; /*必须*/
7 }

滚动条样式：

 1 .scroll-container::-webkit-scrollbar {
 2 width: 8px;
 3 background: white;
 4 }
 5
 6 .scroll-container::-webkit-scrollbar-corner,
 7 /* 滚动条角落 */
 8 .scroll-container::-webkit-scrollbar-thumb,
 9 .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/
10 border-radius: 4px;
11 }
12
13 .scroll-container::-webkit-scrollbar-corner,
14 .scroll-container::-webkit-scrollbar-track {
15 /* 滚动条轨道 */
16 background-color: rgba(180, 160, 120, 0.1);
17 box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
18 }
19
20 .scroll-container::-webkit-scrollbar-thumb {
21 /* 滚动条手柄 */
22 background-color: #00adb5;
23 }

示例：

庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。

Nginx 常用配置备忘清单 | nginx-cheatsheet

Tue, 18 May 2021 00:00:00 +0000

作为软件开发工程师多多少少都该懂一些 nginx 的使用和配置，下面是 nginx 的几个经典应用场景下的配置写法，记录下来以防遗忘，用到的时候也可以直接过来拷贝。

端口监听

 1server {
 2 # Standard HTTP Protocol
 3 # 标准的 HTTP 协议
 4 listen 80;
 5
 6 # Standard HTTPS Protocol
 7 # 标准的 HTTPS 协议
 8 listen 443 ssl;
 9
10 # For http2
11 listen 443 ssl http2;
12
13 # Listen on 80 using IPv6
14 # 使用 IPv6 监听 80 端口
15 listen [::]:80;
16
17 # Listen only on using IPv6
18 # 仅使用 IPv6 监听 80 端口
19 listen [::]:80 ipv6only=on;
20}

访问日志

1server {
2 # Relative or full path to log file
3 # 为日志文件指定一个相对或绝对路径
4 access_log /path/to/file.log;
5
6 # Turn 'on' or 'off'
7 # 通过 'on' 或者 'off' 控制是否启用
8 access_log on;
9}

域名

指定域名和对应的网站根目录位置，server_name 可以是域名、二级域名，也可以是 ip 地址。

 1server {
 2 # Listen to yourdomain.com
 3 # 监听来自域名 yourdomain.com 的访问
 4 server_name yourdomain.com;
 5
 6 # Listen to multiple domains
 7 # 监听来自多个域名的访问
 8 server_name yourdomain.com www.yourdomain.com;
 9
10 # Listen to all domains
11 # 监听 yourdomain.com 的所有二级域名
12 server_name *.yourdomain.com;
13
14 # Listen to all top-level domains
15 # 监听所有 yourdomain 的顶级域名
16 server_name yourdomain.*;
17
18 # Listen to unspecified Hostnames (Listens to IP address itself)
19 # 不指定域名，监听自身 IP 的访问
20 server_name "";
21}

静态资源访问

1server {
2 listen 80;
3 server_name yourdomain.com;
4
5 location / {
6 root /path/to/website;
7 }
8}

重定向

1server {
2 listen 80;
3 server_name www.yourdomain.com;
4 return 301 http://yourdomain.com$request_uri;
5}

1server {
2 listen 80;
3 server_name www.yourdomain.com;
4
5 location /redirect-url {
6 return 301 http://otherdomain.com;
7 }
8}

反向代理

 1server {
 2 listen 80;
 3 server_name yourdomain.com;
 4
 5 location / {
 6 proxy_pass http://0.0.0.0:3000;
 7 # where 0.0.0.0:3000 is your application server (Ex: node.js) bound on 0.0.0.0 listening on port 3000
 8 }
 9
10}

负载均衡

 1upstream node_js {
 2 server 0.0.0.0:3000;
 3 server 0.0.0.0:4000;
 4 server 123.131.121.122;
 5}
 6
 7server {
 8 listen 80;
 9 server_name yourdomain.com;
10
11 location / {
12 proxy_pass http://node_js;
13 }
14}

SSL 证书

 1server {
 2 listen 443 ssl;
 3 server_name yourdomain.com;
 4
 5 ssl on;
 6
 7 ssl_certificate /path/to/cert.pem;
 8 ssl_certificate_key /path/to/privatekey.pem;
 9
10 ssl_stapling on;
11 ssl_stapling_verify on;
12 ssl_trusted_certificate /path/to/fullchain.pem;
13
14 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
15 ssl_session_timeout 1h;
16 ssl_session_cache shared:SSL:50m;
17 add_header Strict-Transport-Security max-age=15768000;
18}
19
20# Permanent Redirect for HTTP to HTTPS
21# 将 HTTP 访问永久重定向到 HTTPS
22server {
23 listen 80;
24 server_name yourdomain.com;
25 return 301 https://$host$request_uri;
26}

感谢

文中用到的配置几乎都出自 https://vishnu.hashnode.dev/nginx-cheatsheet 这篇文章，在此基础上经过个人理解添加了一些解释说明，特此说明。

前端创建并下载文件

Wed, 27 Jan 2021 00:00:00 +0000

more 利用 HTML5 原生的 download 属性来下载文本信息

代码如下：

 1/**
 2 * 前端创建并下载文件
 3 * @param {String} content 文件内容
 4 * @param {String} filename 文件名称
 5 * @param {String} MIME
 6 * MIME类型参考手册 http://www.w3school.com.cn/media/media_mimeref.asp
 7 */
 8export function downloadFile (content, filename, MIME = 'application/octet-stream') {
 9 // 创建隐藏的可下载链接
10 const eleLink = document.createElement('a')
11 eleLink.download = filename
12 eleLink.style.display = 'none'
13
14 // 字符内容转变成blob地址
15 const blob = new Blob([content], { type: MIME })
16 eleLink.href = URL.createObjectURL(blob)
17
18 // 触发点击事件，然后移除
19 document.body.appendChild(eleLink)
20 eleLink.click()
21 document.body.removeChild(eleLink)
22}

其中，参数 content 指需要下载的文本或字符串内容，filename 指下载到系统中的文件名称。

代码来源： JS前端创建html或json文件并浏览器导出下载

将正常时间格式转化为时间戳

Wed, 27 Jan 2021 00:00:00 +0000

使用 JavaScript 内置方法将正常时间格式转化为时间戳

 1/**
 2 * 将正常时间格式转化为时间戳
 3 * @param {String} time [正常时间格式，如：2019-04-01 13:10:10]
 4 */
 5export function getTimestamp (time = null) {
 6 // 没有对 time 做合法性校验
 7 // 假设传入的 time 都是合法的时间格式：2019-04-01 13:10:10
 8 const date = time ? new Date(time.replace(/-/g, '/')) : new Date()
 9 const timestamp = date.getTime() // 13 位数字，精确到毫秒
10 return timestamp
11}

检测设备类型

Wed, 27 Jan 2021 00:00:00 +0000

在开发移动端网站时经常需要检查用户端设备类型，以便做出不同的调整。

方式一、检测手机平板和PC

 1function detectDevice() {
 2 var isMobile = false, isTablet = false, isLaptop = false;
 3 if (window.innerWidth <= 425) {
 4 isMobile = true;
 5 isTablet = false;
 6 isLaptop = false;
 7 } else if (window.innerWidth <= 768) {
 8 isMobile = false;
 9 isTablet = true;
10 isLaptop = false;
11 } else {
12 isMobile = false;
13 isTablet = false;
14 isLaptop = true;
15 }
16}
17detectDevice();

判断是否微信浏览器

1function isWeChat () {
2 const ua = navigator.userAgent.toLowerCase()
3 return ua.match(/MicroMessenger/i) == "micromessenger"
4}

计算传入的时间戳和当前时间相差了多久

Wed, 27 Jan 2021 00:00:00 +0000

某些时候我们需要展示某个时间点相差当前时刻多久，例如“一天前”，“一个月前”等。

 1/**
 2 * 计算传入的时间戳和当前时间相差了多久
 3 * @param {Number} timestamp [时间戳]
 4 */
 5export function getTimeDiff (timestamp) {
 6 // 如果精确到毫秒，时间戳是 13 位数字
 7 // 这里按照秒来计算，需要将毫秒转换为秒
 8 if (timestamp > 1 * 10 ** 12) {
 9 timestamp = timestamp / 1000
10 }
11
12 var currentStamptime = Date.parse(new Date()) / 1000
13 var agoAt = '刚刚'
14 var diff = currentStamptime - timestamp
15 var points = [
16 { value: 365 * 24 * 60 * 60, suffix: '年前', max: 2 },
17 { value: 30 * 24 * 60 * 60, suffix: '月前', max: 11 },
18 { value: 7 * 24 * 60 * 60, suffix: '周前', max: 4 },
19 { value: 24 * 60 * 60, suffix: '天前', max: 6 },
20 { value: 60 * 60, suffix: '小时前', max: 23 },
21 { value: 10 * 60, suffix: '0分钟前', max: 5 }
22 ]
23
24 for (var i = 0; i < points.length; i++) {
25 var item = points[i]
26 var mode = Math.floor(diff / item.value)
27 if (mode >= 1) {
28 agoAt = Math.min(mode, item.max) + item.suffix
29 break
30 }
31 }
32 return agoAt
33}

转换存储容量大小

Wed, 27 Jan 2021 00:00:00 +0000

我们知道存储容量好几个不同的单位，如 KB、MB、GB 等等。

而在反映一块硬盘的具体容量时，总是需要根据其实际大小选用合适的单位，例如我有一块 500GB 的硬盘和一根 4GB 的内存条，就不能说成 0.5GB 的硬盘和 4000MB 的内存条。

因此，我们需要一个函数来将一个容量转换为合适的单位来表示

转换存储容量大小

value 应当是以 b 位单位的小于 1 KB，则转化成 B 小于 1 MB，则转化成 KB 小于 1 GB，则转化成 MB 以此类推，目前最大单位 PB size: 单位大小，这里是 1000

 1export function formatStorageSize (currValue = 0, unit = 'B', size = 1024) {
 2
 3 const unites = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
 4
 5 if (!unites.includes(unit)) {
 6 return new Error('请输入标准的存储单位')
 7 }
 8
 9 const powSize = n => {
10 const max = unites.length
11 return max > n ? Math.pow(size, n) : Infinity
12 }
13
14 const unitesTable = unites.map((unit, index) => {
15 return {
16 suffix: unit,
17 minValue: 1 * powSize(index),
18 maxValue: 1 * powSize(index + 1)
19 }
20 })
21
22 console.log(unitesTable)
23
24 // 先恢复到以 B 为单位然后进行计算
25 const value = powSize(unites.indexOf(unit)) * currValue
26 const { suffix, minValue } = unitesTable.find(item => item.maxValue > value)
27 const ret = (value / minValue).toFixed(2) + ' ' + suffix
28
29 return ret
30}

测试代码

闪耀你的div

Wed, 27 Jan 2021 00:00:00 +0000

想让你的网页可以 blingbling 地闪耀吗？

 1.flash-wrap {
 2 position: relative;
 3 overflow: hidden;
 4}
 5
 6.flash-wrap::after {
 7 content: "";
 8 position: absolute;
 9 left: -100%;
10 top: 0;
11 width: 100%;
12 height: 100%;
13 transform: skewx(-25deg);
14 background-image:
15 -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0),
16 rgba(255, 255, 255, .5),
17 rgba(255, 255, 255, 0));
18 z-index: 10;
19}
20
21.flash-wrap:hover::after {
22 animation: flash 2s ease infinite;
23 animation-delay: .5s;
24}
25
26@keyframes flash {
27 0% {
28 left: -100%;
29 }
30
31 100% {
32 left: 100%;
33 }
34}

给博客搭配随机图片

Fri, 08 Jan 2021 00:00:00 +0000

每次写文章给博文配图是一件很麻烦的事情，一张张地找，有时候质量还不好，于是乎，我就去寻找了一波背景图api接口，这下妈妈再也不用担心我文章不会配图了，

API 调用方式很简单，就是直接把 api 地址当做图片地址来访问，当服务器接收到访问时会自动重定向到一个随机的图片地址。

下面列举几个

一、小歪API

网址: https://api.ixiaowai.cn/

目前系统共收录 1000+ 张图片 API最后更新时间:2020-03-25

图片均为https，采用新浪图片，高速访问

1.1 直接使用

图片API基本调用格式：
- 二次元动漫: https://api.ixiaowai.cn/api/api.php
- mc酱动漫: https://api.ixiaowai.cn/mcapi/mcapi.php
- 高清壁纸: https://api.ixiaowai.cn/gqapi/gqapi.php
文字API基本调用格式：
- 一言语录: https://api.ixiaowai.cn/ylapi/index.php
- 舔狗日记: https://api.ixiaowai.cn/tgrj/index.php

1.2 JSON 格式

访问上面的 api 会直接重定向到一个随机图片地址，你可以在 api 后面添加参数 type=json 来得到一个 JSON 格式的结果：

例如：

图片列： https://api.ixiaowai.cn/api/api.php?return=json
文字列： https://api.ixiaowai.cn/ylapi/index.php/?code=js

返回 JSON 数据示例

1{
2 "code": "200",
3 "imgurl": "https://tva3.sinaimg.cn/large/0072Vf1pgy1fodqoysytvj31hc0u0qcq.jpg",
4 "width": "1920",
5 "height": "1080"
6}

二、动漫星空

目前动漫星空共收录 8千万+ 张4K精美图片动漫星空随机图片API，高速，免费，无广告注意：目前仅提供1080P接口，2K和4K接口后续开放，更多动态请持续关注动漫星空API官网及动漫星空微信公众号，第一时间获取官方更新信息 HTML调用格式 1080P：

1https://api.dongmanxingkong.com/suijitupian/acg/1080p/index.php

参数： type=json JSON调用格式 1080P：

1https://api.dongmanxingkong.com/suijitupian/acg/1080p/index.php?return=json

JSON数据

1{
2 "code": "200",
3 "imgurl": "https://tvax2.sinaimg.cn/large/0072Vf1pgy1fodqpio0roj31kw0v47wh.jpg",
4 "width": "2048",
5 "height": "1120"
6}

三秋API接口站

目前系统共收录 3k9+ 张图片 API最后更新时间:2020-07-14

图片均为https，采用又拍云存储，高速访问

自判断二次元API： https://api.ghser.com/random/api.php
PC随机二次元API： https://api.ghser.com/random/pc.php
PE随机二次元API： https://api.ghser.com/random/pe.php
随机二次元风景API： https://api.ghser.com/random/bg.php

欢迎提示语分享

Tue, 29 Dec 2020 00:00:00 +0000

当用户登录你的系统时，如果能够给出一个友好有趣的提示语，想必更能让你的用户感受到开发者的用心。

今天分享一个当用户登入系统的友好提示语：

 1function timeFix () {
 2 const time = new Date()
 3 const hour = time.getHours()
 4 const timeMap = {
 5 9: '早上好',
 6 11: '上午好',
 7 13: '中午好',
 8 20: '下午好',
 9 24: '晚上好'
10 }
11 const key = Object.keys(timeMap).find(key => hour <= key)
12 return timeMap[key]
13}
14
15function welcome () {
16 const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
17 const index = Math.floor(Math.random() * arr.length)
18 return arr[index]
19}

责任链模式

Sat, 12 Dec 2020 00:00:00 +0000

背景交代

最近负责的一个前端项目随着需求和功能的升级，代码越写越复杂，尤其是登录模块的判断逻辑，就像是那老太太的缠脚布——又臭又长!

刚好趁着登录的需求变更，使用责任链模式把相关代码重构了一番，重构之后再看代码，啧啧，代码之整洁且逻辑清晰，忍不住要给自己送一朵小红花 🌺 —— 优秀！

撸起袖子加油干

我们约定好，将单个判断逻辑封装成一个函数，函数接收相同的参数，返回值的统一为一个 promise。

如果判断通过，可以进行下一步判断，返回 fulfill 状态的 promise，如果未通过需要结束后续判断，则返回 rejected 状态的 promise。

这里的代码均为示意代码，其中的判断逻辑都进行了简化。

 1function handlePwdExpired (resp) {
 2 if (resp.expired === 1) {
 3 // 密码过期处理逻辑
 4 console.log('密码过期，请修改密码后重新登录')
 5 return Promise.rejected('密码过期')
 6 }
 7 return Promise.resolve(resp)
 8}
 9
10function handleAuthStatus (resp) {
11 if (resp.status === 1) {
12 return Promise.resolve(resp)
13 }
14 // 实名认证未通过处理逻辑
15 console.log('实名认证未通过，请耐心等待')
16 return Promise.rejected('实名认证未通过')
17}
18
19function handleDefault (resp) {
20 console.log('逻辑判断结束，进入系统')
21}

定义好上面处理策略之后，我们来调用

 1// 假定我们已经拿到了响应
 2const resp = {
 3 status: 1,
 4 expired: 1,
 5}
 6
 7Promise.resolve(resp)
 8 .then(resp => {
 9 return handlePwdExpired(resp)
10 })
11 .then(resp => {
12 return handleAuthStatus(resp)
13 })
14 .then(resp => {
15 return handleDefault(resp)
16 })
17 .catch(err => {
18 console.log(err);
19 })

适配器模式

Sat, 12 Dec 2020 00:00:00 +0000

背景交代

场景一：转换数据格式

Vue 中的 computed 属性就是现成的一个适配器：

 1const vm = new Vue({
 2 data: {
 3 authors: [ '张教授', '王教授']
 4 },
 5 computed: {
 6 authorsText () {
 7 return this.authors.join('、')
 8 }
 9 }
10})

又比如

撸起袖子加油干

CSS多行文本溢出显示省略号显示点点点...

Sun, 28 Jun 2020 00:00:00 +0000

一、单行省略

1<div class="elip w100" style="border: 1px solid #5184f6;">
2 两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船。
3</div>

 1/* 单行文本溢出省略 */
 2.elip {
 3 overflow: hidden; /* 隐藏溢出内容 */
 4 white-space: nowrap; /* 不换行，强制文本在一行显示 */
 5 text-overflow: ellipsis; /* 溢出的部分进行省略 */
 6}
 7.w100 {
 8 /* 设置宽度，一定不要忘了 */
 9 width: 100px;
10}

效果如下：

两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船。

要想实现单行文本超出宽度省略，需要满足以下几点

只要满足了上面 4 点，单行文本的溢出省略就很容易实现。但现实情况中，除了单行文本外还有很多场景是需要实现多行文本溢出省略的，接下来我们一起来看如何实现这个需求。

二、多行文本溢出省略

之所以说多行文本溢出省略不容易实现，是因为在 CSS 规范中 text-overflow: ellipsis 只适用于单行文本，同时并没有适用于多行文本溢出省略的规则。因此我们只能另辟蹊径来实现这个需求。

使用浏览器私有属性来实现

1.box {
2 width: 200px;
3 padding: 0 !important; /* padding 必须为 0 */
4 overflow: hidden;
5 display: -webkit-box; /* 类似于 flexbox 的自适应布局 */
6 -webkit-box-orient: vertical; /* 元素排列方向：从上到下 */
7 -webkit-line-clamp: 4; /* 第四行后开始省略 */
8}

padding 为 0

有一天，螃蟹撞到了田螺。田螺说:“蟹蟹，你撞到我了”，螃蟹说:“不用谢”。田螺回道:“谢你妹啊，我是说你撞到我了，你是不是瞎啊”，螃蟹一脸委屈地说:“我不是虾啊，我是螃蟹”

padding 为 1rem

其中 padding 必须保证为 0，否则立马破功，这一点很容易被忽略掉，有兴趣的可以测试一下。

这种方法的优点是写法简洁明了（相对于使用 js 截取文本），但缺点就是通过私有属性实现，不过经测试在 chrome、firefox、safari 以及移动端和小程序都能生效，所以大部分场景还是可以使用这个方法的。

三、代码总结

原理搞明白之后，为了更方便地在项目中使用，我整理出来了这段 CSS 代码，其中预设了 5 个 class 样式，类名都是 elip-line-x 的格式，其中 x 代表最多可以展示 x 行文字，超出部分显示省略号点点点，x 的取值范围是 1-5。

 1/* start--文本行数限制--start */
 2.elip-line-1 {
 3 overflow: hidden;
 4 white-space: nowrap;
 5 text-overflow: ellipsis;
 6}
 7
 8.elip-line-2,
 9.elip-line-3,
10.elip-line-4,
11.elip-line-5 {
12 padding: 0 !important;
13 overflow: hidden;
14 word-break: break-all;
15 text-overflow: ellipsis;
16 display: -webkit-box;
17 -webkit-box-orient: vertical;
18}
19
20.elip-line-2 { -webkit-line-clamp: 2; }
21.elip-line-3 { -webkit-line-clamp: 3; }
22.elip-line-4 { -webkit-line-clamp: 4; }
23.elip-line-5 { -webkit-line-clamp: 5; }
24/* end--文本行数限制--end */

有了上面这段代码，直接给任意元素加上 elip-line-x 类即可轻松实现最多 x 行文字显示省略号点点点效果。如果最多显示 5 行不满足你的需求，你也可以根据代码扩展到任意行数。

Get the Beginning and Ending in a Unit of Time via Momentjs

Tue, 19 Nov 2019 00:00:00 +0000

根据 moment.js 得到一个单位时间或者时间段（如本周，上周，本月，上月，当前季度，上个季度）的开始结束时间

momentjs 文档

主要利用以下几项 API：

format(): 得到格式化的时间
startOf(): 得到一个单位时间的开始时间点，文档
endOf(): 得到一个单位时间的结束时间点
add(): 在指定时间点的基础上，加上一个时间段
subtract(): 在指定时间点的基础上，减去一个时间段
week(): 获取或设置一个时间对象的周数（第几周）
month(): 获取或设置一个时间对象的月份
quarter(): 获取或设置一个时间对象的季度

天

 1// 获取当天开始结束时间
 2function getCurrDays () {
 3 let date = moment()
 4 let start = date.startOf('days').format('YYYY-MM-DD HH:mm:ss')
 5 let end = date.endOf('days').format('YYYY-MM-DD HH:mm:ss')
 6 return [ start, end ]
 7}
 8
 9// 获取昨天的开始结束时间
10function getYesterday () {
11 let date = moment().subtract('days',1);
12 let start = date.startOf('days').format('YYYY-MM-DD HH:mm:ss')
13 let end = date.endOf('days').format('YYYY-MM-DD HH:mm:ss')
14 return [ start, end ]
15}
16
17// 获取明天的开始结束时间
18function getTomorrow () {
19 let date = moment().add('days',1);
20 let start = date.startOf('days').format('YYYY-MM-DD HH:mm:ss')
21 let end = date.endOf('days').format('YYYY-MM-DD HH:mm:ss')
22 return [ start, end ]
23}

周

获取某一周（本周，上周，下周）的开始结束时间，一周从周日开始到周六结束。

 1// 本周
 2function getCurrWeekDays () {
 3 let date = moment()
 4 let start = date.startOf('week').format('YYYY-MM-DD HH:mm:ss')
 5 let end = date.endOf('week').format('YYYY-MM-DD HH:mm:ss')
 6 return [ start, end ]
 7}
 8// 上一周
 9function getLastWeekDays () {
10 let date = moment().week(moment().week() - 1)
11 let start = date.startOf('week').format('YYYY-MM-DD HH:mm:ss')
12 let end = date.endOf('week').format('YYYY-MM-DD HH:mm:ss')
13 return [ start, end ]
14}
15// 下一周
16function getNextWeekDays () {
17 let date = moment().week(moment().week() + 1)
18 let start = date.startOf('week').format('YYYY-MM-DD HH:mm:ss')
19 let end = date.endOf('week').format('YYYY-MM-DD HH:mm:ss')
20 return [ start, end ]
21}

月

 1// 本月
 2function getCurrMonthDays () {
 3 let date = moment()
 4 let start = date.startOf('month').format('YYYY-MM-DD')
 5 let end = date.endOf('month').format('YYYY-MM-DD')
 6 return [ start, end ];
 7}
 8// 上个月
 9function getLastMonthDays () {
10 let date = moment().month(moment().month() - 1)
11 let start = date.startOf('month').format('YYYY-MM-DD')
12 let end = date.endOf('month').format('YYYY-MM-DD')
13 return [ start, end ];
14}
15// 下个月
16function getNextMonthDays () {
17 let date = moment().month(moment().month() + 1)
18 let start = date.startOf('month').format('YYYY-MM-DD')
19 let end = date.endOf('month').format('YYYY-MM-DD')
20 return [ start, end ];
21}

季度

 1// 当前季度
 2function getCurrQuarter () {
 3 let date = moment()
 4 let start = date.startOf('quarter').format('YYYY-MM-DD')
 5 let end = date.endOf('quarter').format('YYYY-MM-DD')
 6 return [ start, end ];
 7}
 8// 上个季度
 9function getLastQuarter () {
10 let date = moment().quarter(moment().quarter() - 1)
11 let start = date.startOf('quarter').format('YYYY-MM-DD')
12 let end = date.endOf('quarter').format('YYYY-MM-DD')
13 return [ start, end ];
14}
15// 下个季度
16function getLastQuarter () {
17 let date = moment().quarter(moment().quarter() + 1)
18
19}

DRY -

Don't repeat yourself.

上面代码中可以看到有一个固定结构重复了好多次：

1function getX () {
2 let date = x
3 let start = date.startOf('时间单位类型').format('格式化')
4 let end = date.endOf('时间单位类型').format('格式化')
5 return [ start, end ];
6}

所以我们可以专门封装一个函数，接收三个参数（时间，时间单位，格式化），返回开始和结束时间。

1function getDuringTime (date, type, format) {
2 let start = date.startOf(type).format(format)
3 let end = date.endOf(type).format(format)
4 return [ start, end ];
5}

有了此工具函数，将上面代码汇总如下：

 1/**
 2 * @param {date} date [momentjs 时间对象]
 3 * @param {String} type [单位时间类型]
 4 * @param {String} format [时间格式]
 5 * type 可以接收的值： year, month, quarter, week, isoWeek, day, date, hour, minute, second
 6 */
 7function getDuringTime (date=moment(), type='days', format='YYYY-MM-DD HH:mm:ss') {
 8 let start = date.startOf(type).format(format)
 9 let end = date.endOf(type).format(format)
10 return [ start, end ];
11}
12
13// 获取当天开始结束时间
14function getCurrDays () {
15 let date = moment()
16 return getDuringTime(date, 'days', 'YYYY-MM-DD')
17}
18
19// 获取昨天的开始结束时间
20function getYesterday () {
21 let date = moment().subtract('days',1)
22 return getDuringTime(date, 'days', 'YYYY-MM-DD')
23}
24
25// 获取明天的开始结束时间
26function getTomorrow () {
27 let date = moment().add('days',1)
28 return getDuringTime(date, 'days', 'YYYY-MM-DD')
29}
30
31// 获取某一周（本周，上周，下周）的开始结束时间，一周从周日开始到周六结束。
32// 本周
33function getCurrWeekDays () {
34 let date = moment()
35 return getDuringTime(date, 'week', 'YYYY-MM-DD')
36}
37// 上一周
38function getLastWeekDays () {
39 let date = moment().week(moment().week() - 1)
40 return getDuringTime(date, 'week', 'YYYY-MM-DD')
41}
42// 下一周
43function getNextWeekDays () {
44 let date = moment().week(moment().week() + 1)
45 return getDuringTime(date, 'week', 'YYYY-MM-DD')
46}
47
48// 本月
49function getCurrMonthDays () {
50 let date = moment()
51 return getDuringTime(date, 'month', 'YYYY-MM-DD')
52}
53// 上个月
54function getLastMonthDays () {
55 let date = moment().month(moment().month() - 1)
56 return getDuringTime(date, 'month', 'YYYY-MM-DD')
57}
58// 下个月
59function getNextMonthDays () {
60 let date = moment().month(moment().month() + 1)
61 return getDuringTime(date, 'month', 'YYYY-MM-DD')
62}
63
64// 当前季度
65function getCurrQuarter () {
66 let date = moment()
67 return getDuringTime(date, 'quarter', 'YYYY-MM-DD')
68}
69// 上个季度
70function getLastQuarter () {
71 let date = moment().quarter(moment().quarter() - 1)
72 return getDuringTime(date, 'quarter', 'YYYY-MM-DD')
73}
74// 下个季度
75function getLastQuarter () {
76 let date = moment().quarter(moment().quarter() + 1)
77 return getDuringTime(date, 'quarter', 'YYYY-MM-DD')
78}

本文完，感谢阅读。:stuck_out_tongue_winking_eye:

Basic Setup for Ubuntu

Sun, 17 Nov 2019 00:00:00 +0000

Ubuntu 基础设置，包含一些常用软件安装，配置文件修改等等。

这篇文章的意义在于，当你拿到一个新的 Ubuntu 系统之后，直接按照本文的步骤进行设置，就可以得到一个顺手的开发/部署环境。不再需要逐项搜索每个软件的安装步骤了。

设置国内软件镜像源
node
git
docker
nginx
oh-my-zsh
alias
vim

设置系统软件镜像源

配置系统源第一件事是修改镜像源，这样方便后续其他软件的安装。在国内可以选择阿里云的源。

1# 编辑源文件
2sudo vim /etc/apt/sources.list
3# 在VIM编辑器内替换默认源为阿里云
4:0,$ s/archive.ubuntu.com/mirrors.aliyun.com/
5# 保存源文件并退出
6:wq

包管理工具安装

先更新

1sudo apt update -y && sudo apt upgrade -y

安装常用软件

通常会有一些是默认安装的，比如 git vim wget curl vim，如果没有，用下面方式安装即可。

1sudo apt install zsh nginx tree -y

oh-my-zsh

关于 zsh 和 oh-my-zsh 可以参考：终极 Shell——ZSH

安装

脚本安装：

1wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

或者手动安装:

1git clone https://github.com/ohmyzsh/ohmyzsh.git ~/.oh-my-zsh
2cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

安装完成之后退出当前会话重新打开一个终端窗口即可。

插件

(1) autojump github 地址 autojump

下载并执行

1wget https://github.com/downloads/joelthelion/autojump/autojump_v21.1.2.tar.gz
2./install.sh

最后把以下代码加入.zshrc:

1[[ -s ~/.autojump/etc/profile.d/autojump.sh ]] && . ~/.autojump/etc/profile.d/autojump.sh

node(nvm)

nvm github 地址： nvm-sh/nvm

方法一：脚本安装

执行脚本

1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
2# 或者
3wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

最后，将下面内容分别添加到 ~/.bashrc, ~/.profile, 和 ~/.zshrc 文件中。

1export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ]
2&& printf %s "${HOME}/.nvm"
3|| printf %s "${XDG_CONFIG_HOME}/nvm")"
4
5[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

加载配置文件：

1source ~/.bashrc

方法二：git 安装

将代码克隆到用户目录下：

1cd ~/
2git clone https://github.com/nvm-sh/nvm.git .nvm

切换到最新版本

1cd ~/.nvm
2git checkout v0.35.1

激活 nvm，在命令行执行：

1. nvm.sh

最后，将下面内容分别添加到 ~/.bashrc, ~/.profile, 和 ~/.zshrc 文件中。

1export NVM_DIR="$HOME/.nvm"
2[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
3[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

完成之后，通过 nvm -v 查看版本来验证是否安装成功。

docker

安装 Docker

1curl -fsSL https://get.docker.com -o get-docker.sh && sudo sh get-docker.sh

安装 Compose

1sudo curl -L "https://github.com/docker/compose/releases/download/1.22.0/docke-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
2# 给Docker Compose 执行权限
3sudo chmod +x /usr/local/bin/docker-compose
4
5#查看Docker和Docker Compose的版本
6sudo docker version
7sudo docker-compose version

设置镜像源

执行下面命令进行设置

ps: 阿里云镜像源是个人注册阿里云账号之后分配的个人专属镜像源。

1sudo mkdir -p /etc/docker
2sudo tee /etc/docker/daemon.json <<-'EOF'
3{
4 "registry-mirrors": ["https://oojjt1xs.mirror.aliyuncs.com"]
5}
6EOF
7sudo systemctl daemon-reload
8sudo systemctl restart docker

vim 配置

有些系统默认没有安装

配置文件路径：

全局配置文件：/etc/vim/vimrc
当前用户配置文件：~/.vimrc

将下面内容粘贴到配置文件中：

1" 左单引号表示单行注释
2" 编码指定 UTF-8
3set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936
4set termencoding=utf-8
5set encoding=utf-8
6
7set number " 显示行号
8set cursorline " 突出显示当前行
9set ruler " 打开状态栏标尺

设置别名(alias)

将所有的别名放在单独一个文件 .bash_aliases 中，这样更加方便管理，ubuntu 也推荐这种做法。

1if [ -f ~/.bash_aliases ]; then
2 . ~/.bash_aliases
3fi

注意：等号两侧不能有空格!

 1# 代替键盘上难以触及的 ~ 键
 2alias home="cd ~"
 3
 4# 同样也可以为一些深层却很常用的目录设置别名
 5# 如：宝塔面包的 nginx 配置目录
 6alias ng="cd /www/server/panel/vhost/nginx"
 7
 8# 回退多级目录
 9alias bk1="cd .."
10alias bk2="cd ../.."
11alias bk3="cd ../../.."
12alias bk4="cd ../../../.."
13alias bk5="cd ../../../../.."
14
15# ls 相关
16alias cls='clear'
17alias ll='ls -l'
18alias la='ls -a'
19
20# git 相关
21alias gs='git status'
22alias glog="git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Cr eset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
23
24# 解压
25alias -s gz='tar -xzvf'
26alias -s tgz='tar -xzvf'
27alias -s zip='unzip'
28alias -s bz2='tar -xjvf'
29
30# other
31alias vi='vim'
32alias grep="grep --color=auto"
33alias tree="tree -I '*svn|*node_module*'"

Python3

系统升级到 ubuntu 20.04 之后，移除了 Python 2，只保留了 Python 3。

因此默认不能执行 Python 命令，但可以执行 python3。

因此我们可以在 /usr/bin 下创建一个软链接，指向 python3。

1sudo ln -s /usr/bin/python3 /usr/bin/python

注意：避免某些软件需要用的 python3，所以不建议把 python3 的软连接删除

本文完，感谢阅读。:stuck_out_tongue_winking_eye:

Basic Usage of Docker

Sat, 16 Nov 2019 00:00:00 +0000

使用脚本快速安装

安装 Docker:

1curl -fsSL https://get.docker.com -o get-docker.sh && sudo sh get-docker.sh

安装 docker-compose

1sudo curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" \
2-o /usr/local/bin/docker-compose
3
4# 给Docker Compose 执行权限
5sudo chmod +x /usr/local/bin/docker-compose
6
7# 查看Docker和Docker Compose的版本
8sudo docker version
9sudo docker-compose version

设置阿里云镜像

1sudo mkdir -p /etc/docker
2sudo tee /etc/docker/daemon.json <<-'EOF'
3{
4 "registry-mirrors": ["https://oojjt1xs.mirror.aliyuncs.com"]
5}
6EOF
7sudo systemctl daemon-reload
8sudo systemctl restart docker

阿里云镜像源需要个人注册阿里云账号之后才能使用，这里我已经注册过了。

三个概念

Docker三个基本概念：Registry注册中心，Image镜像，Container容器

Registry包含多个Repo（仓库）和Tag(标签)，从Registry下载Image的方式是pull <仓库名>:<标签名>，如pull ubuntu:16.04

Image是一个静态概念，相当于面向对象中的类，类不能直接使用，需要实例化。

Container是一个动态概念，相当于面向对象中的实例化，启动镜像生成容器就是实例化类的过程。只有容器才能被用户使用。

查看命令

命令	描述
`docker images`	列出本地镜像
`docker ps`	列出容器

创建容器

创建一个新的容器，并进入交互模式的终端
```
1docker run -it centos:latest /bin/bash
```

后台运行容器，并设置端口映射

1 docker run -d -p 3000:80 centos:latest

进入一个正在后台运行的容器
```
1docker attach [container-id]
```

退出容器

退出容器
```
1exit
```
退出容器并保持容器后台运行
```
1Ctrl + p + q
```

从容器创建新的镜像

首先拿到容器 ID ，然后使用如下命令创建镜像：

1docker commit -a "镜像作者名字" -m "提交时的说明文字" [container-id] [image-name]:[tag]

WordPress 启动方式

创建容器

1 docker run -it -p 3000:80 -p 4000:8888 my_wp:v1 /bin/bash

软件启动

1/etc/init.d/nginx start
2
3/etc/init.d/mysqld start
4
5/etc/init.d/memcached start
6
7/etc/init.d/php-fpm-72 start
8
9/etc/init.d/bt start

退出容器，并保持容器在后台运行
```
1 Ctrl + p + q
```

Nginx 的安装和基本命令 | Basic Usage of Nginx

Sat, 16 Nov 2019 00:00:00 +0000

安装

1# ubuntu
2sudo apt install nginx -y

命令

nginx 命令

描述	命令	命令二
启动	`sudo nginx`	`sudo /usr/sbin/nginx`
停止	`sudo nginx -s stop`	`sudo /usr/sbin/nginx -s stop`
重启	`sudo nginx -s restart`	`sudo /usr/sbin/nginx -s restart`
重载配置文件	`sudo nginx -s reload`	`sudo /usr/sbin/nginx -s reload`

nginx 目录

描述	命令
nginx 安装目录	`/usr/sbin/nginx`
默认网站根目录	`/usr/share/nginx/html`
配置文件	`/etc/nginx/nginx.conf`

查找 nginx 安装目录的命令

描述	命令
查找 nginx 安装目录	`which nginx`
查找 nginx 配置文件	`sudo find / -name nginx.conf`
检测配置文件语法是否正确：	`sudo /usr/sbin/nginx -t`

常见使用场景

(一) 静态网站

指定域名和对应的网站根目录位置，server_name 可以是域名、二级域名，也可以是 ip 地址。

1server {
2 listen 80;
3 server_name demo.example.com;
4 location / {
5 root /www/demo/;
6 index index.html index.htm;
7 }
8}

(二) 反向代理

场景：

解决跨域问题，利用 nginx 来访问其他域名下的接口
当 docker 服务的端口映射到宿主机上某个端口（如 8080）时，可以设置二级域名代理 8080 端口。

 1server {
 2 server_name docker.example.com;
 3 listen 80;
 4
 5 location / {
 6 proxy_pass http://localhost:8000;
 7 proxy_set_header Host $host;
 8 proxy_set_header X-Forward-For $remote_addr;
 9 }
10}

(三) 负载均衡

 1upstream backend {
 2 server backend1.example.com weight=5;
 3 server backend2.example.com:8080;
 4 server unix:/tmp/backend3;
 5}
 6
 7server {
 8 location / {
 9 proxy_pass http://backend;
10 }
11}

一些学习资源

Nginx中文文档

总结 JavaScript 中的 this 指向问题

Sun, 29 Sep 2019 00:00:00 +0000

初学 JavaScript 的时候，时常对于代码中 this 的值感到困惑，因为 JavaScript 中的 this 的值总是不确定的，每次都要将 this 的值打印出来才能放心。

实际上 this 具体指向哪个对象是在函数运行时的环境动态绑定的，而非函数被声明时的环境。

尽管如此，总还是有规律可循的，我们可以将 this 的场景大致分为下面 5 种：

作为普通函数调用
作为对象的方法调用
作为构造器调用
通过 call 和 apply 调用
箭头函数

在 ES6 标准新增的箭头函数中的 this 是由被声明的环境即上下文来确定的。

情况一：作为普通函数调用

这可能是我们学习过程中最先接触到的一种函数类型。

1) 普通函数：

当函数作为普通函数或者匿名函数调用时，this 总是指向全局对象，在浏览器中这个全局对象是 window，而在 nodejs 中全局对象是 global，这里讨论的是浏览器端，所有代码都可以在 chrome 开发者工具的 console 面板中执行。

1window.name = 'globalName'
2
3function printName1 () {
4 console.log(this === window)
5 console.log(this.name)
6}
7printName1()
8// true
9// "globalName"

ES5 规范提出了「严格模式」，启用方式是在整个脚本文件第一行或者函数内第一行添加一条语句 'use strict' 即可开启严格模式。

如果启用「严格模式」，那么 this 就不再是指向全局对象，而是 undefined 。

1function printName2 () {
2 "use strict" // 启用严格模式
3 console.log(this) // undefined
4}
5
6printName2()

2) 匿名函数：

匿名函数自执行，这种形式封装公用库的时候最常见：

1window.name = 'globalName'
2(function () {
3 console.log(this === window) // true
4 console.log(this.name) // "globalName"
5})()

和普通函数一样，匿名函数中的 this 也是指向全局对象。

作为参数的匿名函数：

 1window.name = 'globalName'
 2
 3setTimeout(function () {
 4 console.log(this === window) // true
 5 console.log(this.name) // "globalName"
 6}, 100)
 7
 8[1, 2, 3].forEach(function (item) {
 9 console.log(item, this.name)
10 // 1 "globalName"
11 // 2 "globalName"
12 // 3 "globalName"
13})

情况二：作为对象的方法调用

当函数作为对象当属性方法调用时，this 总指向这个对象。

1var obj = {
2 name: 'obj',
3 printName: function () {
4 console.log(this === obj) // true
5 console.log(this.name) // "obj"
6 }
7}
8
9obj.printName()

但是如果一个对象的属性方法又赋值给了其他变量，那么 this 将发生变化，其指向只有在函数执行那一刻才能确定。例如：

 1var obj = {
 2 name: 'obj',
 3 printName: function () {
 4 console.log(this === obj) // true
 5 console.log(this.name) // "obj"
 6 }
 7}
 8
 9var myPrintName = obj.printName
10window.name = 'globalName'
11
12myPrintName()
13// false
14// "globalName"

当 myPrintName 执行时，就要按照普通函数来判断 this 指向了。

再来一个例子：

 1var obj = {
 2 name: 'obj',
 3 printName: function () {
 4 console.log(this === obj) // true
 5 console.log(this.name) // "obj"
 6 }
 7}
 8
 9var obj2 = {
10 name: 'obj2',
11}
12obj2.printName = obj.printName
13
14obj2.printName()
15// false
16// "obj2"

当 obj2.printName 执行时，printName 是作为 obj2 的属性方法来调用的，因此 this 指向 obj2 这个对象。

所以说，JavaScript 中的 this 指向无法在定义时判断，只有在其执行时才能判断。

1var printName () {
2 console.log(this === window)
3 console.log(this.name)
4}

情况三：作为构造器调用

在 JavaScript 中没有「类」的概念（直到 ES6 才有类的出现），而是把函数作为构造器，通过 new 操作符来生成实例。

那么在构造函数中 this 就指向新生成的实例。

1var MyClass = function () {
2 // 给实例添加 name 属性
3 this.name = 'myclass'
4 this.printName = function () {
5 return this.name
6 }
7}
8var obj = new MyClass()
9obj.printName() // "myclass"

情况四：显式指定 this

前面的几种方法都是被动地根据代码执行时的环境来判断 this 具体指向哪里，那么有没有办法主动指定 this 指向呢。

答案当然是有的，甚至它们的出场率还相当高。

常见的显式指定 this 的方法主要是 call，apply 和 bind 来，在函数式编程中几乎离不开这三个方法。

先定义如下变量：

1window.name = 'globalName'
2function printName () {
3 console.log(this.name)
4}
5
6var obj1 = { name: 'obj1' }
7var obj2 = { name: 'obj2' }
8var obj3 = { name: 'obj3' }

默认情况 this 指向全局对象 window

1printName() // "globalName"

使用 call 来改变 this 指向：

1printName.call(obj1) // "obj1"

使用 apply 来改变 this 指向：

1printName.apply(obj2) // "obj2"

使用 bind 来改变 this 指向：

1var printName2 = printName.bind(obj3)
2printName2() // "obj3"

除此之外，还有一些函数也可以修改 this 指向，例如：forEach, map, filter, some, every 等。以 forEach 为例：

 1var obj = { name: 'zwc' }
 2var arr = [ 1, 2 ]
 3
 4arr.forEach(function (item, index) {
 5 console.log(item, this)
 6})
 7// 1 Window
 8// 2 Window
 9
10arr.forEach(function (item, index) {
11 console.log(item, this)
12}, obj)
13// 1 {name: "zwc"}
14// 2 {name: "zwc"}

forEach 第一个参数接收一个函数作为迭代器，用来处理数组中每一项元素，这个函数通常是一个匿名函数，函数内部的 this 指向全局对象。

forEach 第二个参数可以接收一个对象，这个对象就是参数函数中的 this 指向。

根据打印结果可以看到，在 forEach 的迭代器函数中的 this 已经指向了 obj 。

情况五：ES6箭头函数

箭头函数简介

ES6 允许使用「箭头」（=>）定义函数。

1var f = v => v
2
3// 等同于
4var f = function (v) {
5 return v
6}

除了形式更简洁之外，箭头函数没有自己的 this，而是从自己作用域链的上一层继承 this。

箭头函数总是从自己作用域链的上一层继承 this。

神马意思呢？我的理解就是箭头函数内部的 this 指向永远是箭头函数被定义时所在的作用域的 this，并且无法修改。

无法绑定 this

使用 call 来调用箭头函数时，第一个参数会被忽略，也就是说无法修改 this 指向。apply 和 bind 也是同样现象。

1var printName = () => {
2 console.log(this === window) // true
3}
4
5var obj = { name: 'obj' }
6
7printName.call(obj)

例子一

来看一个例子，在不使用箭头函数的情况下，我们知道构造器函数内部 this 指向对象实例，而匿名函数的 this 是指向全局对象的，因此想要通过定时器打印对象实例的 age 属性，只能用一个变量 self 保存 this 的引用（即闭包）

 1function Person(){
 2 // 构造器函数内部 this 指向对象实例
 3 this.age = 0
 4 var self = this
 5 setInterval(function () {
 6 // 匿名函数中 this 指向全局对象
 7 console.log(self.age++)
 8 }, 1000)
 9}
10
11var p = new Person()

使用箭头函数之后，因为箭头函数的 this 继承自其被定义时所在环境的 this，在本例中这个 this 就是实例对象：

 1function Person(){
 2 // 构造器函数内部 this 指向对象实例
 3 this.age = 0
 4 setInterval(() => {
 5 // 这里的 this 也指向构造函数的 this
 6 console.log(this.age++)
 7 }, 1000)
 8}
 9
10var p = new Person()

例子二

再说一个更实用的例子：在 Vue.js 中使用箭头函数

 1import axios from 'axios'
 2export default {
 3 methods: {
 4 fetch () {
 5 axios.get('/userinfo')
 6 .then(resp => {
 7 this.sayHi() // this 指向 vue 实例
 8 })
 9 .catch(err => {
10 this.sayHi() // this 指向 vue 实例
11 })
12 },
13 sayHi () {
14 setTimeout(() => {
15 // this 指向 vue 实例
16 }, 1000)
17 }
18 }
19}

使用箭头函数之后，再也无需缓存 vue 实例，像是 var vm = this 这种代码统统可以消灭掉，嗯，清爽！

总结

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的 this 值：

如果是该函数是一个普通函数或者匿名函数
- 在严格模式下的函数调用下，this 指向 undefined，
- 在非严格模式的函数调用中，this 指向全局对象，浏览器中全局对象是 window ，在 nodejs 中全局对象是 global
如果是该函数是一个构造函数，this 指针指向一个新的对象（实例）
如果是该函数是一个对象的方法，则它的this 指针指向这个对象
或者使用 call apply 等方法显式指定 this 的指向

在箭头函数中，则是根据箭头函数上下文决定其 this 指向，且无法修改 this 指向。

本文完，感谢阅读。:stuck_out_tongue_winking_eye:

Markdown Syntax Guide

Mon, 11 Mar 2019 00:00:00 +0000

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don't communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Code block with backticks

 1<!doctype html>
 2<html lang="en">
 3<head>
 4 <meta charset="utf-8">
 5 <title>Example HTML5 Document</title>
 6</head>
 7<body>
 8 <p>Test</p>
 9</body>
10<!-- this line is extraneous 2Error from server (Forbidden): deployments.apps is forbidden: User "chiptest" cannot create resource "deployments" in API group "apps" in the namespace "default" -->
11</html>

Code block indented with four spaces

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>

Code block with Hugo's internal highlight shortcode

 1<!doctype html>
 2<html lang="en">
 3<head>
 4 <meta charset="utf-8">
 5 <title>Example HTML5 Document</title>
 6</head>
 7<body>
 8 <p>Test</p>
 9</body>
10</html>

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another item

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015. ↩︎

Rich Content

Sun, 10 Mar 2019 00:00:00 +0000

Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

Instagram Simple Shortcode

YouTube Privacy Enhanced Shortcode

Twitter Simple Shortcode

Vimeo Simple Shortcode

Placeholder Text

Sat, 09 Mar 2019 00:00:00 +0000

Lorem est tota propiore conpellat pectoribus de pectora summo.

Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.

Exierant elisi ambit vivere dedere
Duce pollice
Eris modo
Spargitque ferrea quos palude

Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.

Comas hunc haec pietate fetum procerum dixit
Post torum vates letum Tiresia
Flumen querellas
Arcanaque montibus omnes
Quidem et

Vagus elidunt

The Van de Graaf Canon

Mane refeci capiebant unda mulcebat

Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. Faces illo pepulere tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.

Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.

Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel mitis temploque vocatus, inque alis, oculos nomen non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides parte.

Math Typesetting

Fri, 08 Mar 2019 00:00:00 +0000

Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

In this example we will be using KaTeX

Create a partial under /layouts/partials/math.html
Within this partial reference the Auto-render Extension or host these scripts locally.
Include the partial in your templates like so:

1{{ if or .Params.math .Site.Params.math }}
2{{ partial "math.html" . }}
3{{ end }}

To enable KaTex globally set the parameter math to true in a project's configuration
To enable KaTex on a per page basis include the parameter math: true in content files

Note: Use the online reference of Supported TeX Functions

Examples

Block math: $$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

Emoji Support

Tue, 05 Mar 2019 00:00:00 +0000

Emoji can be enabled in a Hugo project in a number of ways.

The emojify function can be called directly in templates or Inline Shortcodes .

To enable emoji globally, set enableEmoji to true in your site's configuration and then you can type emoji shorthand codes directly in content files; e.g.

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

The Emoji cheat sheet is a useful reference for emoji shorthand codes.

N.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.

1.emoji {
2 font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
3}

Clarity

用 Docker 快速架设一个 Anki 同步服务器

启动服务

域名设置

客户端设置

桌面端

安卓端

相关命令

echarts

Using Notices

将两次 Git 提交合并为一次

封装日期相关函数

获取某年某月共有多少天

Vue.js 项目中二次封装一个按钮组件

Vue2 中容易被忽略的两个重要的 API 介绍

Vue2 中封装

Vue3 中有了一些变化

uniapp 中的一个坑

Git 秘钥

封装简易 DOM 选择器

思考题

解决 uView Parse 富文本解析器 ready 事件触发时机不准确的问题

git subtree 使用记录

一个合并分支的新姿势

设置input的placeholder的字体样式

设置滚动条样式

Nginx 常用配置备忘清单 | nginx-cheatsheet

端口监听

访问日志

域名

静态资源访问

重定向

反向代理

负载均衡

SSL 证书

感谢

前端创建并下载文件

将正常时间格式转化为时间戳

检测设备类型

方式一、检测手机平板和PC

判断是否微信浏览器

计算传入的时间戳和当前时间相差了多久

转换存储容量大小

测试代码

闪耀你的div

推荐 JavaScript 中处理数字计算精度问题的开源库

一、big.js

二、bignumber.js

三、decimal.js

给博客搭配随机图片

一、小歪API

1.1 直接使用

1.2 JSON 格式

二、动漫星空

三秋API接口站

欢迎提示语分享

责任链模式

背景交代

撸起袖子加油干

适配器模式

背景交代

场景一：转换数据格式

撸起袖子加油干

CSS多行文本溢出显示省略号显示点点点...

一、单行省略

二、多行文本溢出省略

使用浏览器私有属性来实现

三、代码总结

Get the Beginning and Ending in a Unit of Time via Momentjs

天

周

月

季度

DRY -

Basic Setup for Ubuntu

设置系统软件镜像源

包管理工具安装

oh-my-zsh

安装

插件