Skip to content

Orchard标记指南-Orchard Markup Guidelines

ARCHIVED

！注意“归档” 

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

Supported Browsers

支持的浏览器

All templates will be tested against and support the following browsers. For Internet Explorer 6 and below, we will strive to ensure the site and templates remain functional, but will not put effort into resolving any rendering issues that does not affect the ability for the user to consume the content.

所有模板都将针对以下浏览器进行测试和支持。对于Internet Explorer 6及更低版本，我们将努力确保网站和模板保持正常运行，但不会努力解决任何不影响用户使用内容的渲染问题。

  • IE7+

  • IE7 + *

  • Chrome 5+

  • Chrome 5+ *

  • Firefox 3.5+

  • Firefox 3.5+ *

  • Safari 4+

  • Safari 4+ *

  • Opera 10+

  • Opera 10+ *

File Names

文件名

The following rules should be observed when naming files:

命名文件时应遵循以下规则：

  • Include files will use "_" at the beginnings

  • 包含文件将在开头使用“_”

  • All cshtml, vbhtml, HTML and CSS files should be named using camel case.

  • 所有 cshtml，vbhtml，HTML和CSS 文件都应使用camel case命名。

Examples: BlogPage.vbhtml, APageWithAReallyLongName.cshtml, About.html, Style.css

示例： BlogPage.vbhtml，APageWithAReallyLongName.cshtml，About.html，Style.css

HTML Doctype

HTML Doctype

We will standardize on the HTML5 doctype as it allows the use of HTML5 markup while being compatible with existing content that applies to HTML 4.01 and XHTML.

我们将对HTML5文档类型进行标准化，因为它允许使用HTML5标记，同时与适用于HTML 4.01和XHTML的现有内容兼容。 

<!DOCTYPE html>

Tags

标签

In addition to all non- deprecated HTML4 tags, you may optionally use all the "New Elements" tags listed in section 3.1 as specified at http://www.w3.org/TR/html5-diff/ which allow progressive enhancement in all browsers.

除了所有未弃用的HTML4标记之外，您还可以选择使用http://www.w3.org/TR/html5-diff/中指定的3.1节中列出的所有“新元素”标记，这些标记允许渐进增强在所有浏览器中。

The following are common new elements have been introduced for better structure:

以下是为了更好的结构而引入的常见新元素：

  • <section> Section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.

  • <section>Section代表一般文档或应用程序部分。它可以与h1，h2，h3，h4，h5和h6元素一起使用以指示文档结构。 *

  • <article> Article represents an independent piece of content of a document, such as a blog entry or newspaper article.

  • <article>文章代表文档的独立内容，例如博客文章或报纸文章。 *

  • <aside> Aside represents a piece of content that is only slightly related to the rest of the page.

  • <aside>旁边代表一段与页面其余部分略有关联的内容。 *

  • <hgroup> Hgroup represents the header of a section.

  • <hgroup>Hgroup表示节的标题。 *

  • <header> Header represents a group of introductory of navigational aids.

  • <header>标题代表一组导航辅助工具的介绍。 *

  • <footer> Footer represents a footer for a section and can contain information about the author, copyright information, et cetera.

  • <footer>页脚代表一个部分的页脚，可以包含有关作者，版权信息等的信息。 *

  • <nav> Represents a section of the document intended for navigation.

  • <nav>表示用于导航的文档的一部分。 *

  • <figure> Figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

  • <figure>图表示一段自包含的流内容，通常从文档的主流中引用为单个单元。 *

Example:

例： 

<figure>

    <video src="ogg"></video>

    <figcaption>Example</figcaption>

</figure>

Using "New Elements" in IE8 and lower

在IE8和更低版本中使用“新元素”

If you're using any of the new tags listed in section 3.1, use the following workaround to allow this markup to not break script libraries in older versions of IE. http://bit.ly/biRqQ0

如果您使用的是3.1节中列出的任何新标记，请使用以下解决方法以允许此标记不会破坏旧版IE中的脚本库。 [http://bit.ly/biRqQ0](http://bit.ly/biRqQ0）

Javascript

使用Javascript

All pages should work with Javascript disabled or not available. Scripts should be purely additive and used enhance the existing experience of the page. The term used for this is progressive enhancement. For more information see: http://bit.ly/Y5Gp2

所有页面都应该在禁用Javascript或不可用的情况下使用。脚本应该是纯粹的添加剂并且用于增强页面的现有体验。用于此的术语是渐进增强。有关详细信息，请参阅：[http://bit.ly/Y5Gp2](http://bit.ly/Y5Gp2）

jQuery comes built-in into Orchard so we will standardize on it as our Javascript framework across templates and admin pages.

jQuery内置于Orchard中，因此我们将标准化为跨模板和管理页面的Javascript框架.

Images

图片

Strive to use the appropriate image format for each situation.

努力为每种情况使用适当的图像格式。

  • Photos and gradients should use the jpeg format.

  • 照片和渐变应使用jpeg格式。 *

  • Graphical elements should use png.

  • 图形元素应该使用png。 *

  • Alpha transparency via 24-bit png is allowed.

  • 允许通过24位png进行Alpha透明。 *

  • Use sprites where possible to improve load time and reduce the amount of requests made to the server. http://www.alistapart.com/articles/sprites

  • 尽可能使用精灵来减少加载时间并减少对服务器的请求量。 [http://www.alistapart.com/articles/sprites]（http://www.alistapart.com/articles/sprites） *

Accessibility

无障碍

HTML and CSS templates need to pass the accessibility tests at: http://wave.webaim.org/ Templates will satisfy all requirements of WCAG 2.0 level AA.

HTML和CSS模板需要通过以下方面的可访问性测试：[http://wave.webaim.org/](http://wave.webaim.org/）模板将满足WCAG 2.0级别AA的所有要求。

Validation

验证

We strive for standards compliance. All templates both admin and theme need to pass validation using validation tools located at http://validator.w3.org/.

我们努力实现标准合规。管理员和主题的所有模板都需要使用位于[http://validator.w3.org/](http://validator.w3.org/）的验证工具进行验证。

CSS Organization

CSS组织

Standardize on a structure and coding format to allow users to easily find and read styles for modification.

标准化结构和编码格式，以便用户轻松查找和阅读样式进行修改。

  • Do not use "Hacks" such as conditional if (IE), etc.

  • 不要使用条件if（IE）等“Hacks”等。 *

  • CSS Markup will be valid CSS 2.1 + Optional progressively enhanced CSS 3 markup

  • CSS Markup将是有效的CSS 2.1 +可选的逐步增强的CSS 3标记 *

Structure

结构体

This structure was partly adapted from suggestions provided made by Dan Cederholm from Simple Bits. All this resides in the Style.css file. The file will comprise of the following sections:

这种结构部分改编自简单比特的Dan Cederholm提供的建议。所有这些都存在于Style.css文件中。该文件将包含以下部分：

  1. Info - This section contains a commented section for the theme the style is associated with, the author, website and any copyright information.

1. 信息 - 此部分包含与样式相关的主题的注释部分，作者，网站和任何版权信息。

  1. Color Palette - This section will be a commented section that defines the overall color scheme for the theme. It allows a single place to define colors and makes it easy for users to find, replace and modify color definitions.

2. 调色板 - 此部分将是一个注释部分，用于定义主题的整体颜色方案。它允许单个位置定义颜色，使用户可以轻松查找，替换和修改颜色定义。

  1. Reset - CSS definitions used to normalize settings across browsers.

3. 重置 - 用于规范浏览器设置的CSS定义。

  1. Clearing Floats - Contains CSS definitions used to clear parent items that contained floated children.

4. 清除浮点数 - 包含用于清除包含浮动子项的父项的CSS定义。

  1. Typography (This is optional) - Allows you to add any CSS code or import a typography reset framework such as YUI Fonts used to normalize font sizes across browsers.

5. 排版（这是可选的） - 允许您添加任何CSS代码或导入排版重置框架，例如用于规范化浏览器字体大小的YUI字体。

  1. General - Contains definitions for global html elements such as body, headings levels, links and any other elements in which you would like to apply a different styling and override the reset. This would include UL, P's, etc.

6. 常规 - 包含全局html元素的定义，例如正文，标题级别，链接以及您要在其中应用不同样式并覆盖重置的任何其他元素。这将包括UL，P等。

  1. Structure - This includes layout definitions for major structural components of your templates such as containers, headers, footers, etc. This section may be sub divided with comments into specific sections such as navigation, header, etc.

7. 结构 - 这包括模板主要结构组件的布局定义，如容器，页眉，页脚等._此部分可能会被细分为特定部分的注释，例如导航，标题等。

  1. Main - Main styles related to your theme. This may contains things like definitions for blog posts, tags, etc.

8. 主要 - 与您的主题相关的主要风格。这可能包含博客文章，标签等定义。

  1. Secondary - Secondary styles related to your theme. This may contain secondary styling definitions for things like stylize text, errors, etc.

9. 中学 - 与您的主题相关的次要样式。这可能包含样式化文本，错误等内容的辅助样式定义。

  1. Forms - All styling related to forms items. This section may be sub divided with comments into specific sections such as comment form, etc.

10. 表格 - 与表格项目相关的所有样式。 _此部分可能会被细分为评论表格等特定部分的评论。

  1. Misc - This contains any misc or specific definitions that you may need to use to render your desired look.

11. 其他 - 这包含您可能需要使用的任何misc或特定定义来呈现您想要的外观。