是否可以在 Umbraco 9 中创建模块化的可重用组件？

发布于 2025-01-10 12:17:53 字数 729 浏览 0 评论 0原文

我希望在 Umbraco 9 中创建一个可重用的模块化组件。我以前从未使用过任何 Umbraco。我将使用的示例是一个文本小部件/组件，其左侧有图像，右侧有文本，并且能够设置是否要将其交换为图像右侧、文本左侧。

我来自 Sitecore 世界，创建这样的组件意味着使用后台中的字段创建定义，创建 MVC 控制器和操作，并将后台定义指向控制器/操作组合。然后，在我认为组件热点的任何地方，我都可以单击“添加组件”，它会显示我创建的可用组件（在我们的示例中为文本+图像块）。

我们的团队一直在研究如何在 Umbraco 中做这样的事情。我们一直在使用元素类型。我已经可以在其中创建元素类型列表，但我们无法弄清楚如何向此过程添加控制器/操作/视图以真正控制显示的内容。

我们研究了网格类型编辑器。这需要一些 Angular 的工作，但效果并不好，由于某种原因，即使我们的图像字段有图像，它也会将其视为空。

我们还尝试了修改阻止列表编辑器，目前正在研究宏。

我们一直在努力，希望能获得一些关于如何在 Umbraco 中做这样的事情的帮助。也许我正在搜索/使用错误的术语？

我们的大多数组件都非常简单，我们可以只使用网格编辑器，而不是创建可重用的组件。在上面的示例中，我们可以创建一个 50/50 网格行，并将图像放在左列中，将文本放在右列中。这可行，但我们希望有更多可重用的包。此外，一些组件需要一些控制器功能才能访问 API 并在将数据传递到表示层之前处理一些数据。

我们将继续调查，但最终我希望有人能够澄清我们是否走错了路，或者只是错过了一些关键点。

原文

I'm looking to create a reusable, modularized component in Umbraco 9. I've never worked with any Umbraco before. The example I'll use is a text widget/component that has an image on the left and text on the right, with the ability to set whether you want to swap this to be image right, text left.

I come from the Sitecore world where creating a component like this would mean creating a definition with the fields in the back office, creating an MVC controller and an action, and pointing that back office definition at the controller/action combo. Then, anywhere I've deemed a component hot spot, I can click an "add component" and it'd display the available components I've created (Text + Image Block, in our example).

Our team has been researching how to do something like this in Umbraco. We've been using element types. I've got it working where I can create a list of element types, but we couldn't figure out how to add a controller/action/view to this process to really control what gets displayed.

We've looked into the Grid Type Editor. That requires some Angular work that wasn't exactly playing nice, for some reason it was seeing our image fields as null even though they had an image.

We also tried messing with the Block List editor, and are currently investigating macros.

We've been spinning our wheels and I'm hoping to get some assistance on how to do something like this in Umbraco. Perhaps I'm searching/using the wrong terminology?

Most of our components are super simple, and rather than create a reusable component, we can just use the grid editor. In our example above, we could create a 50/50 grid row and put an image in the left column and the text in the right. This would work, but we'd like to have a little more of a reusable package. Furthermore, a few of the components will require some controller functionality to be able to hit an API and massage some data before passing it to the presentation layer.

We will keep investigating, but ultimately I'm hoping someone can clear up if we're going down the wrong path, or just missing some crucial point here.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

涙—继续流 2025-01-17 12:17:53

当然！我想到了两种方法。一种方法是制作一个简单的文档类型，如下面的屏幕截图，然后让布局决定如何堆叠它们

此示例使用 bootstrap，当然您不必使用它，在我的情况下，我将它们放在一个嵌套的content 元素，所以我基本上只是循环遍历它们，并交替将 flex-row-reverse 放在行上。

@{
    var i = 0
    foreach(var contentBlock in Model.ContentBlocks)
    {
        <div class="d-flex flex-wrap align-items-center @(i %2 != 0 ? "flex-row-reverse" : null)">
            <div class="block-left col-sm-7">
                <h5>@contentBlock.SectionHeading</h5>
                @Html.Raw(contentBlock.SectionDescription.ToString())
            </div>
            @if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
            {
            <div class="block1-right col-sm-5 ml-auto">
                <figure class="hover">
                    <img id="@contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="@contentBlock.SectionImage.Url">
                </figure>
            </div>
            }
        </div>
        i++;
    }
}

另一种方法（如您所要求的）是通过切换为内容编辑器提供选择，将切换添加到文档类型

而不是这一行，

<div class="d-flex flex-wrap align-items-center @(i %2 != 0 ? "flex-row-reverse" : null)">

您可以使用这一行

<div class="d-flex flex-wrap align-items-center @(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">

或者甚至是类似的东西你只需分配自己的班级并单独编写 CSS

<div class="d-flex flex-wrap align-items-center @(contentBlock.SectionAlignment == true ? "block-right":"block-left")">

希望能帮助您朝着正确的方向前进。我确信您必须根据您的情况进行调整，并且此代码未经测试。
如果您有任何问题，我们很乐意为您提供帮助。

Sure! Two ways come to mind for me. One would be make a simple doctype like the screenshot below and let layout decide how to stack them

This sample uses bootstrap which of course you don't have to use, and in my case I have them in a nested content element so I basically just loop through them and alternate putting flex-row-reverse on the row.

@{
    var i = 0
    foreach(var contentBlock in Model.ContentBlocks)
    {
        <div class="d-flex flex-wrap align-items-center @(i %2 != 0 ? "flex-row-reverse" : null)">
            <div class="block-left col-sm-7">
                <h5>@contentBlock.SectionHeading</h5>
                @Html.Raw(contentBlock.SectionDescription.ToString())
            </div>
            @if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
            {
            <div class="block1-right col-sm-5 ml-auto">
                <figure class="hover">
                    <img id="@contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="@contentBlock.SectionImage.Url">
                </figure>
            </div>
            }
        </div>
        i++;
    }
}

The other way (as you asked for) is to give the content editor the choice with a toggle, add a toggle to the doctype

and instead of this line

<div class="d-flex flex-wrap align-items-center @(i %2 != 0 ? "flex-row-reverse" : null)">

you could use this line

<div class="d-flex flex-wrap align-items-center @(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">

Or even something like this where you just assign your own class and write the CSS separately

<div class="d-flex flex-wrap align-items-center @(contentBlock.SectionAlignment == true ? "block-right":"block-left")">

Hope that helps get you going in the right direction. I'm sure you'll have to adapt this for your situation and this code is not tested.
Happy to help if you have any issues.

回复收藏 0 原文

~没有更多了~