Skip to content

ARCHIVED

！注意“归档” 

This chapter has not been updated for the current version of Orchard, and has been ARCHIVED.

When building themes in Orchard, it is often desirable to make certain aspects of the theme available to the administrator to customize.

在Orchard中构建主题时，通常需要让管理员可以自定义主题的某些方面。

This article describes how to add several simple theme settings to the Site Settings menu in the Orchard dashboard.

本文介绍如何将多个简单主题设置添加到Orchard仪表板中的“站点设置”菜单。

Creating the Theme

创建主题

First thing we will need is a theme, so let's go ahead and use the codegen command to generate a theme

我们需要的第一件事是一个主题，所以让我们继续使用codegen命令来生成一个主题 

feature enable Orchard.CodeGeneration

Now we can generate a theme that we will base on TheThemeMachine so that we have a basic theme to work on. We will also need to create a project file for this theme so that we can add our settings. This is the key to creating settings in our themes because by making our theme a C# project, our themes can do almost anything a module can do.

现在我们可以生成一个主题，我们将基于TheThemeMachine，以便我们有一个基本的主题来工作。我们还需要为此主题创建一个项目文件，以便我们可以添加我们的设置。这是在我们的主题中创建设置的关键，因为通过使我们的主题成为C＃项目，我们的主题几乎可以完成模块可以执行的任何操作。 

codegen theme CleanBlog /BasedOn:TheThemeMachine /CreateProject:true

Defining the Settings

定义设置

Visual Studio should now prompt you to reload the solution so you can get started with your new theme. If it doesn't right click on your themes folder in the Solution Explorer and Add -> Existing Project then select your new themes project file (it will be located in the Themes folder).

Visual Studio现在应该提示您重新加载解决方案，以便开始使用新主题。如果它没有右键单击解决方案资源管理器中的主题文件夹并添加 - >现有项目，则选择新的主题项目文件（它将位于主题文件夹中）。

These will be the two settings added to our theme:

这些将是添加到我们主题的两个设置：

  • Add a custom class to the main layout

  • 将自定义类添加到主布局

  • Load a custom style sheet based on the users selection

  • 根据用户选择加载自定义样式表

We are going to attach a new part to the Site content type to store these custom theme settings. So let's create a Models folder and add a file called CleanBlogSettingsPart.cs.

我们将在网站内容类型中添加一个新部件来存储这些自定义主题设置。因此，让我们创建一个 Models 文件夹并添加一个名为 CleanBlogSettingsPart.cs 的文件。 

using Orchard.ContentManagement;



namespace CleanBlog.Models

{

    public class CleanBlogSettingsPart : ContentPart

    {

        public string CustomClass {

            get { return this.Retrieve(x => x.CustomClass); }

            set { this.Store(x => x.CustomClass, value); }

        }



        public string HoverColor {

            get { return this.Retrieve(x => x.HoverColor, "custom_blue.css"); }

            set { this.Store(x => x.HoverColor, value); }

        }

    }

}

This example is using the InfoSet storage that was made available in 1.8 (it is perfectly possible to achieve the same in older versions of Orchard using the ContentPartRecord storage method and building the table in the migrations, see this for more details). The "custom_blue.css" parameter in the getter for HoverColor is the default value for that setting.

此示例使用1.8中提供的InfoSet存储（完全可以使用ContentPartRecord存储方法在旧版本的Orchard中实现相同，并在迁移中构建表，有关详细信息，请参阅 this ）。 HoverColor的getter中的“custom_blue.css”参数是该设置的默认值。

We will be offering them the option to choose from 3 different colours to have their links, so let's create three style sheets in the Styles folder of our theme:

我们将为他们提供从3种不同颜色中选择以获得链接的选项，所以让我们在主题的Styles文件夹中创建三个样式表：

  • custom_blue.css

  • custom_blue.css

  • custom_green.css

  • custom_green.css

  • custom_yellow.css

  • custom_yellow.css

Add the following to each style sheet and adjust the colour to match the file.

将以下内容添加到每个样式表并调整颜色以匹配该文件。 

a:hover {

    color: *color*;

}

So custom_blue.css will look like this:

所以custom_blue.css看起来像这样： 

a:hover {

    color: blue;

}

Setting up the Editor

设置编辑器

Now we will need an editor to select these options. Create a file in ~/Views/EditorTemplates/Parts called CleanBlogSettingsPart.cshtm.

现在我们需要一个编辑器来选择这些选项。在〜/ Views / EditorTemplates / Parts 中创建一个名为 CleanBlogSettingsPart.cshtm 的文件。 

@model CleanBlog.Models.CleanBlogSettingsPart



@{

    var colourScheme = new List<SelectListItem>();

    colourScheme.Add(new SelectListItem { Text = "Blue", Value = "custom_blue.css" });

    colourScheme.Add(new SelectListItem { Text = "Green", Value = "custom_green.css" });

    colourScheme.Add(new SelectListItem { Text = "Yellow", Value = "custom_yellow.css" });

}



<fieldset>

    <legend>Clean Blog Settings</legend>

    <div>

        @Html.LabelFor(m => m.CustomClass, T("Custom Class"))

        @Html.EditorFor(m => m.CustomClass)

    </div>

    <div>

        @Html.LabelFor(m => m.HoverColor, T("Hover Color"))

        @Html.DropDownListFor(m => m.HoverColor, colourScheme.AsEnumerable())

    </div>

</fieldset>

To handle the display of this view and attach the settings to the Site content type, we will use a ContentHandler. So create a folder called Handlers in the root of your theme with a file called CleanBlogSettingsPartHandler.cs.

要处理此视图的显示并将设置附加到网站内容类型，我们将使用ContentHandler。因此，在主题的根目录中创建一个名为 Handlers 的文件夹，其中包含一个名为 CleanBlogSettingsPartHandler.cs 的文件。

using Orchard.ContentManagement.Handlers;

使用Orchard.ContentManagement.Handlers;

using Orchard.ContentManagement;

使用Orchard.ContentManagement;

using Orchard.Localization;

使用Orchard.Localization;

using CleanBlog.Models;

使用CleanBlog.Models; 

namespace CleanBlog.Handlers

{

    public class CleanBlogSettingsPartHandler : ContentHandler

    {

        public CleanBlogSettingsPartHandler() {

            Filters.Add(new ActivatingFilter<CleanBlogSettingsPart>("Site"));

            Filters.Add(new TemplateFilterForPart<CleanBlogSettingsPart>("CleanBlogSettingsPart", "Parts/CleanBlogSettingsPart", "Theme"));

            T = NullLocalizer.Instance;

        }



        public Localizer T { get; set; }



        protected override void GetItemMetadata(GetContentItemMetadataContext context) {

            if (context.ContentItem.ContentType != "Site")

                return;

            base.GetItemMetadata(context);

            context.Metadata.EditorGroupInfo.Add(new GroupInfo(T("Theme")));

        }

    }

}

There are a few things of note here. We don't want to just display our themes settings in the main settings menu, but in its own subsection called "Theme". You can name this subsection whatever you like. But if you do want your settings to be in the main settings page, just remove the 'GetItemMetadata()' method and change this line:

这里有一些值得注意的事情。我们不想只在主设置菜单中显示我们的主题设置，而是在其自己的子主题“主题”中显示。你可以随意命名这个小节。但是，如果您确实希望您的设置位于主设置页面中，只需删除'GetItemMetadata（）'方法并更改此行： 

Filters.Add(new TemplateFilterForPart<CleanBlogSettingsPart>("CleanBlogSettingsPart", "Parts/CleanBlogSettingsPart", "Theme"));

to:

至： 

Filters.Add(new TemplateFilterForPart<CleanBlogSettingsPart>("CleanBlogSettingsPart", "Parts/CleanBlogSettingsPart"));

You'll also notice that this line is defining what template to use for rendering our settings editor. You may be wondering why we don’t just use a driver like we usually do for a parts editor template. This is due to the fact that to call the Editor method of your Driver and return a shape, you need to have specified in the Placement.info that you want to do that. Since this theme is not active in the admin section of Orchard, our themes Placement.info file is never run hence a Driver would never display anything.

您还会注意到，这一行定义了用于渲染设置编辑器的模板。您可能想知道为什么我们不仅仅使用像我们通常用于零件编辑器模板的驱动程序。这是因为要调用 Driver 的 Editor 方法并返回一个形状，你需要在Placement.info中指定你想要这样做。由于此主题在Orchard的admin部分中不活动，因此我们的主题 Placement.info 文件永远不会运行，因此Driver永远不会显示任何内容。

Finally, the line:

最后，行： 

Filters.Add(new ActivatingFilter<CleanBlogSettingsPart>("Site"));

Is what attaches our part to the Site content type.

是我们对网站内容类型的重视。

Accessing the Theme Settings

访问主题设置

All that is left is to do now is to actually make use of our theme settings. Let's copy the Layout.cshtml file from TheThemeMachine into our CleanBlog theme. This means our theme will now use our Layout file instead of the base Layout from TheThemeMachine. Accessing our settings is as simple as:

剩下的就是现在要做的就是实际使用我们的主题设置。让我们将TheThemeMachine中的 Layout.cshtml 文件复制到我们的CleanBlog主题中。这意味着我们的主题现在将使用我们的布局文件而不是TheThemeMachine的基本布局。访问我们的设置非常简单： 

var settings = WorkContext.CurrentSite.As<CleanBlogSettingsPart>();

WorkContext is effectively an extension of the HttpContext, containing additional information about Orchard, such as the current user and current site (which you can see us doing above). This gives us access to the site content item, meaning we can access any parts that we have attached to the Site content type. We will need to add two using statements into our view to resolve the .As<> extension and our model.

WorkContext 实际上是 HttpContext 的扩展，包含有关Orchard的其他信息，例如当前用户和当前站点（您可以在上面看到我们这样做）。这使我们可以访问网站内容项，这意味着我们可以访问我们附加到网站内容类型的任何部分。我们需要在视图中添加两个using语句来解析.As <>扩展和我们的模型。 

@using CleanBlog.Models

@using Orchard.ContentManagement

So now we have our settings in the view we can actually make use of them. Anywhere after the line

所以现在我们在视图中有我们可以实际使用它们的设置。行之后的任何地方 

Style.Include("Site.css");

add the line

添加线 

Style.Include(settings.HoverColor);

This will load the selected stylesheet after the main sheet and apply our overriding colour scheme. Our final setting is to add a custom class to the main div element. This element is generated by the Tag method. This is an implementation of C#'s TagBuilder class. It takes a dynamic shape object and a tag name and builds that tag with all the attributes (id, classes and additional attributes) gleaned from the shape that was passed in. So we can add our class to the Model so our class will be added to the rendered tag like so:

这将在主工作表之后加载选定的样式表并应用我们的重写颜色方案。我们的最终设置是将自定义类添加到主div元素。此元素由Tag方法生成。这是C＃的TagBuilder类的实现。它采用动态形状对象和标记名称，并使用从传入的形状中收集的所有属性（id，类和其他属性）构建该标记。因此我们可以将我们的类添加到模型中，以便添加我们的类像这样渲染的标签： 

Model.Classes.Add(settings.CustomClass);

Wrapping Up

包起来

The real power here is that themes in Orchard don't just have to be templates and stylesheets, they can be fully-fledged projects that run C# code outside of views; basically do anything a module can do. Here we saw just one way to utilize this power: modify the look and feel of your theme from the dashboard without having to change any HTML or CSS

这里真正的力量是Orchard中的主题不仅仅是模板和样式表，它们可以是完全成熟的项目，它们在视图之外运行C＃代码;基本上做模块可以做的任何事情。在这里，我们只看到了一种利用此功能的方法：从仪表板修改主题的外观和感觉，而无需更改任何 HTML 或 CSS