gulp 目錄:保存環境的各種建置腳本以及必須在其中定義目標代理伺服器的config.js設定檔。
node_modules目錄:保存系統運作所需的各種第三方模組。這些模組在package.json檔案中定義。
packages 目錄:一旦您的開發包準備就緒,您將能夠使用gulp create-package
命令構建它,該命令將創建您在此資料夾中定義的壓縮包文件
primo-explore 目錄:由 2 個目錄組成:
開發包可讓您配置以下頁面元件(請點擊連結以了解詳細資訊):
CSS
超文本標記語言
圖片
JavaScript
對於每種組態類型或每種不同的 Primo 視圖,在primo-explore/custom
包資料夾中應該有一個以視圖命名的指定資料夾(遵循已建立的目錄結構)。
這個自訂視圖資料夾可以從您的Primo後台下載,透過Primo Home > Primo Utilities > UI customization Package Manager
,或從primo-explore-package GitHub儲存庫重新開始。 (使用此儲存庫的好處是,在每個資料夾中,您會找到一個包含食譜和範例的特定 README.md 檔案。)
注意:如果您不是電腦的管理員,您可能會在下面的流程中遇到問題,我們建議在以下說明提到時使用「Node.js 命令提示字元(在您的電腦中搜尋cmd 來找到它) ”命令列”。
從該存儲庫下載項目並將其放置在您的電腦上
將下載的檔案解壓縮到首選開發項目資料夾位置
下載並安裝節點版本16.17.0
重新啟動計算機
從命令列運行命令: npm install -g gulp
在新的命令列視窗中,導覽至專案基目錄 ( cd pathtoyourprojectfolderprimo-explore-devenv
)
從命令列執行命令: npm install
(這應該安裝 gulp 所需的所有節點模組。)
編輯 Gulp 設定檔的代理伺服器設置,可在gulp/config.js中找到: var PROXY_SERVER = http://your-server:your-port
(請確保使用真實的 Sandbox 或 Production Primo 前端 URL。)請注意,對於SSL 環境(HTTPS) 定義伺服器為: var PROXY_SERVER = https://your-server:443
透過從Primo 背景下載視圖程式碼檔案或使用primo-explore-package GitHub 儲存庫,將您的自訂視圖包資料夾填入自訂包資料夾(“...primo-explorecustom”)中,以啟動新的包資料夾。 (如果您已經定義了視圖包並將其加載到 BO - 請確保下載它,否則您將看不到並且可能會覆蓋您先前的更改。)
如果您的自訂視圖套件資料夾名為“Auto1”,那麼您的開發環境目錄樹應類似於以下內容:
重要提示:自訂視圖套件資料夾的名稱必須與所引用的代理伺服器上的現有視圖匹配,否則 Gulp 伺服器將無法正常運作。對於從頭開始的開發,請務必先使用 Primo 後台視圖精靈建立(或複製)視圖;然後您可以使用此文件在本地完成自訂。
開始您的程式碼自訂:
從命令列執行命令: gulp run --view <the VIEW_CODE folder>
(這將啟動您的本機伺服器。)
(例如,執行gulp run --view Auto1
將啟動環境,從Auto1資料夾中取得自訂內容。)
對於 Primo VE 客戶,請新增 --ve 標誌: gulp run --view <the VIEW_CODE folder> --ve
開啟瀏覽器並輸入下列 URL: localhost:8003/primo-explore/?vid=your-view-code
(範例:http://localhost:8003/primo-explore/search?vid=Auto1)
對於 Primo VE 客戶,請開啟以下 URL: localhost:8003/discovery/?vid=your-institution-code:your-view-code
現在,您應該能夠從先前定義的代理伺服器中使用真實的搜尋和結果進行自訂。注意:一旦您開始使用此環境,您就會發現在瀏覽器的隱身模式下工作可以獲得最佳結果;或者您可以在啟動 Gulp 伺服器之前清除瀏覽器快取。
您可以透過刷新瀏覽器獲得有關程式碼變更的即時回饋。
根據以下文件/範例執行變更:
CSS
超文本標記語言
圖片
JavaScript
注意:您有多個選項來編輯 css 檔案(custom1.css)和 js 檔案(custom.js),其中一些選項包括將開發內容拆分為單獨檔案的方法。使用此類方法時 - 執行 gulp 時,custom1.css 和 custom.js 檔案將被不同的檔案覆蓋。將自訂 css 和 js 放入具有不同名稱的檔案中,例如 custommodule.css 或 custom.module.js,以將其連接到自訂 css/js 檔案中。
完成套件的自訂後,您可以壓縮目錄並使用 Primo BackOffice 上傳它。
在命令列視窗中,導覽至專案基目錄: cd pathtoyourprojectfolderprimo-explore-devenv
從命令列執行命令: gulp create-package
將提示您一個選單,指定您可以建置的所有可能的套件,例如:
登入 Primo Back Office 並導覽至UI Primo Home > Primo Utilities > UI customization Package Manager
製化套件管理器
使用檔案瀏覽按鈕尋找並上傳新的壓縮包檔案。 (位於「pathtoyourprojectfolderprimo-explore-devenvpackage」目錄中。)
不要忘記部署您的更改
完成套件的自訂後,您就可以將其發佈到 Primo-Studio。
在命令列視窗中,導覽至專案基目錄: cd pathtoyourprojectfolderprimo-explore-devenv
從命令列執行以下命令: gulp prepare-addon
將提示您一個選單,指定您可以建置的所有可能的套件。
執行完腳本後,將在pathtoyourprojectfolderprimo-explore-devenvaddons
中建立一個包含附加元件的資料夾。
從上面的資料夾中,您可以將附加元件發佈到 NPM 和 Primo-Studio。有關說明,請參閱:Primo-Studio 附加教學