Jul 22 2011 at 13:35

Введение в Orchard CMS — создание собственной Темы.

Invite pending

По умолчанию, Orchard CMS поставляется с темой Theme Machine. Существуют галерея Тем, доступная из панели администрирования, а так же на официальном сайте проекта http://www.orchardproject.net/gallery/List/Themes. К сожалению, она не радует изобилием, да и в реальной жизни зачастую возникает необходимость в создании собственной Темы.

Для создания своей Темы первым делом нужно включить Code Generation.
Code Generation — это модуль, который позволяет автоматизировать создание дополнительных файлов и расширений для Orchard. Он не входит в стандартный пакет Orchard CMS, но его можно установить из галереи модулей.

Процесс установки достаточно прост: в разделе «Module» панели администрирования нужно перейти во вкладку «Gallery», набрать в поиске «Code Generation» и нажать на Install напротив искомого модуля в результатах поиска:

После успешной установки Orchard CMS выдаст соответствующее сообщение, а так же предложит включить установленный модуль. Включим его.

Далее с помощью установленного модуля сгенерируем структуру новой Темы. Для этого нужно открыть утилиту командной строки Orchard (ее можно найти в каталоге bin сайта, файл Orachard.exe) и набрать в ней следующую команду:

codegen themе MyFirstTheme

где MyFirstTheme — имя создаваемой Темы.

В результате выполнения этой команды в каталоге Themes появится папка MyFirstTheme, состоящая из конфигурационного файла Web.config, манифеста темы Theme.txt и стандартных папок Темы:

Для завершения добавим файл стилей Style.css со следующим содержанием в папку Styles:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, table, tr, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline;}
header, footer, aside, nav, article {display: block;}

/* Clearing Float */
group:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.group {display: inline-block;}  /* for IE/Mac */

/* General */
body {font: normal 100% Segoe UI,Trebuchet,Arial,Sans-Serif; height: 100%; text-align:left; color:#000; background: #d3d3d3;}

/* Headings */
h1,h2,h3,h4,h5,h6,legend {font-weight: normal; font-style: normal;}
h1 {font-size: 160%;}
h2 {font-size: 145%;}
h3 {font-size: 130%;}
h4 {font-size: 120%;}
h5 {font-size: 105%;}
p {margin: 0 0 1em; line-height: 1.538em;}
p img.left {float: left; margin: 0.923em 0.923em 0.923em 0; padding: 0;}
p img.right {float: right; margin: 0.923em 0 0.923em 0.923em;}
a:focus, a:hover {text-decoration: underline;}
a {color: #c03; text-decoration: none;}
#header {background:#000; color: #000; width: 100%; height: 50px; margin-bottom: 40px;}
#branding h1{font-size: 140%; color: #fff; padding: 8px 0 0 40px;}
   
/* Structure */
#layout-navigation {width: 960px; margin: 0 auto; display: block; border-bottom: 1px solid #dbdbdb;}
nav ul {padding: 0px; margin: 0px;}
nav ul li {border: 1px solid #dbdbdb; background: #f6f6f6; display: block; float: left; margin: 0 2px -1px 0;}
nav ul li.current {border-bottom: 1px solid #fff; background: #fff;}
nav ul a {padding:0 18px; display:block; float:left; color: #333; font-size: 1.077em; text-decoration:none; line-height:24px;}

/* Main */
#main {margin:0 auto 40px; width: 600px;}

а так же файл Layout.cshtml в папку Views:

@{
    Script.Require("ShapesBase");
    Style.Include("site.css");
}

<div id="header">
    <div id="branding">
        <h1>@T("Welcome to the Playground")</h1>
    </div>
</div>
<div id="layout-navigation" class="group">
    @Display(Model.Navigation)
</div>
<div id="main">
    @Display(Model.Content)
</div>

В результате этих манипуляций в разделе Themes панели администрирования появится новая Тема, которую можно включить или просмотреть:

Процесс создания Темы завершен. Можно открыть сайт и проверить результат.

Примеры Site.css и Layout.cshtml

Hubs:

Lumber room