Halo页面中嵌入React等小应用

在页面中嵌入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. 创建完成

创建完成后会有以下几个目录和文件
image.png
可以运行

npm run start

来运行react应用

二、打包

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

npm run build

build之后会出现build文件夹
image.png

三、导入

这个时候可以直接把生成的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项目

image.png

3. 创建Tag

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

4. 引用

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

五、未涉及

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