@ bigbinary/ 需要到现场块

netoSiteBlocks是图书馆,为网站在Neto-site的构件服务. 它用于 neeto-site-web 财务报告和审定财务报表 neeto-site-eui 服务于街区.

安装

yarn add @bigbinary/neeto-site-blocks

使用量

例如: 特征与正确图像

道具

1. 编号:指定块的ID.
2. 配置: 包含块配置的对象。 它包含以下密钥:
   1. 设计:指定块的设计.
   2. 属性: 指定块的属性.
3. 类Name:要指定外部类名.

这里有一个例子 如何使用 FeatureWithRightImage 块.

import { FeatureWithImage } from "@bigbinary/neeto-site-blocks";

configurations: {
      properties: {
        content: {
          title: "Title",
          description: "Description",
          position: "left",
        },
        buttons: [],
        image: {
          src:
            "https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg",
          position: "right",
        },
        backgroundImage: {
          src: "",
        },
      },
      design: {
        body: {
          backgroundColor: "#FFFFFF",
          paddingVertical: 20,
          borderTop: {
            borderStyle: "none",
            borderWidth: 0,
            borderColor: "#FFFFFF",
          },
          borderBottom: {
            borderStyle: "none",
            borderWidth: 0,
            borderColor: "#FFFFFF",
          },
        },
        title: {
          fontSize: "3xl",
          fontWeight: "extrabold",
          color: "#2F3941",
          marginTop: 0,
          marginBottom: 5,
          lineHeight: "none",
          letterSpacing: "normal",
        },
        description: {
          fontSize: "base",
          fontWeight: "normal",
          color: "#68737D",
          marginTop: 0,
          marginBottom: 8,
          lineHeight: "normal",
          letterSpacing: "normal",
        },
        buttons: {
          fontSize: "sm",
          fontWeight: "medium",
          color: "#FFFFFF",
          backgroundColor: "#4F46E5",
          border: {
            borderStyle: "none",
            borderWidth: 0,
            borderColor: "#4F46E5",
          },
          borderRadius: "sm",
          paddingHorizontal: 4,
          paddingVertical: 2,
          letterSpacing: "normal",
        },
        image: {
          width: "3/4",
          borderRadius: "sm",
        },
        backgroundImage: {
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
        },
      },
    },

const FeatureWithImageBlock = () => {
  return (
    <FeatureWithImage
      id="feature-with-right-image"
      configuration={configuration}
      className="my-10"
    />
  );
};

发展

通过执行以下命令安装所有依赖性

yarn install
yarn start

这将为建造不同的街区开辟一个游乐场.

建造并放出.

这个 @bigbinary/neeto-site-blocks 软件包在将公关与 patch, (中文(简体) ), minor 或者说 major 标签到 main 树枝。 这个 patch 标签用于错误修正, minor 标签用于新特性和 major 标签用于断开更改。 你可以去检查 Create and publish releases gitHub 动作中的工作流程 现场更新.

如果不能添加标签,可以手动发布软件包. 首先,你需要创建一个公关 更新 package.json 文件并合并到 main 树枝。 合并公关后,您需要 创建 新 github 释放 从主分支。 无论何时 创建新版本编号的新版本, github 动作将自动发布已建软件包 没有。 你可以去检查 Publish to npm gitHub Actions中的工作流程获取实时更新.

请注意,在发布软件包之前,需要验证一些neto网络应用程序中的功能 本地使用 yalc 软件包管理器。 雅尔克的用法在影片中解释: https://youtu.be/QBiYGP0Rhe0 页面存档备份,存于互联网档案馆