我修改了这个项目的源代码,现在它支持直接在博客页面写html了。

查看代码

我想试一下这个博客有多牛逼。。结果竟然支持在里面直接写react

页面的代码是

但是有个缺点:换号的时候会自动给我加 p 标签。我要想一个办法解决。。。

<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.22.17/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>


<script type="text/babel">
function App(){
  let  [a,setA] =  React.useState(1)
  
  return <>
<div>数字:{a}</div>
<button onClick={()=>{setA(a+1)}}>加一</button>
</>
}

// 使用createRoot来渲染应用
const rootElement = ReactDOM.createRoot(document.getElementById('root'));

rootElement.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
</script>

<div id="root"></div>

下面是运行后的结果:

m1 芯片不能直接 npm install canvas,会报错。

Github上的解决方案:
https://github.com/Automattic/node-canvas/issues/1733

Ok, I somehow got it to work but I really don't know what I changed... I assume you ran brew install pkg-config cairo pango libpng jpeg giflib librsvg at some point? The only thing I remember doing was running brew doctor once, then npm uninstall canvas and npm i canvas --save

1. 安装依赖

brew install pkg-config cairo pango libpng jpeg giflib librsvg 

2. 删除 node_modules 重新安装

rm -rf node_modules
npm install