主题类别

CabloyJS提供了两类主题:内置主题第三方主题

1. 内置主题

通过Framework7提供的主题机制,可以对主题的四个要素进行定制:

名称 说明
布局主题 浅色布局、暗色布局
导航条样式 是否实心风格
颜色主题 从预定义值中选择主色
自定义颜色主题 自定义主色

1

2

2. 第三方主题

我们也可以选择第三方主题。第三方主题通过CSS对主题进行了更细致更全面的定制

CabloyJS内置了一个第三方主题模块a-themehyacinth

3

主题配置

用户可以自由选择主题,同时也可以直接在前端Config文件中配置系统的缺省主题

src/front/config/config.default.js

export default{
  theme: {
    type: 'builtIn',
    builtIn: {
      layout: 'light',
      bars: 'empty',
      color: 'teal',
      customColor: null,
    },
    thirdParty: null,
  },
};
名称 说明 可选值
type 主题类别 builtIn/thirdParty
builtIn.layout 布局主题 light/dark
builtIn.bars 导航条样式 empty/fill
builtIn.color 颜色主题 red green blue pink yellow orange purple deeppurple lightblue teal lime deeporange gray black
builtIn.customColor 自定义颜色主题 如:#2196f3
thirdParty 第三方主题模块名称 如:a-themehyacinth

制作第三方主题

第三方主题本质上也是一个EggBornJS模块,在这里我们新建一个主题模块test-themehello

1. 新建主题模块

进入项目目录,执行CabloyJS提供的脚手架创建一个新模块

$ cd /path/to/project
$ npm init cabloy src/module/test-themehello --type=module

如果网速慢,可以使用淘宝镜像:

$ npm init cabloy src/module/test-themehello --type=module --registry=https://registry.npm.taobao.org

2. 修改package.json

src/module/test-themehello/package.json

{
  "name": "egg-born-module-test-themehello",
  "version": "1.0.0",
  "title": "Hello",
  "eggBornModule": {
    "fileVersion": 0,
    "theme": true,
    "dependencies": {
      "a-instance": "3.0.0",
      "a-base": "3.0.0"
    }
  },
  ...
}
名称 说明
title 模块标题
eggBornModule.theme 标识本模块是主题模块

3. 国际化

添加模块标题的国际化语言资源

src/module/test-themehello/backend/src/config/locale/zh-cn.js

module.exports = {
  Hello: '您好',
};

4. 修改主题样式

根据设计风格,修改主题样式

src/module/test-themehello/front/src/assets/css/module.less

:root.eb-theme-test-themehello {

  --f7-font-family: monospace;

  --f7-theme-color: #2cb2d4;
  --f7-theme-color-rgb: 44, 178, 212;
  --f7-theme-color-shade: #2496b3;
  --f7-theme-color-tint: #4ebedb;

  --f7-searchbar-link-color: var(--f7-theme-color);
}

当主题被启用时,系统会给html元素添加ClassName: eb-theme-${moduleName}。因此,自定义的CSS样式必须包含在:root.eb-theme-test-themehello

CSS样式支持CSS变量

5. 构建模块

作为EggBornJS模块,如果在项目内部使用,不需要构建,可以直接使用。如果要分享到社区,供其他用户安装使用,必须进行构建

$ cd src/module/test-themehello   -- 进入模块目录
$ npm run build:front             -- 构建前端代码
$ npm run build:backend           -- 构建后端代码

6. 发布模块

可以将制作好的模块发布到社区

$ npm publish