我想建立一个无头 WordPress + React 网站。
我成功地完成了“非古腾堡”的内容(页眉、页脚等),并且一切正常。
我的问题是帖子内容。我可以在 JSON 中获取其 html 样式。 如果我在 React 中编写样式,那么它在前端看起来没问题。
但是我应该把古腾堡的CSS放在哪里,这样它才能在后端和前端的古腾堡编辑器中工作?
我的 json 示例:
"content": {
"rendered": "\n<p class=\"has-text-color has-accent-color\">Some Random lorem ipsum in a paragraph</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg\" alt=\"\" class=\"wp-image-13\" srcset=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1024x288.jpg 1024w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-300x84.jpg 300w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-768x216.jpg 768w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1536x432.jpg 1536w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1200x338.jpg 1200w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
"protected": false
},
所以我用JSON发送
has-text-color
,has-accent-color
等类,但我不想在前面和后面写两次CSS
有没有一种解决方案可以让一种CSS同时适用于两种情况?
我目前想到的工作流程(或解决方法?)是这样的:
所以基本上一个块可以保存为类似:
<div class="wp-block-myblocks-foo">Foo</div>
在 React 方面,它会类似于这样:
export default function Foo({ fooContent }) => (
<div
className="wp-block-myblocks-foo"
dangerouslySetInnerHTML={{__html: fooContent}}>
</div>
)
虽然样式表看起来像:
.wp-block-myblocks-foo {
color: tomato;
}
* 也许前端样式表可以在生成(或构建)过程中上传到 CDN,以进一步与 WP 解耦?
也许这个解决方案更适合 SSR 应用程序,因为您需要拉取外部样式表。
无论如何,希望这可以让更多人思考这个安排的解决方案!
现在有好的解决方案吗?我面临三个同样的问题