基于Hexo搭建的技术博客平台，相较于旧平台，主要有以下特性和改进：

• 使用Git项目形式管理博客，将md文件提交到服务器即可自动部署
• 支持本地预览
• 支持缓存阅读进度
• 支持分页
• 支持使用分类和标签对文章进行归类
• 无后台的搜索功能
• 无后台的评论系统
• 支持引用本地图片避免外链
• 支持引入codepen、codesandbox、jsfiddle等在线代码
• 访客统计等更多丰富的插件和扩展能力

☯. 最简单直接的写文章方式

无需下载项目到本地，直接打开github项目地址：

https://github.com/sishuguojixuefu/blog/new/master/source/_posts

创建md文件并保存，完毕。

注意在md文件头部添加必要的front-matter信息
，例如：

1
2
3
4

---
title: Hexo博客使用说明
date: 2020-01-08 18:53:59
---

站点会在push后自动部署，等待一段时间刷新网页即可。

1. 下载项目到本地，安装依赖

1
2

git clone https://github.com/sishuguojixuefu/blog.git blog
yarn install

2. 编写新文章

1

hexo new "文章标题"

通过命令创建文章，会自动根据scaffolds目录下的模板新建md文件。

文件开头的front-matter默认包含了一些动态生成的信息，比如文章的标题和时间。

3. 调试和预览

1

$ hexo server

启动后访问http://localhost:4000即可本地预览

4. 常用功能

分类与标签

在front-matter中填写，比如

1
2
3
4
5
6
7
8
9
10
11
12
13

---
title: 这是一个标题
date: 2020-01-08 22:52:13
categories:
    - [前端, 移动端]
    - [前端, PC端]
    - [算法]
tags:
    - Vue
    - React
    - 递归
    - 算法
---

注意分类category和标签tag的区别，后者类似关键字。

详情参考：https://hexo.io/zh-cn/docs/front-matter

插入本地图片

在source/_posts目录下创建与当前文章同名的文件夹，在其中放入图片等附件。

然后在md文档中插入以下代码即可显示存放在站点的本地图片。

1

{% asset_img 1.png %}

详情参考：https://hexo.io/zh-cn/docs/asset-folders

插入codepen在线代码

参考https://github.com/bibixx/hexo-tag-codepen#usage

进阶使用

更多高级应用请查看Hexo中文文档

本文由杭州前端团队齐霁分享

许多项目脚手架默认就会把src目录添加一个@别名，项目中实际引入时，虽然可以精简路径，但也带来一个很麻烦的问题：
IDE无法识别这些别名，因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

偶然发现vscode的web项目里有一个jsconfig.json文件，如：

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

只要有这个文件，vscode就可以正常识别出别名了。

后来发现JetBrains家的IDE更简单，配置指定一下就行：

在项目设置的webpack标签页里，将配置文件指向<projectRoot>/node_modules/@vue/cli-service/webpack.config.js即可。

保存并重新打开项目以后，不只src，所有的别名比如utils等等都可以被正常识别。

其实这都已经写在vue-cli3的文档里了，只是原始表述不太直观，被我一直忽略了。

本文由杭州前端团队齐霁分享

想实现一个转盘抽奖的需求，搜了一下现有的轮子，有的是用jQuery的动画函数实现的，有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法，前者太老了没法简单移植到vue项目，后者感觉性能表现可能不会太好。也有一些用CSS动画的方案，设计了加速-匀速-减速三个动画，再计算偏转角度让三个动画尽可能无缝衔接，但我感觉绕了大远路，应该有更简单轻量的实现方案。个人更倾向于用transition来实现，不过网上的例子感觉还不够好，有的倾斜文字都没有对齐，最后还是自己手写了一个。核心思路是用transition以及rotate实现旋转动画，使用transition-origin和rotate绘制出定位较为精确的轮盘奖项，同时支持动态设置奖品数量。