设计徽标样式和 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 文件

参考:https://apim.docs.wso2.com/en/latest/reference/customize-product/customizations/customizing-the-developer-portal/overriding-developer-portal-theme/#global-theming

此文件位于 {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 开发门户: