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 附加教程