本文介绍Subtext平台中如何通过Skins.config文件管理和配置不同皮肤模板的样式表及脚本文件，实现统一管理并减少错误。
定制skin模板中的用户控件时，为了更好的管理样式，我们一般推荐定义样式表，然后在相应的地方添加样式，我们最好也不摇在用户控件中直接引入样式表，这样很容易出错。所以Subtext提供了一个配置文件Skins.config，其为一个定制的xml文件，专为skin设置，你可以为每套模板有选择性的添加样式文件，如下
<?xml version="1.0"?>
<SkinTemplates xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!--
Note that multiple skins may share the same template folder.
Each template folder by default should have a style.css file.
This file does not need to be configured in this section.
For skins that share a template folder, the skins should be
distinguished by their stylesheet. Note that when specifying
a StyleSheet="" attribute, this style is rendered AFTER "style.css"
allowing the skin to override template specific styles.
-->
<Skins>
<SkinTemplate Name="AnotherEon001" TemplateFolder="AnotherEon001">
<Styles>
<Style href="~/skins/_System/csharp.css" />
<Style href="~/skins/_System/commonstyle.css" />
<Style href="~/skins/_System/commonlayout.css" />
<Style href="print.css" media="print" />
</Styles>
</SkinTemplate>
<SkinTemplate Name="BlueBook" TemplateFolder="RedBook" StyleSheet="Blue.css">
<Scripts>
<Script Src="~/Admin/Resources/Scripts/niceForms.js" />
</Scripts>
<Styles>
<Style href="~/skins/_System/csharp.css" />
<Style href="~/skins/_System/commonstyle.css" />
<Style href="~/skins/_System/commonlayout.css" />
<Style href="niceforms-default.css" />
<Style href="print.css" media="print" />
</Styles>
</SkinTemplate>
</Skins>
</SkinTemplates>
这里包含几个元素呢?
一.SkinTemplates为根路径
二.Skins表示模板集合
三.SkinTemplate表示一个模板的内容包含Styles和Scripts
四.Styles表示要加载的样式文件集合
五.Scripts表示要加载的脚本文件集合
页面会根据模板到这个配置文件里来读取并加载相关文件。
xml定义好了，你该如何做呢.利用xml序列化的功能.你首先得为上面的几个对象定义实体类
[Serializable]
public class Script
{
private string _type = "text/javascript";
/**//// <summary>
/// Script type. Default value is <code>text/javascript</code>
/// </summary>
[XmlAttribute]
public string Type
{
get
{
return _type;
}
set
{
_type = value;
}
}
private string _src;
/**//// <summary>
/// Location of the script. Specified as relative to the skin directory
/// </summary>
[XmlAttribute]
public string Src
{
get
{
return _src;
}
set
{
_src = value;
}
}
}
[Serializable]
public class Style
{
private string _href;
private string _title;
private string _media;
/**//// <summary>
/// Location of the script. Specified as relative to the skin directory
/// </summary>
[XmlAttribute("href")]
public string Href
{
get
{
return _href;
}
set
{
_href = value;
}
}
/**//// <summary>
/// Title of the styesheet.
/// </summary>
[XmlAttribute("title")]
public string Title
{
get
{
return _title;
}
set
{
_title = value;
}
}
/**//// <summary>
/// Media for the stylesheet. Can be a comma delimited list.
/// </summary>
/// <remarks>
/// Allowed media aural, braille, emboss, handheld, print, projection
/// screen, tty, tv
/// </remarks>
[XmlAttribute("media")]
public string Media
{
get
{
return _media;
}
set
{
_media = value;
}
}
/**//// <summary>
/// Adds a conditional comment around this stylesheet declaration.
/// Note that conditional comments only work in IE on Windows.
/// </summary>
/// <remarks>
/// <para>
/// This property should only set the conditional statement. For example,
/// a proper value would be "if IE" and not "[if IE]".
/// </para>
/// <para>
/// For more information, check out http://www.quirksmode.org/css/condcom.html
/// </para>
/// </remarks>
[XmlAttribute("conditional")]
public string Conditional
{
get { return this.conditional; }
set { this.conditional = value; }
}
string conditional;
}
[Serializable]
public class SkinTemplate
{
/**//// <summary>
/// This is the folder that contains the template files (*.ascx)
/// for the current skin.
/// </summary>
[XmlAttribute]
public string TemplateFolder
{
get {return this.templateFolder;}
set {this.templateFolder = value;}
}
private string templateFolder;
/**//// <summary>
/// Gets or sets the stylesheet for this Skin. Remember,
/// every skin template folder should include a "style.css"
/// file that is rendered by default.
/// </summary>
/// <remarks>
/// This property makes it possible to have multiple skins
/// use the same template folder.
/// </remarks>
/// <value>The secondary CSS.</value>
[XmlAttribute]
public string StyleSheet
{
get {return this.styleSheet;}
set {this.styleSheet = value;}
}
private string styleSheet;
/**//// <summary>
/// Whether or not this skin template has a secondary skin css file.
/// </summary>
[XmlIgnore]
public bool HasSkinStylesheet
{
get{return (this.StyleSheet != null && this.StyleSheet.Trim().Length > 0);}
}
/**//// <summary>
/// Gets the name of the skin as will be displayed in the
/// drop-down list in the admin section.
/// </summary>
[XmlAttribute]
public string Name
{
get {return this.name;}
set {this.name = value;}
}
private string name;
/**//// <summary>
/// A key representing this particular skin. A Skin
/// is really a combination of the TemplateFolder and
/// the Stylesheet specified.
/// </summary>
[XmlIgnore]
public string SkinKey
{
get
{
return (this.TemplateFolder + (this.StyleSheet != null && this.StyleSheet.Length > 0 ? "-" + this.StyleSheet : string.Empty)).ToUpper(CultureInfo.InvariantCulture);
}
}
private Script[] _scripts;
/**//// <summary>
/// Collection of <code>script</code> elements, declared for the skin.
/// </summary>
[XmlArray("Scripts")]
public Script[] Scripts
{
get
{
return _scripts;
}
set
{
_scripts = value;
}
}
private Style[] _styles;
/**//// <summary>
/// Collection of stylesheet elements declared for the skin.
/// </summary>
[XmlArray("Styles")]
public Style[] Styles
{
get
{
return _styles;
}
set
{
_styles = value;
}
}
}
注意元数据属性，是为必须的，根据元数据熟悉属性再看看那个xml文件，意思是一一对应的。
接着便是SkinTemplates的真正反序列化的过程了，接着呢你就可以来个迭代，来加载相关skin文件了。
当然别忘了定义一个集合skins
[XmlArray("Skins")]
public List<SkinTemplate> Templates
{
get {return this._skinTemplates;}
set {this._skinTemplates = value;}
}
<?xml version="1.0"?><SkinTemplates xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <!-- Note that multiple skins may share the same template folder. Each template folder by default should have a style.css file. This file does not need to be configured in this section. For skins that share a template folder, the skins should be distinguished by their stylesheet. Note that when specifying a StyleSheet="" attribute, this style is rendered AFTER "style.css" allowing the skin to override template specific styles. --> <Skins> <SkinTemplate Name="AnotherEon001" TemplateFolder="AnotherEon001"> <Styles> <Style href="~/skins/_System/csharp.css" /> <Style href="~/skins/_System/commonstyle.css" /> <Style href="~/skins/_System/commonlayout.css" /> <Style href="print.css" media="print" /> </Styles> </SkinTemplate> <SkinTemplate Name="BlueBook" TemplateFolder="RedBook" StyleSheet="Blue.css"> <Scripts> <Script Src="~/Admin/Resources/Scripts/niceForms.js" /> </Scripts> <Styles> <Style href="~/skins/_System/csharp.css" /> <Style href="~/skins/_System/commonstyle.css" /> <Style href="~/skins/_System/commonlayout.css" /> <Style href="niceforms-default.css" /> <Style href="print.css" media="print" /> </Styles> </SkinTemplate></Skins>
</SkinTemplates>
这里包含几个元素呢?
一.SkinTemplates为根路径
二.Skins表示模板集合
三.SkinTemplate表示一个模板的内容包含Styles和Scripts
四.Styles表示要加载的样式文件集合
五.Scripts表示要加载的脚本文件集合
页面会根据模板到这个配置文件里来读取并加载相关文件。
xml定义好了，你该如何做呢.利用xml序列化的功能.你首先得为上面的几个对象定义实体类
[Serializable] public class Script { private string _type = "text/javascript"; /**//// <summary> /// Script type. Default value is <code>text/javascript</code> /// </summary> [XmlAttribute] public string Type { get { return _type; } set { _type = value; } } private string _src; /**//// <summary> /// Location of the script. Specified as relative to the skin directory /// </summary> [XmlAttribute] public string Src { get { return _src; } set { _src = value; } } } [Serializable] public class Style { private string _href; private string _title; private string _media; /**//// <summary> /// Location of the script. Specified as relative to the skin directory /// </summary> [XmlAttribute("href")] public string Href { get { return _href; } set { _href = value; } } /**//// <summary> /// Title of the styesheet. /// </summary> [XmlAttribute("title")] public string Title { get { return _title; } set { _title = value; } } /**//// <summary> /// Media for the stylesheet. Can be a comma delimited list. /// </summary> /// <remarks> /// Allowed media aural, braille, emboss, handheld, print, projection /// screen, tty, tv /// </remarks> [XmlAttribute("media")] public string Media { get { return _media; } set { _media = value; } } /**//// <summary> /// Adds a conditional comment around this stylesheet declaration. /// Note that conditional comments only work in IE on Windows. /// </summary> /// <remarks> /// <para> /// This property should only set the conditional statement. For example, /// a proper value would be "if IE" and not "[if IE]". /// </para> /// <para> /// For more information, check out http://www.quirksmode.org/css/condcom.html /// </para> /// </remarks> [XmlAttribute("conditional")] public string Conditional { get { return this.conditional; } set { this.conditional = value; } } string conditional; } [Serializable] public class SkinTemplate { /**//// <summary> /// This is the folder that contains the template files (*.ascx) /// for the current skin. /// </summary> [XmlAttribute] public string TemplateFolder { get {return this.templateFolder;} set {this.templateFolder = value;} } private string templateFolder; /**//// <summary> /// Gets or sets the stylesheet for this Skin. Remember, /// every skin template folder should include a "style.css" /// file that is rendered by default. /// </summary> /// <remarks> /// This property makes it possible to have multiple skins /// use the same template folder. /// </remarks> /// <value>The secondary CSS.</value> [XmlAttribute] public string StyleSheet { get {return this.styleSheet;} set {this.styleSheet = value;} } private string styleSheet; /**//// <summary> /// Whether or not this skin template has a secondary skin css file. /// </summary> [XmlIgnore] public bool HasSkinStylesheet { get{return (this.StyleSheet != null && this.StyleSheet.Trim().Length > 0);} } /**//// <summary> /// Gets the name of the skin as will be displayed in the /// drop-down list in the admin section. /// </summary> [XmlAttribute] public string Name { get {return this.name;} set {this.name = value;} } private string name; /**//// <summary> /// A key representing this particular skin. A Skin /// is really a combination of the TemplateFolder and /// the Stylesheet specified. /// </summary> [XmlIgnore] public string SkinKey { get { return (this.TemplateFolder + (this.StyleSheet != null && this.StyleSheet.Length > 0 ? "-" + this.StyleSheet : string.Empty)).ToUpper(CultureInfo.InvariantCulture); } } private Script[] _scripts; /**//// <summary> /// Collection of <code>script</code> elements, declared for the skin. /// </summary> [XmlArray("Scripts")] public Script[] Scripts { get { return _scripts; } set { _scripts = value; } } private Style[] _styles; /**//// <summary> /// Collection of stylesheet elements declared for the skin. /// </summary> [XmlArray("Styles")] public Style[] Styles { get { return _styles; } set { _styles = value; } } }注意元数据属性，是为必须的，根据元数据熟悉属性再看看那个xml文件，意思是一一对应的。
接着便是SkinTemplates的真正反序列化的过程了，接着呢你就可以来个迭代，来加载相关skin文件了。
当然别忘了定义一个集合skins
[XmlArray("Skins")] public List<SkinTemplate> Templates { get {return this._skinTemplates;} set {this._skinTemplates = value;} }
扫一扫
9926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
