如何在 phabricator 中新增或更新 js 或 CSS 檔案資源?
參考資料: ofollow,noindex" target="_blank">Adding New CSS and JS
目前這篇 wiki 文件還沒有中文翻譯,大家可以權當是我對此的翻譯加自己的實踐總結吧。
給 phabricator 新增新的 CSS 和 JS 檔案
解釋如何向 Phabricator 新增新的 CSS 和 JS 檔案。
概述
Phabricator 使用一個名為 Celerity 的系統來管理靜態資源。 如果你是現任或前任Facebook員工,Celerity 基於 Facebook 使用的 Haste 系統,通常表現相似。
本文件適用於 Phabricator 開發人員和貢獻者。 對於第三方程式碼,外掛或擴充套件,此過程無法正常執行。
新增新檔案
要新增新的 CSS 或 JS 檔案,請在 phabricator/
中的 webroot/rsrc/css/
或 webroot/rsrc/js/
中的適當位置建立。
每個檔案必須 @provides
自己作為元件,在標題註釋中宣告:
/** * @provides duck-styles-css */ .duck-header { font-size: 9001px; }
請注意,此註釋必須是 Javadoc 樣式的註釋,而不僅僅是任何註釋。
如果你的元件依賴於其他元件(這在 JS 中很常見但在 CSS 中很少見且不可取),那麼請使用 @requires
宣告:
/** * @requires javelin-stratcom * @provides duck */ /** * Put class documentation here, NOT in the header block. */ JX.install('Duck', { ... });
然後重建 Celerity 對映(參見下一節)。
改變現有檔案
新增,移動或刪除檔案或更改現有 JS 或 CSS 檔案的內容時,應重建 Celerity 對映:
phabricator/$ ./bin/celerity map
如果您只更改了檔案內容,即使您沒有更改檔案內容,但如果您跳過此步驟,它們將來也可能無法正常工作。
生成的檔案資源 /celerity/map.php
經常導致合併衝突。可以通過執行 Celerity 對映器來解決它們。您可以通過執行以下命令自動執行此過程:
phabricator/$ ./scripts/celerity/install_merge.sh
這將安裝 Git merge 驅動,該驅動將在此檔案發生衝突時執行。
包含檔案
要在頁面中包含 CSS 或 JS 檔案,請使用 require_celerity_resource()
:
require_celerity_resource('duck-style-css'); require_celerity_resource('duck');
如果您的對映是最新的,則現在應該在呈現頁面時正確包含資源。
您應該將此調用盡可能靠近實際使用資源的程式碼,即不在 Controller 的頂部。 我們的想法是,只有當您在頁面的特定呈現中實際使用資源時,才應該 require_celerity_resource() 資源,而不僅僅是因為頁面的某些檢視可能需要它。
解決問題
為什麼我修改資原始檔,還是不生效呢?
如果你使用的是 bitnami docker-compose 版本,則,你可以直接通過 docker exec -it phabricator /bin/bash
進入容器,然後 cd /opt/bitnami/phabricator/webroot/rsrc/
進入到指定資料夾,修改你所需要修改的 js 或者 css 檔案。
然後你需要執行:
$ celerity map Rebuilding 1 resource source(s). Rebuilding resource source "phabricator" (CelerityPhabricatorResources)... Found 111 binary resources. Found 383 text resources. Found 10 packages. Writing map "/opt/bitnami/phabricator/resources/celerity/map.php". Done.
看到此內容即表示更新對映成功,你只需要重啟你的容器服務即可。
$ docker-compose restart phabricator
參考資料
茶歇驛站
一個可以讓你停下來看一看,在茶歇之餘給你幫助的小站,這裡的內容主要是後端技術,個人管理,團隊管理,以及其他個人雜想。