设计徽标样式和 Header 在 WSO2 API Manager 4.1.0 中不起作用
Styling the Logo and Header not working in WSO2 API Manager 4.1.0
我正在尝试按照 WSO2 APIM 4.1.0 中的 WSO2 Doc 自定义 dev-portal 徽标。产品以 Zip 格式下载并在 windows.
中解压
根据文档中给出的说明,defaultTheme.js
位于 <API-M_HOME>/repository/deployment/server/jaggeryapps/devportal/site/public/theme/defaultTheme.js
内
但是在同一个路径里面,找不到defaultTheme.js
我在下面提到的其他路径中找到了相同的文件。
我开始像下面那样编辑 defaultTheme.js
文件配置并粘贴 custom-logo 图片。
进行更改后,我启动了服务器,该更改未反映出来,我可以看到与下面相同的默认 wso2 devportal 徽标。
custom-logo:
为什么没有反映?
文档似乎仍未反映最新版本中所做的一些更改。
向 devportal/publisher 添加自定义的另一种方法是更改 userTheme.js 文件
此文件位于 {APIM_HOME}/repository/deployment/server/jaggeryapps/devportal/site/public/theme/userTheme.js
这是一个空 json 文件,您可以在其中添加要覆盖的 defaultTheme.js 中定义的字段。
示例 userTheme.js 文件:
const Configurations = {
custom: {
appBar: {
logo: '/site/public/images/my-custom-logo.png',
logoHeight: 34,
logoWidth: 'auto',
background: '#0feedb',
backgroundImage: '/site/public/images/appbarBack.png'
}
}
};
这对我使用新的 WSO2 API Manager 4.1 包很有效。
使用这种方法,您无需重新启动服务器即可使更改生效。请记住硬刷新浏览器缓存,否则您可能看不到更改。
我已经按照@Renan Martorelli 的建议修改了userTheme.js
文件内容。现在我可以在 WSO2 APIM Dev Portal 4.1.0 中看到反射。
userTheme.js:
const Configurations = {
custom: {
appBar: {
logo: '/site/public/images/integration.jpg',
logoHeight: 34,
logoWidth: 'auto',
background: '#0feedb',
backgroundImage: '/site/public/images/appbarBack.png',
searchInputBackground: '#fff',
searchInputActiveBackground: '#fff',
activeBackground: '#1c6584',
showSearch: true,
drawerWidth: 400,
}
}
};
WSO2 开发门户:
我正在尝试按照 WSO2 APIM 4.1.0 中的 WSO2 Doc 自定义 dev-portal 徽标。产品以 Zip 格式下载并在 windows.
中解压根据文档中给出的说明,defaultTheme.js
位于 <API-M_HOME>/repository/deployment/server/jaggeryapps/devportal/site/public/theme/defaultTheme.js
但是在同一个路径里面,找不到defaultTheme.js
我在下面提到的其他路径中找到了相同的文件。
我开始像下面那样编辑 defaultTheme.js
文件配置并粘贴 custom-logo 图片。
进行更改后,我启动了服务器,该更改未反映出来,我可以看到与下面相同的默认 wso2 devportal 徽标。
custom-logo:
为什么没有反映?
文档似乎仍未反映最新版本中所做的一些更改。
向 devportal/publisher 添加自定义的另一种方法是更改 userTheme.js 文件
此文件位于 {APIM_HOME}/repository/deployment/server/jaggeryapps/devportal/site/public/theme/userTheme.js
这是一个空 json 文件,您可以在其中添加要覆盖的 defaultTheme.js 中定义的字段。
示例 userTheme.js 文件:
const Configurations = {
custom: {
appBar: {
logo: '/site/public/images/my-custom-logo.png',
logoHeight: 34,
logoWidth: 'auto',
background: '#0feedb',
backgroundImage: '/site/public/images/appbarBack.png'
}
}
};
这对我使用新的 WSO2 API Manager 4.1 包很有效。 使用这种方法,您无需重新启动服务器即可使更改生效。请记住硬刷新浏览器缓存,否则您可能看不到更改。
我已经按照@Renan Martorelli 的建议修改了userTheme.js
文件内容。现在我可以在 WSO2 APIM Dev Portal 4.1.0 中看到反射。
userTheme.js:
const Configurations = {
custom: {
appBar: {
logo: '/site/public/images/integration.jpg',
logoHeight: 34,
logoWidth: 'auto',
background: '#0feedb',
backgroundImage: '/site/public/images/appbarBack.png',
searchInputBackground: '#fff',
searchInputActiveBackground: '#fff',
activeBackground: '#1c6584',
showSearch: true,
drawerWidth: 400,
}
}
};
WSO2 开发门户: