Create a theme in Orchard)

ArticleDirectory

• Generate the topic code structure
• Add a Style File
• Add layout File
• Modify effect thumbnails and List Files
• Packaging and application topics
• Summary
• References
• Sample download

In orchard, We can customize themes to make our website stand out. A topic can be used to override styles, images, and la S, and rewrite templates provided by all orchard modules. Simply put: any HTML on the webpage Code All are controllable. It is precisely because of this advantage that front-end web designers have unlimited space to play. This article uses a simple example to enable the orchard topic creation journey. To generate the topic code structure, you must first use a command line code generation tool that we have repeatedly mentioned. Run this tool and enter the following code: Codegen theme myfirsttheme For usage of the command line tool, you can view the command line tool in Orchard. This command will create a new folder myfirsttheme in the skin project of the orchard solution. You can find it in the themes directory.

 

 

The basic code structure of an orchard topic, including: Content: Content Directory, which can contain images and Flash files used for this topic. Scripts: Script directory, which can be used by some JS files for this topic. Styles: Style Directory, which can contain CSS files used for this topic. Views: View directory, used to store the layout file of the topic. Zones: (I have not found his purpose for the moment. I will try again later when I understand it) Placement.info: It can be used to rewrite the part Rendering sequence and method of the module. For details, see here. Theme.png: A thumbnail of the topic effect to intuitively display the style of the topic. Theme.txt: The topic list file. For details, see here. Web. config: Configuration file. In addition, some directories containing static files, such as content and scripts, also have a web. config file, which indicates that all files in this directory are static files and cannot be executed. This can play a safe role to prevent malicious code from being uploaded to these directories for execution. Therefore, do not modify these web. config files. The sample file is stored in the styles and contains a site.css file. Of course, you can create a file with another name. You only need to use .css as the extension. Orchard recommends a set of CSS specifications. You can refer to the introduction in Ui guidelines for theme authors. Of course, you can ignore it at all, as long as you can make the page better.

Adding style files mentioned in the previous section of layout files is a must for writing pages. Although important, they are not specific to orchard. The layout file written in this section is the core of the orchard topic. First, we need a layout file to define the region of the topic. Take the blog topic I used in the blog garden as an example. It must include the following areas: the header area, menu area, left functional area, right content area, and footer area. For example:

Most of these regions display fixed content, and only the left and right functional areas can be used to display dynamic content.

In the orchard topic, page layout files (or HTML code files) are divided into the following types:

Document. cshtml: This section mainly contains parts outside the body tag in HTML code. If this file is not in the topic, the document. cshtml file under the shapes \ views \ directory in orchard. Core is called by default. Layout. cshtml: This mainly contains tags within the body of the HTML code, used to divide the area. Theme small parts: This part mainly includes fixed content in the subject, such as the Website Logo, copyright statement, menu, and so on. There are also some things commonly used in orchard, such as message prompts, pages, user logon links, and so on. This part is somewhat similar to the skin control in dnn, and the small parts of these general parts can be in Orchard. find the shapes \ views \ directory in core. Of course, you can also rewrite these small parts in our topic folder to replace the style. Module template replacement file: It is mainly used to rewrite some template files in the module. The replacement rules are flexible and will be explained in detail later.

Based on the functions of the layout files described above, we can add them as needed. Here we will not post the code. You can download the corresponding code at the end of the document, in the code, I will add comments to some key points for your understanding.

Use a code generation tool to generate a topic for modifying thumbnail and List Files

By default, a thumbnail of the default topic is copied to the topic directory. We can first write the HTML of the corresponding topic, and then replace it. The file must be saved in the root directory of the corresponding topic folder. The file name is theme.png. The file size can be 480x480. In this way, we can easily select the theme we need in the background. If the topic is released to the orchard software market in the future, it is easy for others to understand.

(Theme.png)

In addition, you can add a region Overview chart so that you can easily know the location of each region when adding widgets. The region Overview chart is also placed in the root directory of the corresponding topic folder. The file name is themezonepreview.png and the size is Px in width. The height is based on the actual situation.

(Themezonepreview.png)

 

The skin list file is the same as the effect thumbnail for your understanding. The ghost file is named theme.txt in the root directory of the topic file. For the meanings and functions of the fields, see orchard module and topic list file. After packaging and applying a theme, we can share it with more people. Same as the packaging module. If we enable the orchard. Packaging module, input the following in the command line tool:

Package create myfirsttheme c: \ Temp 

After running successfully, find the created Skin installation package in the temp directory of drive C. For more information about packaging topics, see packaging and publishing the orchard module.

To use the created topic, you can use the Administrator account to log on to the background System of the orchard website. On the "installed" tab in the themes menu, you can find the topic we just created in "available.

Click "set current.

 

 

This article summarizes the basic steps for creating an orchard topic, as well as some related content about packaging and use topics. To write a good topic, you still need to design it and use HTML and CSS. But you need to know how orchard works and how each part is presented, which of the following template replacement rules do you need to know more about the orchard view engine mechanism.

 

Reference http://www.orchardproject.net/docs/Writing-a-new-theme.ashxhttp://www.orchardproject.net/docs/Customizing-the-default-theme.ashx

 

Sample download

 

Orchard. theme. myfirsttheme.1.0.nupkg

After downloading the package, decompress the package and click "install a theme from your computer" in the "themes" menu on the background of the orchard website to install the nupkg file in the package.