內容簡介
這是這個外掛的簡要說明，不超過150個字符。這裡不包含標記。
haxtheweb
將 HAX 塊編輯器引入 ClassicPress 和 WordPress。 HAX 是 Headless Authoring Experience 的縮寫，意思是它是一個與使用它的 CMS 斷開連接的塊編輯器。 HAX 通過使用網絡組件標準來識別可以編輯的塊。 HAX 以專家終端用戶可以書寫的方式提供編輯功能，但不需要修改代碼！代碼是以 webcomponents 的語義方式編寫的，這樣專家和開發人員就可以隨時跳入修改。
第三方依賴
雖然您可以在本地托管資產，但 HAX 編輯器默認會利用賓夕法尼亞州 Web 組件 CDN。
您可以在「設置 -> 撰寫」頁面上進行修改。 有關此服務的其他詳情：
- 賓夕法尼亞州 CDN 域 https://cdn.webcomponents.psu.edu/ 由 Amazon CloudFront 提供
- 您可以在此處 https://webcomponents.psu.edu/ 瀏覽通過 CDN 公開的資產，使用 StorybookJS
- 大學遵循的隱私策略：https://policy.psu.edu/policies/ad53
- HAX 和 WebComponents 的來源是可配置的，您可以更改它以利用自己的（詳細信息如下）
依賴項
如果使用WordPress，您需要取得 Classic Editor 插件
ClassicPress 沒有此依賴項
請確保您的永久鏈接設置為漂亮的鏈接，否則對 JSON 調用加載數據的調用將失敗 https://stackoverflow.com/questions/44204307/rest-api-init-event-not-fired
用法
這會提供您開始所需的依賴項。
1. 下載此外掛並將其放置在 wp-content/plugins/haxtheweb
2.如果使用 WordPress，您還需要 Classic Editor 插件；然後您必須啟用它作為默認編輯器（wp-admin/options-writing.php）
3.啟用插件（wp-admin/plugins.php）
4.確保設置 -> 永久鏈接設置為「文章名稱」
5.轉到「設置 -> 撰寫」並向下滾動以更改您的設置
6.編輯或創建新頁面/帖子
7.享受 HAX 的編輯功能
配置
HAX 將選項添加到撰寫設置頁面（wp-admin/options-writing.php），以允許進一步的集成和自定義，儘管默認設置可用於快速啟動。
使用注意事項
默認情況下，使用 CDN 提供 HAX 和其 WebComponents 所需的 Javascript。 我們會推薦您在使用 HAX 進行生產時，查看本地建構程序（如下所述）或利用一個更快的 CDN。
在「尋找」區域中連接其他「應用程式」
要連接到 YouTube、Flickr 和 Vimeo 等熱門服務，您需要 API 金鑰。 您可以找到有關如何獲取這些金鑰以及將其放在「撰寫設置」（wp-admin/options-writing.php）頁面上的詳細信息。
前端開發人員
如果需要，您可以從源代碼構建 HAX。 HAX 默認使用 CDN，這將有效地指向此目錄或其某些變種 https://github.com/elmsln/HAXcms/tree/master/build。
如果您希望從源代碼構建所有內容，您可以使用以下命令：
外掛標籤
開發者團隊
原文外掛簡介
Here is a short description of the plugin. This should be no more than 150 characters. No markup here.
haxtheweb
Bringing the HAX block editor to ClassicPress & WordPress. HAX is short for headless authoring experience, meaning that it is a block editor that is disconnected from the CMS its used in. HAX recognizes editable blocks by using the web component standard. HAX provides editing capabilities in a way that attempts to write clean HTML markup the same way an expert end-user could, but without ever touching code! The code is writen in a way that experts and developers can jump in and modify as needed given the semantic nature of webcomponents!
3rd party dependencies
While you can host assets locally, the HAX editor defaults to leveraging the Penn State Web components CDN.
You can modify this on the Settings -> Writing page. Additional details on this service:
– Penn State CDN domain https://cdn.webcomponents.psu.edu/ is served from Amazon CloudFront
– You can view assets that are exposed via CDN here https://webcomponents.psu.edu/ in StorybookJS
– Privacy polcies the university adheres to: https://policy.psu.edu/policies/ad53
– The source of HAX and your web components is configurable and you can change it to leverage your own (details below)
Dependencies
If using WordPress, you’ll need to get the Classic Editor plugin
ClassicPress does not have this dependency
Make sure that your Permalink settings are for pretty links or calls to load data via JSON will fail https://stackoverflow.com/questions/44204307/rest-api-init-event-not-fired
Usage
This should give you the dependencies you need to get going.
1. Download this plugin and place it in wp-content/plugins/haxtheweb
2. If using WordPress you’ll also need the Classic Editor plugin; and then you’ll have to enable it as the default editor (wp-admin/options-writing.php)
3. Enable the Plugins (wp-admin/plugins.php)
4. Make sure Settings -> Permalinks is set to “Post name”
5. Go to Settings -> Writing and scroll down to change your settings
6. Go to edit or create a new page / post
7. Enjoy HAX’ing the web
Configuration
HAX adds options to the Writing Settings page (wp-admin/options-writing.php) to allow for further integrations and customizations though the default settings are fine to get up and started with.
Note on usage
The default is to serve the Javascript required for HAX and its web components from a CDN. We default to a Penn State mirror of the required assets so you can get up and running quickly. We recommend that if you choose to go into production with HAX, that you look at doing a build routine locally (outlined below) or leveraging one of the faster CDNs available.
Hooking up additional “apps” in the “Find” area
To connect to popular services like YouTube, Flickr, and Vimeo you’ll need an API key. You can find details on how to get these keys as well as where to put them on the Writing Settings (wp-admin/options-writing.php) page.
Front end Developers
You may build HAX from source if needed. HAX defaults to use CDNs which will effectively point to
this directory or some mutation of it — https://github.com/elmsln/HAXcms/tree/master/build
If you want to build everything from source, your welcome to use yarn / npm to do so though our
build routine effectively will end in the same net result. If you want to do custom build routines
such as rollup or webpack and not use our prebuilt copies / split build approaches, then your welcome
to check the box related to not loading front end assets in the settings page in order to tailor
the build to your specific needs.
Getting dependencies
You need polymer cli (not polymer but the CLI library) in order to interface with web components in your site. Get polymer cli installed prior to usage of this (and (yarn)[https://yarnpkg.com/lang/en/docs/install/#mac-stable] / an npm client of some kind)
bash
$ yarn global add polymer-cli
Perform this on your computer locally, this doesn’t have to be installed on your server.
Usage
Find CopyThisStuff directory in /wp-content/plugins/haxtheweb.
create a /wp-content/haxtheweb directory
copy the files from CopyThisStuff into /wp-content/haxtheweb
Then run the following (from the directory you copied it over to) in order to get dependencies:
bash
$ yarn install
Now run polymer build and you’ll have files in build/ which contain everything you’ll need to get wired up to web components in your site. Modifying build.js or package.json can be used in order to get new elements and have them be implemented.
Shouldn’t I put web components in my theme?
We don’t think so. While it may seem counter intuitive, the theme layer should be effectively implementing what the site is saying is available. If you think of standard HTML tags are being part of this (p, div, a, etc) then it makes a bit more sense. You don’t want functional HTML components to ONLY be supplied if your theme is there, you want your theme to implement and leverage the components.
New to web components?
We built our own tooling to take the guess work out of creating, publishing and testing web components for HAX and other projects. We highly recommend you use this tooling though it’s not required:
– https://open-wc.org – great, simple tooling and open community resource
– https://github.com/elmsln/wcfactory – Build your own web component library
– https://github.com/elmsln/lrnwebcomponents – Our invoking of this tooling to see what a filled out repo looks like