1. 定制主题
渲染出来的文档网站的风格是由所使用的主题模块
决定的。为了定制网站风格,我们可以有两个便捷的方式:
-
创建新的主题模块,完全实现自己所需的内容和样式
-
创建新的主题模块,声明继承自别的主题模块,然后只需修改部分内容和样式
更详细信息,请参见:制作主题
2. 定制首页
基于CabloyJS架构设计的灵活性,我们仍然可以探索出不同的方式,来更简便的定制网站的内容和样式
比如,模块cms-themedocs
在后端暴露了一组config参数,使我们只需覆盖这些config参数,就可以定制首页要显示的内容
2.1 覆盖config参数
我们可以在项目的后端config文件中,覆盖模块的config参数,具体如下:
src/backend/config/config.default.js
- 1 ...
- 2
- 3 // disabledModules
- 4 config.disabledModules = [];
- 5
- 6 // module config
- 7 config.modules = {
- 8+ 'cms-themedocs': {
- 9+ theme: {
- 10+ _project: {
- 11+ name: 'My Product',
- 12+ version: '1.1.1',
- 13+ description: 'This is my first product',
- 14+ logo: 'assets/images/logo.png',
- 15+ logoMask: 'assets/images/logo-mask.png',
- 16+ buttons: [
- 17+ { title: 'GitHub', color: 'primary', url: 'https://github.com/zhennann/cabloy' },
- 18+ { title: 'Documentation', color: 'primary', url: 'articles/introduce.html' },
- 19+ { title: 'Demo Online', url: 'https://test.cabloy.com' },
- 20+ ],
- 21+ features: [
- 22+ { title: 'Feature1', description: 'Feature1' },
- 23+ { title: 'Feature2', description: 'Feature2' },
- 24+ { title: 'Feature3', description: 'Feature3' },
- 25+ { title: 'Feature4', description: 'Feature4' },
- 26+ ],
- 27+ columns: 4,
- 28+ },
- 29+ },
- 30+ },
- 31 };
- 32
- 33 // subdomainOffset
- 34 config.subdomainOffset = 2;
- 35
- 36 ...
通过设置节点config.modules[‘cms-themedocs’]
的参数即可
更多信息,请参见:覆盖模块参数
2.2 整站构建
由于我们修改了config参数,需要再次进行整站构建
,使其生效
评论: