c# 扩展静态类的静态方法_扩展静态内容开发

c# 扩展静态类的静态方法

It’s the most “basic” type of website: a homepage, a blog, a marketing page. And now there seems to be a new static site generator, or JAMStack framework like Gatsby, or Gridsome, every other week.

这是最“基本”的网站类型：主页，博客，营销页面。 现在似乎每隔一周就会有一个新的静态站点生成器，或者像Gatsby或Gridsome这样的JAMStack框架。

While many would argue that we should simply build this out on a Vanilla HTML, CSS, JS stack, there are some compelling reasons to write in a JAMStack framework. However for these benefits are predicated on the idea that it is actually easier, and faster to develop and iterate with these JAMStacks.

尽管许多人认为我们应该简单地在Vanilla HTML，CSS，JS堆栈上构建它，但是有一些令人信服的理由在JAMStack框架中进行编写。 但是，要获得这些好处，是基于这样的想法，即使用这些JAMStack进行开发和迭代实际上更容易，更快捷。

A large problem is that we end up writing difficult to maintain components. The idea of simple and easy composition of components never seems to live up to its promise. Creating a new page always seems feel like writing from scratch or, hacking together components that don’t quite work the way we want them to.

一个很大的问题是，我们最终编写了难以维护的组件。 简单和容易地组成组件的想法似乎从未实现其诺言。 创建新页面总是感觉像是从头开始编写，或者是将无法按我们希望的方式工作的组件组合在一起。

问题所在 (The Problems)

Let’s take a step back and understand why writing a “basic” static website is never all that easy even with the all the new tools and frameworks.

让我们退后一步，了解为什么即使使用所有新工具和框架，编写“基本”静态网站也从未如此简单。

The current most popular paradigm in building UI is to have declarative state driven components. Many of these frameworks are designed to be flexible and unopinionated. A component, at its core, has three main parts:

当前在构建UI中最流行的范例是具有声明式状态驱动的组件。 这些框架中有许多被设计为灵活且不受质疑。 组件的核心包括三个主要部分：

• Markup & Styling
  标记和样式
• Props & Data
  道具与数据
• Methods/Interaction
  方法/互动

As you can see, components doesn’t solve the harder problem of prescribing how to separate our concerns to make them composable.

如您所见，组件无法解决规定如何将我们的关注点分离以使其可组合的难题。

As such we often have arbitrary breakdown on components. Something difficult to adapt to new situations.

因此，我们经常会对组件进行任意细分。 难以适应新情况的事物。

Here is a key example of the type of problems you often run into:

这是您经常遇到的问题类型的关键示例：

You see the design and think great! Time to create that new component.

您会看到设计并认为很棒！ 是时候创建该新组件了。

We will create a div with background-color: $beige. Inside we will add rounded div with margin: 0 auto … etc.

我们将创建一个具有background-color: $beige的div background-color: $beige 。 在里面，我们将添加带有margin: 0 auto舍入div margin: 0 auto …等等。

Great, now we have a `<HowItWorksSection />` component. Time to plop it into our Homepage page.

太好了，现在我们有一个<HowItWorksSection />组件。 是时候将其放入“主页”页面了。

// Homepage Template/JSX
<DefaultLayout>
  <HeroSection />
  <PricingSection />
  {/* NEW COMPONENT */}
  <HowItWorksSection />
</DefaultLayout>

Perfect! Looks good!

完善！ 看起来挺好的！

Now it’s two months later your designer comes along with a new page and you see this…

现在过了两个月，您的设计师出现了一个新页面，您看到了……

What now?

现在怎么办？

I could add props to the component to set the background color, but the second version of this section has a two tone background!

我可以在组件中添加道具以设置背景颜色，但是本节的第二个版本具有两个色调的背景！

Do I create a new component that is <HowItWorksDarkSection />but that would mean a lot of duplicated code…

我是否创建一个名为<HowItWorksDarkSection />的新组件，但这将意味着很多重复的代码……

When defining a component you set commitments: markup commitments, data commitments/dependencies (via props and internal state), and component dependencies. When you create a component, you more or less have to use it as is.

在定义组件时，您需要设置承诺：标记承诺，数据承诺/依赖关系(通过props和内部状态)以及组件依赖关系。 创建组件时，您或多或少必须按原样使用它。

As such you have to consider which commitments you want to have.

因此，您必须考虑要承担哪些义务。

在关注内容的网站上分开关注。 (Separating concerns on a content focused site.)

Here are 4 types of components, their responsibilities, and how they help you write maintainable content sites.

这里有4种类型的组件，它们的职责以及它们如何帮助您编写可维护的内容站点。

1.节包装 (1. Section wrappers)

Responsibilities:

职责：

• Colors
  色彩
• Box Styling: Background Color, border, border radius, multiple colors, etc.
  框样式：背景颜色，边框，边框半径，多种颜色等。
• Inner max-width, padding/spacing/margin.
  内部最大宽度，填充/间距/边距。

This lets you write the content of your sections without worrying about things that will vary from page to page. This solves the problem described above.

这样，您就可以编写各节的内容，而不必担心页面之间会有所不同。 这样解决了上述问题。

// Homepage Template/JSX
<DefaultLayout>
 
  {/* Page 1 with single background */}
  <BasicSectionWrapper text-color="text" bg-color="off-white">
    <HowItWorksSection />
  </BasicSectionWrapper>{/* Page 2 wtih Two Tone background */}
  <TwoToneSectionWrapper top-color="navy" bottom-color="turquoise">
    <HowItWorksSection />
  </TwoToneSectionWrapper></DefaultLayout>

2.通用布局内容部分 (2. Generic layout content sections)

Responsibilities

职责范围

• Manages Common Layouts that you will use to display content.
  管理将用于显示内容的通用布局。
• Responsive Changes
  响应式变化

Lets take another component section.

让我们来看另一个组件部分。

Always consider whether or not it makes sense to make this into a “Special” or “Page Specific” section.

始终考虑将其设置为“特殊”或“特定于页面”部分是否有意义。

// Option 1: Page Specific Section
<TwoToneSectionWrapper top-color=”navy” bottom-color=”turquoise”>
  <JournyYourWay />
</TwoToneSectionWrapper>

When you create components as page specific, it is now limitedly reusable. You have to add a prop for each text area: title, subtitle, columns.

现在，当您创建特定于页面的组件时，就可以有限地重用它。 您必须为每个文本区域添加一个属性： title ， subtitle ， columns 。

Especially with the columns, the content if fixed in this format. Want to add or remove another row of content to the columns? Different button styles? You need to add props to make it adjustable. By the time this is “truly” reusable, you will end up with too many props. The main issue is that it won’t even work if the content completely changes.

特别是对于列，内容如果以这种格式固定。 是否要向列添加或删除另一行内容？ 不同的按钮样式？ 您需要添加道具以使其可调。 到“真正”可重用的时候，您将获得过多的道具。 主要问题是，如果内容完全更改，它甚至将无法工作。

Instead consider the second option

而是考虑第二种选择

// Journy Your Way
<SectionWrapper bg-color=”off-white”>
  <VStack>
  <AHeading level=”2">Journy Your Way</AHeading>
  <AHeading level=”4">Whether …</AHeading>
  <Columns>
    { cards.map(card => {( <ImageCard props={card} />)}
  </Columns>
  </VStack>
</SectionWrapper>

This is going to be slightly more verbose on the Content View components. However, even with 5–6 sections, the template should fit on a single page and still be easily scannable.

在Content View组件上，这将更加详细。 但是，即使有5–6个部分，模板也应该适合于单个页面，并且仍然易于扫描。

3.页面特定内容部分 (3. Page Specific Content Section)

Responsibilities

职责范围

• Have props, but with defaults to the design.
  有道具，但默认为设计。
• Override for changes
  覆盖变更

Page Specific Content Sections are sections for displaying very customized layouts and data. We choose to put this into a component purely for convenience. It is easier to manage, easy to copy from one page to another, and easier to parse in the view page.

页面特定内容部分是用于显示非常自定义的布局和数据的部分。 我们选择纯粹是为了方便将其放入组件中。 它更易于管理，易于从一个页面复制到另一页面，并且更易于在视图页面中进行解析。

The key to designing page specific content, is that they aren’t designed, and shouldn’t be designed, to be flexible. To make the component flexible would make the component either too difficult to use, or so verbose that it would make it more convenient to simply build it from scratch in another component.

设计页面特定内容的关键在于，它们不是为了灵活而设计的，也不应该被设计的。 要使该组件具有灵活性，将使该组件要么太难使用，要么变得太冗长，以致于仅从头开始在另一个组件中构建它会更加方便。

We do want to be able to reuse these components on other pages, with slightly different data. As such, the only props that we should use are content props, and color props.

我们确实希望能够在其他页面上以稍有不同的数据重用这些组件。 因此，我们应该使用的唯一道具是内容道具和彩色道具。

Let’s try to figure out what should be a page specific content section.

让我们尝试找出什么是页面特定的内容部分。

Here we might be tempted to make this entire section a component. Instead we should consider which components might be changed and how.

在这里，我们可能很想将整个部分变成一个组件。 相反，我们应该考虑哪些组件可以更改以及如何更改。

<SectionWrapper bg-color=”dark-turquoise”>
  <VStack>
    <AHeading level=”2">Pricing by day</AHeading>
    <AHeading level=”4">With a simple, flat-rate planning fee.</AHeading>
    {/* Page Specific Section */}
    <PricingCards />
    {/* Page Specific Section */}
    <InclusionsList color=”white” accent-color=”turquoise” />
  </VStack>
</SectionWrapper>

Let’s continue considering what might change with these components in the future. The most common are just copy changes. So we should set the props for these components that make it easy to change them.

让我们继续考虑将来这些组件可能会发生什么变化。 最常见的只是复制更改。 因此，我们应该为这些组件设置道具，以使其易于更改。

// Pricing Props
const pricingCardsProps = {
  // Might be more cards on the left. So all cards will be arrays.
  leftCards: {
    type: Array,
    default: [
      {
        color: "dark", // Allow Card color theme to change.
        title: "Fewer than 5-Day Trip",
        price: "60",
        priceUnit: "per day of travel, per group",
        ctaText: "Plan My Trip",
        ctaUrl: "/url",
      },
    ],
  },
  // All Text might change
  separator: {
    type: String,
    default: "OR"
  },
  rightCards: {
    type: Array,
    default: [
      {
        color: "light",
        title: "5-Day Trip",
        tag: "save $25",
        price: "275",
        priceUnit: "per group",
        ctaText: "Plan My Trip",
        ctaUrl: "/url",
      },
      *{
        color: "light",
        title: "10-Day Trip",
        tag: "save $100",
        price: "500",
        priceUnit: "per group",
        ctaText: "Plan My Trip",
        ctaUrl: "/url",
      },*
    ],
  },
};// Pricing Props
const inclusionsListProps = {
  title: {
    type: String,
    default: "All Journy Trips include",
  },
  subTitle: {
    type: String,
    default: "...",
  },
  list: {
    type: Array,
    default: [
      "point 1", 
      "point 2", 
      "point 3",
      // Etc.
    ],
  },
};

Now, in the future if designers want to use these page specific components, we can easily change the text that makes sense.

现在，将来，如果设计人员要使用这些特定于页面的组件，我们可以轻松更改有意义的文本。

4.内容视图组件： (4. Content View Components:)

Responsibilities

职责范围

• Imports sections
  导入部分
• Define layout
  定义布局
• Uses Section wrappers To wrap components
  使用分段包装器包装组件
• Provides data overrides which are sent down as props
  提供数据替代，将其作为道具向下发送

Content views are the last type of component we will look at. This page should be simple enough for a “non-technical” person to go into to make copy edits (as appropriate). Ideally, you can have data come in via a CMS.

内容视图是我们将要查看的最后一种类型的组件。 该页面应该足够简单，以使“非技术”人员可以进行复制编辑(适当时)。 理想情况下，您可以通过CMS输入数据。

import HowItWorksSection from '@/components/HowItWorksSection'
import PricingCards from '@/components/HowItWorksSection'// Homepage Template/JSX
<DefaultLayout>
  {/* Regular Section */}
  <BackgroundImageSection image="./background-image.jpg">
    <Columns>
      <div>
        <AHeading level="2">Travel Tips</AHeading>
        <AHeading level="4">......</AHeading>
      </div><div>
        <img src="./content-image.jpg" />
      </div>
    </Columns>
  </BackgroundImageSection>{/* Pricing Section */}
  <SectionWrapper bg-color="dark-turquoise">
    <VStack>
      <AHeading level="2">Pricing by day</AHeading>
      <AHeading level="4">With a simple, flat-rate planning fee.</AHeading>
      {/* Page Specific Section */}
      <PricingCards />
      {/* Page Specific Section */}
      <InclusionsList color="white" accent-color="turquoise" />
    </VStack>
  </SectionWrapper>;{/* How it works section */}
  <TwoToneSectionWrapper top-color="navy" bottom-color="turquoise">
    <HowItWorksSection />
  </TwoToneSectionWrapper></DefaultLayout>

摘要 (Summary)

Whenever you’re building components, make sure you spend some time considering what is likely going to change, and what isn’t. Figure out the basic composable elements, and use props sparingly, for content.

无论何时构建组件，请确保花一些时间考虑可能会更改的内容，而不会更改的内容。 弄清楚基本的可组合元素，并少用道具。

1. Use Section Wrapper to control section colors, max-width of inner content, padding.
   使用“节包装器”控制节颜色，内部内容的最大宽度，填充。
2. Define common layouts with composable components.
   使用可组合的组件定义通用布局。
3. Elements with special designs should be wrapped, exposing only the content via props. The props should have default values, which relate to the default/first design.
   具有特殊设计的元素应被包装，仅通过道具公开内容。 道具应具有默认值，该默认值与默认/第一个设计有关。
4. In your actual views, define overall layout and content with section wrappers, and layout components. The template should mostly only use predefined composable components.
   在您的实际视图中，使用节包装器和布局组件定义整体布局和内容。 该模板应仅使用预定义的可组合组件。

Thanks for Reading!

谢谢阅读！

翻译自: https://levelup.gitconnected.com/composing-components-building-static-content-websites-21c003dc1097

c# 扩展静态类的静态方法