之前在废话胶囊插入图片都是再用 ImgURL 这个免费图床，但显然免费的图床载入速度不是很理想。

于是就着手考虑使用又拍云 + PicGo 的组合来存储和使用博客还有废话胶囊的图片。

并且各家的云存储都可以薅到免费的空间，譬如这次使用的又拍云。

在加入又拍云联盟后每个月可以免费使用 10GB 存储空间以及 15GB 流量，对于普通的个人博客，这个大小是肯定足够使用的，而代价就是要在页尾放上又拍云的跳转链接 Logo。

拧螺丝日常。

uni-app 引入 iconfont 编译失败

使用绝对路径：

1
2
3
4

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('./static/iconfont/iconfont.ttf') format('truetype');
}

生成二维码

uQRCode 二维码生成插件 - DCloud 插件市场

在 template 中创建 <canvas/> 并设置 id，画布宽高

1

<canvas id="qrcode" canvas-id="qrcode" style="width: 354px;height: 354px;" />

记录配置 Icarus 的一些过程。

KeyWords

在查看收录的时候发现 Icarus 似乎默认的配置项里并不包含关键字，导致 Blog 一个月了都没有被收录。

设置方法

编辑 _config.icarus.yml 里的 meta 项，注释里注明了写法：

1

name=theme-color;content=#123456 => <meta name="theme-color" content="#123456">

那么只要按格式配置就可以，譬如：

1

name=keywords;content=一穷,二白,三省

Liquid Fill 是一个基于 Echats 的插件，使用它可以绘制出水球图。

引入

1
2

<script src='echarts.js'></script>  // 必须得使用Echarts
<script src='echarts-liquidfill.js'></script>

使用 npm 安装

1
2

$ npm install echarts
$ npm install echarts-liquidfill

引入：

1
2

import * as echarts from 'echarts';
import 'echarts-liquidfill'

泛型

< 任意字符 >，一般使用 T 来表示。

如下代码使用了泛型，函数的形参 first 和 second 分别指定为 T 和 P，譬如可以在调用方法时，指定 T 和 P 分别为 string 和 number 类型。

1
2
3
4

function join<T, P>(first: T, second: P) {
	return `${first}${second}`
}
const num = join<string, number>("1", 2) //12

约束泛型类型

1
2

function join<T extends number>{
}

问题

每次打开终端都要先执行 $source ~/.bash_profile 后才能正常使用npm。

解决方法

打开终端后编辑文件.zshrc。

1

vi ~/.zshrc

按i进入编辑模式添加：

1

source ~/.bash_profile

按Esc后输入:wq回车保存退出。

记录一下配置 Icarus 这个主题的过程。

安装

终端 cd 进 hexo 的根目录。

1
2

$ npm install hexo-theme-icarus
$ hexo config theme icarus

还有种从源码安装的方法，可以参考官方文档 - Icarus快速上手

配置

编辑 _config.icarus.yml 进行配置。

换了新的技术栈，Vue2/Typescript/Quasar/Pug/Stylus，首先从Quasar这个UI框架开始踩起。

创建新的项目

在Windows下，修改用户的PATH环境变量。如果使用yarn，则添加%LOCALAPPDATA%\yarn\bin，否则，如果使用npm，则添加%APPDATA%\npm。

1
2
3

$ yarn global add @quasar/cli
# 或是
$ npm install -g @quasar/cli

使用Quasar CLI创建一个项目文件夹：

1

$ quasar create <folder_name> --branch v1

前期部署参考《将Hexo部署到阿里云轻量服务器（保姆级教程）》

常用命令

1
2
3

$ hexo clean // 清除缓存
$ hexo s // 生成本地服务器
$ hexo d -g // 打包上传 

修改 package.json：

1

"build": "hexo clean & hexo d -g"

直接部署命令：

1

$ npm run build

新建文章

1

hexo new [post] // post: 标题名

阅读更多

在 .md 文本内插入 <!--more--> 即可生效。

Typora

使用 Typora 编辑 .md 文档书写博文，Hexo 的标题、时间、分类以及标签的写法如下。

1
2
3
4
5
6
7
8

---
title: 标题
date: 1999-1-8 00:00:00
categories:
- test
tags:
- test
---