內容簡介
這是一種簡單的方式,如何在您的文章中嵌入 React 應用程式。在我的部落格中,我想要加入小型應用程式,但是典型的 React 應用程式是單頁應用程式,很難在 index.html 中進行鏈接。我需要一個簡單的方式來解決它。結果可以在我的部落格上看到,例如:嵌入 Google 相片相簿。
如何操作
您需要在公共 URL 上託管編譯後的 React 應用程式。在應用程式建置後找到檔案名稱。如果您使用 create-ract-app 腳本,所有需要的東西都在“靜態”目錄中。將文件名組裝成類似這樣的短代碼:
[reactapp id="root" js="pathto/static/js/main.000000.js" css="pathto/static/css/main.000000.css"]
[reactapp id="custom_id" "pathto/static/js/main.000000.js" "pathto/static/css/main.000000.css" "pathto/static/css/another.css"]
id – 應用程式根元素的 ID
js[n] – 路徑到 JavaScript 封裝
css[n] – 路徑到樣式表
(文件根據 js/css 副檔名自動檢測)
就這樣。
當應用程式更新時,您必須設置新的短代碼連結。
如果您想要更多有關此外掛的資訊,您可以訪問我的部落格中的在 WordPress 文章中嵌入 React 應用程式文章。
1.0.1
發布日期 – 2019 年 1 月 18 日
為了新的 React 建置相容性而插入多個腳本。
1.0.0
React 應用程式短代碼。
外掛標籤
開發者團隊
原文外掛簡介
This is a simple way how to embed react application in to your post. In my blog, a wanted include small application, but typical react app is a single page app, hardly linked in index.html. He needed a simple way to solve it. The result is visible on my blog, for example: Embeding Google Photos album.
How to do it
You need compiled React app hosted on public url. Find filenames after building an application. If you using create-ract-app script, all what you need, find in “static” directory. Assemble file names into a shortcode like this:
[reactapp id="root" js="pathto/static/js/main.000000.js" css="pathto/static/css/main.000000.css"]
[reactapp id="custom_id" "pathto/static/js/main.000000.js" "pathto/static/css/main.000000.css" "pathto/static/css/another.css"]
id – ID of application root element
js[n] – path to Java script bundle
css[n] – path to Stylesheet
(files are detected automaticly by extension js/css)
That’s all.
When application was updated, you must setup new links to shortcode.
If you want to more information about this plugin, you may visit Embedding a React Application to WordPress post post in my blog.
1.0.1
Release Date – 18 January 2019
Multiple script insert for new react build compatibility.
1.0.0
React application shortcode.
