react fusion.design体验二:定制自己都模板风格

既然用了fusion.design,除了他比较多多组件和模板外,当然必不可少多用他的设计工具。

注册账户

首先用淘宝账户登录,然后创建个站点
QQ截图20190110092108.png

设计组件样式

进入站点管理,然后点击组件,你会发现,点任何一个组件,右侧会弹出一个编辑框,可以对组件颜色、高度等等很多项目进行定制,整体风格颜色也可以。

定制完后,右下角有个保存,记住点了保存才有效,然后点击发布,系统会自动发布到npm库,地址类似与:https://www.npmjs.com/package/@alifd/theme-2419
QQ截图20190110092108.png

使用

前面一章已经介绍了创建项目 http://www.zacms.com/index.php/archives/185/,不清楚的可以先看上一篇文章
然后安装模板

npm install @alifd/theme-2419 (修改成你自己发布的)

然后修改package.json,增加

"buildConfig": {
  "theme": "@alifd/theme-2419"
},

然后修改config/webpack.config.js文件,(注意,默认create-react-app创建的项目是没有这个目录的,需要运行npm run eject,具体请看上一篇文章)
安装主题加载loader

npm install @alifd/next-theme-loader

增加一项读取theme配置

let theme = '';
try {
  const pkg = require('./../package.json');
  if (pkg && pkg.buildConfig && pkg.buildConfig.theme) {
    theme = pkg.buildConfig.theme;
    console.log('使用主题' + theme)
  } else {
    const fieConfig = require('./fie.config.js');
    if (fieConfig && fieConfig.toolkitConfig && fieConfig.toolkitConfig.theme) {
      theme = fieConfig.toolkitConfig.theme;
      console.warn(`fie中的主题包配置已迁移, 请在 package.json 中配置
      buildConfig:{
        theme: '@alife/dpl-主题包名'
      }`);
    }
  }
} catch (e) {
  console.error(e);
  console.log(`请在 package.json 中配置
  buildConfig:{
    theme: '@alife/dpl-主题包名'
  }`);
}

后面的fieconfig是从官方demo抄过来的,没有用上可以删除
然后在getStyleLoaders回调函数里面最后return前添加下

    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
      //添加以下项目
      if (theme && preProcessor === 'sass-loader') {
        console.log('使用主题了哦', theme)
        loaders.push({
          loader: '@alifd/next-theme-loader',
          options: {
            theme,
          },
        });
      }
    }

然后再启动项目,看看你到定制主题是否生效来吧。
当你重新修改了主题,发布后,只用

npm update @alifd/theme-2419 (你自己到主题)

主题样式就更新了,是不是爽翻了。

当然它到功能不止如此,自定义物料和模板,才是真正到急速开发的秘密武器,后边再写文章接着体验

标签: 无

发表评论: