1. 定制主题

渲染出来的文档网站的风格是由所使用的主题模块决定的。为了定制网站风格,我们可以有两个便捷的方式:

  1. 创建新的主题模块,完全实现自己所需的内容和样式

  2. 创建新的主题模块,声明继承自别的主题模块,然后只需修改部分内容和样式

更详细信息,请参见:制作主题

2. 定制首页

基于CabloyJS架构设计的灵活性,我们仍然可以探索出不同的方式,来更简便的定制网站的内容和样式

比如,模块cms-themedocs在后端暴露了一组config参数,使我们只需覆盖这些config参数,就可以定制首页要显示的内容

2.1 覆盖config参数

我们可以在项目的后端config文件中,覆盖模块的config参数,具体如下:

src/backend/config/config.default.js

  1. 1 ...
  2. 2
  3. 3 // disabledModules
  4. 4 config.disabledModules = [];
  5. 5
  6. 6 // module config
  7. 7 config.modules = {
  8. 8+ 'cms-themedocs': {
  9. 9+ theme: {
  10. 10+ _project: {
  11. 11+ name: 'My Product',
  12. 12+ version: '1.1.1',
  13. 13+ description: 'This is my first product',
  14. 14+ logo: 'assets/images/logo.png',
  15. 15+ logoMask: 'assets/images/logo-mask.png',
  16. 16+ buttons: [
  17. 17+ { title: 'GitHub', color: 'primary', url: 'https://github.com/zhennann/cabloy' },
  18. 18+ { title: 'Documentation', color: 'primary', url: 'articles/introduce.html' },
  19. 19+ { title: 'Demo Online', url: 'https://test.cabloy.com' },
  20. 20+ ],
  21. 21+ features: [
  22. 22+ { title: 'Feature1', description: 'Feature1' },
  23. 23+ { title: 'Feature2', description: 'Feature2' },
  24. 24+ { title: 'Feature3', description: 'Feature3' },
  25. 25+ { title: 'Feature4', description: 'Feature4' },
  26. 26+ ],
  27. 27+ columns: 4,
  28. 28+ },
  29. 29+ },
  30. 30+ },
  31. 31 };
  32. 32
  33. 33 // subdomainOffset
  34. 34 config.subdomainOffset = 2;
  35. 35
  36. 36 ...

通过设置节点config.modules[‘cms-themedocs’]的参数即可

更多信息,请参见:覆盖模块参数

2.2 整站构建

由于我们修改了config参数,需要再次进行整站构建,使其生效

3. 效果

1