又拍云 + PicGo 搭建图床

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

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

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

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

阅读更多

uni-app 踩坑心路历程

拧螺丝日常。

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 配置

记录配置 Icarus 的一些过程。

KeyWords

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

设置方法

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

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

那么只要按格式配置就可以,譬如:

1
name=keywords;content=一穷,二白,三省
阅读更多

在 Echarts 中绘制水球图

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'
阅读更多

TypeScript 笔记

泛型

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

如下代码使用了泛型,函数的形参 firstsecond 分别指定为 T 和 P,譬如可以在调用方法时,指定 TP 分别为 stringnumber 类型。

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

问题

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

解决方法

打开终端后编辑文件.zshrc

1
vi ~/.zshrc

i进入编辑模式添加:

1
source ~/.bash_profile

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

Hexo 设置 Icarus 主题

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

安装

终端 cd 进 hexo 的根目录。

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

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

配置

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

阅读更多

Quasar 项目创建

换了新的技术栈,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 部署阿里云备忘

前期部署参考《将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
---