organicCola's House

Organic cola is good for your happiness

0%

Posted on In

Pre

Mermaid语法简单，使用方便，但是对具体布局的调整比较难以把控，在一些专业画图软件里的布局在mermaid里也难以实习。只能遵循一些规则尽量让布局符合我们的预期。

关于mermaid布局

  1. 尽量使用TB而不是TD，TD不一定能按照top/bottom排列
  2. flowchart 支持嵌套/ graph 不支持嵌套subgraph
  3. 代码顺序不影响拓扑关系，但是有可能会影响布局。
  4. flowchart TB 支持 subgpaph direction BT，而graph TB不支持
  5. mermaid 中只要是相邻元素的连线方向会尽量保持与主方向。虽然拓扑不受影响，但是布局会受影响的，必须时刻注意，否则被强行调整元素位置可能会生成非期望的布局；未与外界直接相连的subgraph内的元素，可以通过direction控制方向。
  6. 注意元素之间在没有连线的情况下，默认与主轴交错防抢排列，并且默认顺序与添加语句顺序是颠倒的，最后添加的排在最前面；
  7. mermaid连线时可能会强行调整元素位置，目前发现以下一些原则：
  • 会将流程靠前的元素放到主轴方向的开端
  • 位置靠前的元素以及其内部元素更不容易被调整位置
  • 会尽量调整元素布局以使得连线最短

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
```mermaid
flowchart　TB
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
A' --> D
A --> D'
```
flowchart　TB
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
A' --> D
A --> D'

分析

  • 由于a的布局位置考后，更容易被调整位置，并且其内部是首尾相接的结构，允许其调整元素顺序而拓扑结构不变，为了使A –> D’ 连线尽量短，会把D’调整位置到顶端，所以看起来元素顺序有点不符合预期。
  • subgraph a 和 subgraph b 如果交换代码位置，subgraph a 由于代码位置靠后，所以布局靠前，更不易被调整位置，所以abcd按照主轴方向依次向下排列，这样看起来顺眼多了。
1
2
3
4
5
6
7
8
9
10
11
12
13
```mermaid
flowchart　TB
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
A' --> D
A --> D'
```
flowchart　TB
subgraph b[Left]
  direction TB
  A --> B --> C --> D
end
subgraph a[Right]
  direction TB
  A' --> B' --> C' --> D' --> A'
end
A' --> D
A --> D'

Posted on In

Pre

当使用Hexo时不可避免的我们要使用一些主题，当主题的默认设置无法满足我们要求时候我们不可避免的要对其进行一些修改。一般我是用git clone下来主题去掉他原来的git，将其纳入我的blog文件夹的git管理下。
当主题发布了新版本我们可能会需要升级主题，或者旧版本无法满足要求需要升级到新版本，这时候就涉及到“迁移之前对主题文件进行的修改”问题。
这时候我们就需要知道究竟修改了哪些文件，然后在把修改迁移到新的主题下。

1. 一种朴素的方法，找出不同，手动迁移

在bolg仓库git下使用diff
head~3 是刚加入主题时的提交
将对比限定在对应主题文件夹下

1
git diff  head~3 themes/next

然后手动把修改的内容迁移到新下载的theme中

2.升级的半自动方法

将现在的主题文件夹复制替换掉新版本的主题文件夹里的内容，只保留自己需要的迁移的一部分更改，git add 到贮存区，其余的全部restore状态。完成后去掉.git文件夹，回归到blog文件夹的git管理下。

1
2
git add ****.**  ****.**
git restore .

3. 仍然使用主题自己的git管理，较自动的方法

一开始就不去除主题仓库的git，每次更改进行提交，当主题有更新时候拉取，与你的本地提交进行合并。注意检查你的更改在合并之后是否正确。
缺点是theme主题的不在blog的git管理之下，并且更改不能进行push，只能在本地。。。但是也许可以通过新建另一个远端仓库来进行push。

一般很长时间才会去升级主题，并且修改的内容也不多，所以目前我是使用第一种手动的方式，手动的也可以是很可靠的～

Posted on In

1. 使用mermaid，大致上有两种方法：

1.1如果你的主题是Next，那么可以直接使用next主题内置的

直接修改next主题文件夹下“_config.yml”中mermaid属性为true，就可以直接使用了。

1
2
3
4
5
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: neutral

注意：如果要使用```mermaid的语法，有一些需要注意的地方。见2.2

1.2 使用单独的mermaid插件的方式，比如hexo-filter-mermaid-diagrams

经试验，如果使用hexo-filter-mermaid-diagrams, 那就需要按照官方提供方法的方法进行设置
1.2.1 安装 

1
npm install hexo-filter-mermaid-diagrams --save

1.2.2 修改js这一步按照官方操作无法成功的话可能是theme.mermaid.变量无法正常获取导致的，去掉原本的判断条件
下面是官方提供的片段 

1
2
3
4
5
6
7
8
{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}

下面是修改后的

1
2
3
4
5
6
<script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
  mermaid.initialize({ theme: 'default' });
}
</script>

2. 关于语法

2.1 下面为next内置的一种写法，（与github默认支持的不兼容，无法在github预览中正常显示）

1
2
3
4
5
6
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

2.2 下面为Fenced Code Blocks风格的写法，hexo-filter-mermaid-diagrams 中和next中都可以常显示（与github默认支持的兼容）

2.2.1 如果是较高版本，next本身已经提供了支持，不过需要在hexo中添加block高亮例外:
1
2
3
4
5
"_config.yml"

highlight:
  exclude_languages:
    - mermaid

reference: mermaid部分能不能像typora一样

2.2.2 较低版本则需要自己处理字符串或者安装hexo-filter-mermaid插件

npm install hexo-filter-mermaid-diagrams --save
关于 hexo-filter-mermaid-diagrams，本质是使得由markdown语法Fenced Code Blocks转写成<pre>标签，这个库并不真正的执行渲染，可以点进去看源码里面基本上就是一个字符串处理的过程

1
2
3
4
5
6
7
8
``` mermaid
flowchart TD;
A-->B;
A-->C;
B-->D;
C-->D;
D-->E;
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
D-->E;

3.调整mermaid显示效果

3.1 找到next主题mermaid初始化的地方，可以在这里对mermaid进行进一步的自定义设置

可能根据版本会有差异，大致是类似下面的一段代码
比如我把线条的直线改成来basis基础曲线

1
2
3
4
5
6
7
mermaid.initialize({
  theme    : '{{ theme.mermaid.theme }}',
  logLevel : 3,
  flowchart: { curve     : 'basis' },
  gantt    : { axisFormat: '%m/%d/%Y' },
  sequence : { actorMargin: 50 }
});

3.2 mermaid位置，居中显示,

(如果是较高版本可能已经默认居中了，不需要手动修改)
通过添加css来实现
我是放在了 themes/next/source/css/main.styl
添加居中

1
2
3
4
/*mermaid图居中*/
.mermaid{
  text-align: center;
}

Posted on In

Pre

使用github pages搭建博客的时候突发奇想新建一个账户。
原因是pages域名直接和你的账号名挂钩，一是直觉上让我不舒服，二是想换个别的名字。

Issue

新建账户很简单按流程操作，不过当添加ssh-key的时候遇到了问题。
ssh-key is alreay in use
意思这个key已经被添加进github过了。github规定一个key只允许被一个账户使用，只能添加一次，就是说不同的账户必须用不同的key。

Solution

解决思路也很简单，就是在新建另外一个key用于新建的账号。
不过有个问题要注意下，那就是当我们电脑中只有一个ssh-key的时候可能一路默认配置就完事了，但是当存在多个key的时候怎么在不同情况下使用特定的key呢？
答案是ssh-agent以及ssh的config文件，它们就是用来控制ssh相关的种种行为的。

Steps

生成key，注意保存为新的rsa文件，防止覆盖了你的原先的。

1
2
3
$ cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "new@github.com"
$ Enter file in which to save the key (/Users/******/.ssh/id_rsa): id_rsa_new

将key 加入ssh-agent

1
2
3
eval "$(ssh-agent -s)"
Agent pid 2897
ssh-add -K ~/.ssh/id_rsa_new

Edit config file

为新的账号配置进行连接要使用的key。

1
2
3
4
Host new.github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_new

这里解释下Host和HostName的作用，
Host是你进行连接时你输入给系统的字面值，系统会根据Host来找到HostName，实际连接用的是Hostname的值。
看一段解释

1
2
3
4
5
6
7
8
9
10
"About difference between host and hostname"

  Host host1
      HostName host1.example.com
  Host host2
      HostName anotherdomain.com

"Then when you type"
"ssh host1 : you actually login to host1.example.com"
"ssh host2 : login to anotherdomain.com"

有可能你会疑惑为什么要多此一举，直接HostName不就行了？
事实一般也确实没有要多一道这个转换的，所以一般情况下这两个值是一样的。不过有时候这个设置会很有用，比如现在我们遇到的情况：
我们要区分的两个账号都是github账号，没有办法按照域名来区分，虽然我们知道哪个仓库该用哪个地址，但是对系统来说都是连接的同一个Host，也只会使用同一个ssh-key，这样会因为key不对而连接失败。
这时候Host就派上用场了，注意我上面配置文件里，Host写的是new.github.com，但是HostName是github.com。

当我连接新账号的仓库时我会这么写，
git clone git@new.github.com:****/*****.git
当我连接旧账号的仓库时我会这么写，
git clone git@github.com:****/*****.git
它们实际上都还是连接的正常的github.com，但是会使用不同Host里的配置，从而使用不同的key，这样就成功进行了区分。

Add Public key to your new created account

cat ~/.ssh/id_rsa_new.pub | pbcopy .

Test

1
2
3
4
$ ssh -T git@github.com
Hi OriginUserName! You've successfully authenticated, but GitHub does not provide shell access.
$ ssh -T git@new.github.com
Hi NewUserName! You've successfully authenticated, but GitHub does not provide shell access.

⚠️ Pay Attention When Use

当你想使用新账户下仓库时，你连接时写的仓库url就需要改成Host的值， 上面提到过

Posted on In

randomly type something here

1
2
$ hexo generate
$ git commit
1
2
let varOne = "string test"
varOne.append("anotherString")
tableSample name amount
person zhangsan 3
person zhaosi 4
person wangwu 5
person whoisthat 6
person shitman 7

avatar

Posted on In

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment