orchardcore-theme-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OrchardCore Theme Creator

OrchardCore 主题创建工具

This skill guides you through creating new OrchardCore themes following project conventions.

本技能将引导你遵循项目规范创建新的OrchardCore主题。

Prerequisites

前提条件

OrchardCore repository at
```
D:\orchardcore
```
.NET SDK 10.0+ installed
Node.js 22.x and Yarn 4.x (for asset compilation)

OrchardCore 代码仓库位于
```
D:\orchardcore
```
已安装 .NET SDK 10.0+
Node.js 22.x 和 Yarn 4.x（用于资源编译）

Theme Creation Workflow

主题创建流程

Step 1: Create Theme Directory

步骤1：创建主题目录

bash

mkdir src/OrchardCore.Themes/YourTheme
cd src/OrchardCore.Themes/YourTheme

bash

mkdir src/OrchardCore.Themes/YourTheme
cd src/OrchardCore.Themes/YourTheme

Step 2: Create Required Files

步骤2：创建必要文件

Every theme needs these files:

Manifest.cs - Theme metadata
YourTheme.csproj - Project file
Views/Layout.cshtml - Main layout
Views/_ViewImports.cshtml - Razor imports

每个主题都需要以下文件：

Manifest.cs - 主题元数据
YourTheme.csproj - 项目文件
Views/Layout.cshtml - 主布局文件
Views/_ViewImports.cshtml - Razor 导入文件

Step 3: Create Manifest.cs

步骤3：创建Manifest.cs

csharp

using OrchardCore.DisplayManagement.Manifest;
using OrchardCore.Modules.Manifest;

[assembly: Theme(
    Name = "Your Theme",
    Author = ManifestConstants.OrchardCoreTeam,
    Website = ManifestConstants.OrchardCoreWebsite,
    Version = ManifestConstants.OrchardCoreVersion,
    Description = "Your theme description."
)]

Extending a base theme:

csharp

[assembly: Theme(
    Name = "Your Theme",
    BaseTheme = "TheBlogTheme",  // Inherit from base
    // ... other properties
)]

csharp

using OrchardCore.DisplayManagement.Manifest;
using OrchardCore.Modules.Manifest;

[assembly: Theme(
    Name = "Your Theme",
    Author = ManifestConstants.OrchardCoreTeam,
    Website = ManifestConstants.OrchardCoreWebsite,
    Version = ManifestConstants.OrchardCoreVersion,
    Description = "Your theme description."
)]

扩展基础主题：

csharp

[assembly: Theme(
    Name = "Your Theme",
    BaseTheme = "TheBlogTheme",  // 继承自基础主题
    // ... 其他属性
)]

Step 4: Create Project File

步骤4：创建项目文件

xml

<Project Sdk="Microsoft.NET.Sdk.Razor">
  <PropertyGroup>
    <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    <Title>Your Theme</Title>
    <Description>Your theme description.</Description>
  </PropertyGroup>

  <ItemGroup>
    <FrameworkReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\..\OrchardCore\OrchardCore.Theme.Targets\OrchardCore.Theme.Targets.csproj" />
  </ItemGroup>
</Project>

xml

<Project Sdk="Microsoft.NET.Sdk.Razor">
  <PropertyGroup>
    <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    <Title>Your Theme</Title>
    <Description>Your theme description.</Description>
  </PropertyGroup>

  <ItemGroup>
    <FrameworkReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\..\OrchardCore\OrchardCore.Theme.Targets\OrchardCore.Theme.Targets.csproj" />
  </ItemGroup>
</Project>

Step 5: Create Layout

步骤5：创建布局文件

Create

Views/Layout.cshtml

html

<!DOCTYPE html>
<html lang="@Orchard.CultureName()">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@RenderTitleSegments(Site.SiteName, "before")</title>
    <resources type="StyleSheet" />
</head>
<body>
    <zone Name="Header" />
    <main>
        <zone Name="Messages" />
        <zone Name="Content" />
    </main>
    <zone Name="Footer" />
    <resources type="FootScript" />
</body>
</html>

创建

Views/Layout.cshtml

：

html

<!DOCTYPE html>
<html lang="@Orchard.CultureName()">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@RenderTitleSegments(Site.SiteName, "before")</title>
    <resources type="StyleSheet" />
</head>
<body>
    <zone Name="Header" />
    <main>
        <zone Name="Messages" />
        <zone Name="Content" />
    </main>
    <zone Name="Footer" />
    <resources type="FootScript" />
</body>
</html>

Step 6: Add Assets (Optional)

步骤6：添加资源文件（可选）

Create asset structure:

Assets/
├── scss/site.scss
├── js/site.js
└── package.json
Assets.json

See

references/assets.md

for configuration details.

创建资源文件结构：

Assets/
├── scss/site.scss
├── js/site.js
└── package.json
Assets.json

有关配置详情，请查看

references/assets.md

。

Step 7: Build and Activate

步骤7：构建并激活主题

bash

undefined

bash

undefined

Build theme

构建主题

cd D:\orchardcore dotnet build src/OrchardCore.Themes/YourTheme

Build assets (if added)

构建资源文件（若已添加）

yarn && yarn build

Run application

运行应用程序

cd src/OrchardCore.Cms.Web dotnet run -f net10.0

Activate theme in Admin → Design → Themes

在管理后台 → 设计 → 主题中激活主题

undefined

undefined

Quick Reference

快速参考

Available Zones

可用区域

Zone	Purpose
`Header`	Site header
`Navigation`	Main menu
`Messages`	Alerts/notifications
`Content`	Main content
`Sidebar`	Side widgets
`Footer`	Site footer

区域	用途
`Header`	网站头部
`Navigation`	主导航菜单
`Messages`	提示/通知信息
`Content`	主要内容区
`Sidebar`	侧边栏小部件
`Footer`	网站底部

Base Themes

基础主题

Theme	Description
`TheBlogTheme`	Blog template
`TheAdmin`	Admin UI
`TheAgencyTheme`	Business template

主题	描述
`TheBlogTheme`	博客模板
`TheAdmin`	管理后台UI
`TheAgencyTheme`	商务模板

Naming Conventions

命名规范

Item	Convention
Theme folder	`YourThemeName` (PascalCase)
Namespace	`YourThemeName`
CSS file	`site.css`
JS file	`site.js`

项	规范
主题文件夹	`YourThemeName` （大驼峰命名）
命名空间	`YourThemeName`
CSS文件	`site.css`
JS文件	`site.js`

References

参考资料

```
references/theme-structure.md
```
- Directory layout and templates
```
references/assets.md
```
- SCSS, JS, and asset pipeline
```
AGENTS.md
```
(repo root) - Build commands

```
references/theme-structure.md
```
- 目录结构和模板
```
references/assets.md
```
- SCSS、JS和资源管道
```
AGENTS.md
```
（仓库根目录） - 构建命令