# 开始写博客了

终于，自己的小站逐步建立了起来。

这是我写的第一篇博客文章。许多年来，自己兜兜转转直到今天才建立博客站，充分说明了一个问题：自己比较懒😄。有人说正视自己的缺点是改正的开始（也许），但愿如此。从事程序开发这项工作，眼界需要开阔，也需要脚踏实地的实践。人脑毕竟不是电脑，有些自己才有的感悟是应当积累下来的。虽然这些年自己没有写什么博客文章，不过也积累了不少笔记。从遇到问题的解决方案，到研究过程中的参考资料，还有自己编程实践所得的结果，连篇累牍都塞进了各类笔记软件里。对于指导自己的工作确实大有裨益。今天，希望自这篇文章始，也能慢慢丰富这个小小站点的内容。

既然自己做的是程序开发，热爱前端方向。那就从这个站点的前端说起吧。

# 小站的前端

整个站点其实算一个静态站，利用Vuepress框架来搭建。 Vuepress本来是用来快速生成技术文档的工具，比如你开发了一项技术或者框架，想要详细的讲解其中原理、使用方法或理念等等，都可以使用它来搭建。每篇文档用markdown格式写好，就可以自动生成对应的网页，简单快捷。此外官方还提供了很多有用的API对生成的静态页面进行定制，并且可以开发主题和利用插件增强功能。于是搭建简单静态博客站所需功能也就基本齐备，自然可以用它来做一些事情了。

对于我搭建的这个小站而言，Vuepress官方提供的默认主题自然是无法满足个性化的需要。于是，我便想开发一个自己喜欢的主题，不仅能吸收默认主题的优点，还能添加一些需要的功能。

全部站点和主题的开发，基本遵循了Vuepress的理念。博客文章使用markdown格式撰写即可。根据文章中的元信息和站点的用户配置，可以提供文章列表、分类、标签和年度归档等功能。主题的设计是从花瓣网上找来的一个概念图参考制成，颜色方案则是取自Adobe Color，最后通过墨刀制作网站原型。其他的界面、样式和功能开发则和普通的vue项目没有太大的区别，所要注意的是，静态站的生成过程其实是一种SSR（Server Side Render），准确的说是SSG(Server Side Generate)。有一些坑，但是填平的难度并不大（有道是易则行之，难则绕之，其实自己偷懒规避了不少难点 (￣▽￣)V ）。

# 嵌入代码

在文章中嵌入代码示例是比较重要的功能。我很喜欢vuepress默认主题提供的嵌入代码tab切换功能，于是边研究源码边实验，也弄了一套类似的机制。下面展示了一个例子：

<div class="welcome">您好</div>

.welcome {
  font-size: 16px;
}

console.log('Hello, world');

代码块是利用prismjs提供的解析功能和代码主题文件。进行了一些小小的修改，增加了几个实用功能。

 

 
 

var a = 1;
var b = 2;
var c = 3;
var d = 4;

let a = 1;
let b = 2;
let c = "abc";

# Badge内置组件，可以做点有趣的事

Badge内置组件在默认主题中也有提供，但是应用了自定义主题之后就无法再使用，所以依照默认主题的功能进行复刻开发。

<Badge type="tip" text="^o^" vertical="middle" /> 
<Badge type="warning" text="=.=" vertical="middle" /> 
<Badge type="danger" text="-_-|||" vertical="middle" />

渲染出来是这样的：

• 这是提示文字 垂直居中对齐 - 呵呵 ^o^
• 这是一段需要注意的文字 顶对齐 - 额 =.=
• 这是一段需要警告的文字 底对齐 - 这个嘛... -_-|||

# 自定义容器，也是简单好用

自定义容器也是默认主题中的亮点，结合本站的主题，也进行了复刻：

console.log('Hello world!');

# 使用表情

😄 😆 🏥 🌕

# 图片轮播

# markdown主题样式

默认主题的markdown样式相当简洁美观，不过自定义主题并不是继承自默认主题，所以要么需要自己找一套，要么开发一套。 于是继续埋头苦干，制作了一套md主题风格：

# 文字

普通文字

强调文字

粗体文字

斜体文字

# 引用

这是一段引用 这是第二段引用

# 列表

列表也做了相应的样式

# 无序列表：

• 春花秋月何时了，往事知多少
• 朝辞白帝彩云间，千里江陵一日还
• 沉舟侧畔千帆过，病树前头万木春
• 春蚕到死丝方尽，蜡炬成灰泪始干

# 无序列表分级

• 列表一级
  • 列表二级
    • 列表三级
      • 列表四级
        • 列表五级

# 有序列表：

1. 昨夜西风凋碧树，独上高楼，望尽天涯路
2. 衣带渐宽终不悔，为伊消得人憔悴
3. 众里寻他千百度过，蓦然回首，那人却在灯火阑珊处。

# 表格

# 图片

# 链接

这是一个链接

# 选项列表

• Plan A
• Plan B

# 公式

公式支持latex格式。

行内:

Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.

块语法:

$$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}$$

# 标题

# 大标题

# 二标题

# 三标题

# 四标题

# 五标题

# 六标题