博客功能测试 - 旧框架（Hexo）

部署优化

利用 git branch 管理 hexo 源文件

新建一个 source 分支用于存储 hexo 源文件，master 分支存储生成后的 html,css,js 文件。已完成

利用 Vercel(原 Zeit) 托管静态页面

已完成

图床测试

直接存放在网站中,通过 Vercel 的 CDN 加速

使用路过图床

速度对比

左为部署在网站中右为使用图床

傍晚速度(18:00)

傍晚速度

晚上速度(21:00)

晚上速度

页面相关功能

代码块样式 - mac panel

TODO

数学公式 - MathJax

方程组

$$ \begin{equation}\label{2} \begin{cases} x_n=b_n^{(n)}/a_{nn}^{(n)},\\ x_i=(b_i^{(i)}-\sum\limits_{j=i+1}^n{a_{ij}^{(i)}x_j})/a_{ii}^{(i)} \end{cases} \end{equation} $$

公式换行

$$ \begin{equation} 　\begin{aligned} 　　f(x)& =f(x_0)+fx_0,x_1+fx_0,x_1，x_2(x-x_1)+\cdot\cdot\cdot \
&\ \ \ \ \ \ +fx_0,x_1\cdot\cdot\cdot,x_n\cdot\cdot\cdot(x-x_{n-1}) \
&\ \ \ \ \ \ +f[x,x_0\cdot\cdot\cdot,x_n]\omega_{n+1}(x) \
　　& =P_n(x)+R_n(x) 　\end{aligned} \end{equation} $$

矩阵

$$ \begin{bmatrix} 　　　　3.01 & 6.03 & 1.99 \
　　　　1.27 & 4.16 & -1.23 \
　　　　0.987 & -4.81 & 9.34 　　　　\end{bmatrix} 　　　　\begin{bmatrix} 　　　　x_1 \\ x_2 \\ x_3 　　　　\end{bmatrix} = 　　　　\begin{bmatrix} 　　　　1 \\ 1 \\ 1 　　\end{bmatrix} $$

流程图

饼图

pie title NETFLIX "Time spent looking for movie" : 90 "Time spent watching it" : 10

序列图

sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

较大的流程图

graph TB sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:4px;
    class sq,e green
    class di orange

小结

流程图的样式不对，部分较大的流程图会超出页面界限，在 mermaid 的说明文档中也存在这样的问题，估计是 mermaid 的 bug，修复需要自己自定义 css，比较麻烦。考虑到 markdown 中画流程图的语法也不简单，mermaid 生成的 svg 图片无法放大，因此弃用，除简单图外，均使用插入图片形式展示流程图。