在页面中嵌入React等小应用

Halo博客前端是使用Freemaker渲染出来的，我自己前端是react用的比较多，因此考虑能不能引入react应用，尝试了一些发现可以，在此记录下

一、创建react-app

我是使用creat-reatc-app脚手架直接创建

1.安装create-react-app

npm install -g create-react-app

2. 创建react应用

create-react-app project-name

其中的project-name替换成项目名

3. 创建完成

创建完成后会有以下几个目录和文件

可以运行

npm run start

来运行react应用

二、打包

当你完成你的应用后，可以运行build来进行打包

npm run build

build之后会出现build文件夹

三、导入

这个时候可以直接把生成的html重命名为ftl后上传到主题中，然后把static文件夹放到可以引用的地方，然后再模板中引入即可，需要注意的是index.html中的资源和链接需要修改为可以访问的路径
然后按照halo开发文档中主题模板的标准，再sheet_xxx.ftl中引入index.ftl即可，例如：

<#include "module/index.ftl">

四、使用CDN

jsdelivr是一个目前免费的CDN，可以直接从GitHub上的仓库中获取文件

1. 创建Github仓库

可以直接在github上创建一个新的仓库
也可以直接使用git命令

2. 上传刚才创建的react项目

3. 创建Tag

使用git tag创建版本，例如v0.1

4. 引用

https://cdn.jsdelivr.net/gh/kiritoghy/repo@version/path/file

五、未涉及

这次引用没有使用到对后台发起请求，但是想来应该也差不多，不过不知道会不会涉及到跨域问题