如果我在写React的博客的时候能够插入相应的实现效果岂不是更妙？
1. 在博文模板中加载React
Jekyll的html文件是作为layout存在，并在layout中提取出可以重用的部分放在_include目录下。 在本博客结构中，一般博客使用的post layout包含于default layout，而其中用head.html加载了脚本部分。 因此，在head中使用如下代码加载React。
此外，还可以使用Liquid判断语句if page.react==true根据文章的头文件的’react’标签决定是否需要加载该部分。
如果进行了这个设置，不要忘了在文章开头的meta部分添加react: true来加载React。
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
2. 在文章中添加DOM容器
这里我们类似附录中的教程，希望加载一个Like按钮。
Jekyll的博文都是用Markdown写的，也可以在其中插入HTML片段，因此我们可以简单地用这样的<div>标签添加想要的React组件位置。
<div id="like_button_container"></div>
3. 定义React组件
3.1 定义组件基本功能
我们需要加载Like按钮，因此新建一个like_button.js文件，代码来自参考链接。
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
3.2 链接组件和DOM容器
在上述步骤中，已经定义了组件，接下来我们需要用DOM的选择器将React组件嵌入在html文件里定义的容器中。
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
4. 在文章中加载脚本
当前三步做完后，只需要在刚刚添加组件的位置加载like_button.js文件即可。
<body>
<div id="like_button_container"></div>
<script src="like_button.js"></script>
</body>
但需要注意的是，在这里script的src直接引用了js文件的名字，但Jekyll会默认到这篇博文所在的“目录”下找这份文件。 这个“目录”并不是实际的文件路径，而是这篇文章的Permalink的地址。
permalink地址的定义方式有如下几种：
- Front Matter：在文章的开头meta部分定义
- Global：在配置文件
_config.yml中利用占位符定义
我们这里将Permalink定义在配置文件中，定义的表达式如下：
permalink: /:categories/:title/
因此，我们js文件放置的目录应该对应于本篇博文对应的category层次结构，即定义在front matter中的categories: [technology, javascript]。这与本文的url结构也是一致的，这样Jekyll就能正确地找到js文件的位置。
.
├── technology
└── javascript
└── How-to-embed-React-component-in-Jekyll
└── like_button.js
此外，我们还可以在上述文件夹下添加样式，也可以正确地加载进来。最终文章中的代码片段如下：
<div>
<div id="like_button_container"></div>
<link rel="stylesheet" href="like_button.css" type="text/css" />
<script src="like_button.js"></script>
</div>
5. 效果展示
这样我们就可以在文章中拥有一个自己定义的React组件。