皮肤与模板

介绍

返回手册返回HEXU

安装完毕 Nucleus 之后，你有以下几种方法来改变你的网站的外观:

使用 Nucleus 自带的默认的皮肤和模板
修改默认的皮肤和模板，使其达到你的要求
用自己的皮肤和模板，自定义你自己的CSS风格

本文档向你介绍如何修改皮肤和模板

内容指引

HTML and CSS
默认的皮肤
模板 vs. 皮肤
皮肤是如何调用的
Howto:
定义皮肤

HTML and CSS

在编辑皮肤和模板的时候，你至少需要了解一些基本的 HTML 和 CSS 知识。以下是一些此方面的在线教程和参考:

W3Schools: 在线建站教程(HTML, XHTML, CSS)
CSS Panic Guide: 有许多CSS资源
Webmonkey: HTML Basics
Webmonkey: Stylesheets
Dive Into Accessibility: Online book, not really about HTML, but about accessibility and how to make your site more accessible.

默认的皮肤

此节中简要的介绍了默认皮肤所用到的一些文件，并告诉你如何编辑它们。

默认的皮肤使用下面三个文件:

default.css: CSS文件，定义页面的风格、颜色、布局等
atom.gif: 在页面左上角显示的logo图标
nucleus2.gif: Nucleus logo

CSS文件 default.css 包含了如何构建页面的信息。主要由以下三个div构成: .contents, .logo and .menu

编辑 default.css 文件, 你需要一个文本编辑器，比如 windows 自带的 Notepad、emacs和 TextPad，千万不要使用 WordPad、 Word、 OpenOffice、 Writer 等自动在文件中加入控制字符的软件编辑。

模板 vs. 皮肤

在Nucleus 中，模板和皮肤同时决定你的博客的外观。模板和皮肤有什么区别呢？

皮肤定义你的博客的外观。每个皮肤包含以下的部分：一个定义主界面，一个定义单个文章页面，一个定义存档页面。皮肤还包括在哪包含一个博客，哪一个模板会被用到。
这也就是说，模板是用来定义你的博客页面的。不同的皮肤可以使用同一个模板。

下面是一个例子。整个页面是由皮肤所定义的。而部分红色方框所在的范围(分类列表和博客内容)是由模板定义的。红色的方框则是由皮肤定义的。

皮肤是如何调用的

本部分介绍了Nucleus是怎样调用皮肤的。

皮肤类型

首先，Nucleus根据URL选择的不同，调用不同的皮肤。见下表。

请求的格式	被调用的皮肤	显示的博客
?itemid=..	item	Deducted from itemid
?archive=..	archive	Default weblog, or blogid attribute
?archivelist=...	archivelist	archivelist-attribute
?archivelist	archivelist	Default weblog
?query=...	search	Default weblog, or blogid attribute
?memberid=..	member	None
?imagepopup=..	imagepopup	None (popup window with image)
(other or empty)	index	Default weblog, or blogid attribute

除了以上7种类型，还有另外一种错误类型，用来显示错误信息。

皮肤串连

The table above also indicates how the blog to be displayed is chosen. The skin that will be used, is the default skin for that weblog, as selected in the settings for that weblog.

Not every skin needs to have definitions for all skin parts. When a part is missing, the skin called 'default' will be used instead (see below). This allows you for example to only create one error page and one member page.

默认的皮肤

Nucleus 不论在什么时候都需要默认皮肤。当某个皮肤的某个部分缺失的时候，将会调用相应的默认的皮肤。如果相应的默认皮肤仍然缺失，将出现错误信息：'no appropriate skin found'。

另一个需要默认模板的原因是：用来显示没有博客被选择的时候的错误信息。(如 'no such blog' error)

你网站上的“添加文章”表单

Nucleus 给你提供能在你的博客上增加一个“添加文章”的表单的功能。这个表单可以在你当前页面上增加一个链接，这个链接可以显示和隐藏“添加文章”表单。在该表单上输入内容，可以立刻预览并发表，使得管理更容易。

以下所有的皮肤修改都在皮肤 main index 中完成，你不需要修改任何模板。

1. JavaScript代码

首先，你需要将下面的代码放入皮肤文件的“主索引文件”(Main Index)中，或者你自己定义的文件的 <head> ... </head> 之间。这个代码的作用就是将编辑表单的 JS 代码包含到你的文件当中去。

<script type="text/javascript"
        src="nucleus/javascript/edit.js"></script>

2. 决定这个表单该出现在哪

接下来，你应该增加一个逻辑分块(比如一个DIV块，如下所示)，在该块里面显示“添加文章”的表单。代码 "display:none;" 的作用是确保一开始该表单是隐藏的。

<div id="edit" style="display:none;">
...
</div>

3. 加入增加表单和预览的代码

现在，你可以在这个逻辑分块中添加表单和预览代码，用 <%additemform%> 和 <%preview(templatename)%> 来分别显示表单和预览。下面是一个例子。

<h2>Add Item</h2>
<%additemform%>

<h2>Preview</h2>
<%preview(mytemplate)%>

4. 添加“增加文章”链接或按钮

最后，我们只要在合适的地方，添加一个链接或者按钮来显示或隐藏表单。下面是两个例子，一个是链接形式：

<a href="javascript:showedit();">add item</a>

一个是在左上角的按钮,颜色是银灰色的，大小为10个象素的正方形：

<div style="position: absolute; left: 0px;
            top: 0px; width: 10px; height: 10px;background:#ccc;"
     onclick="javascript:showedit();">
</div>

上述的按钮在原版的手册中并没有任何颜色，是透明的，不容易发现。我们在翻译整理该手册的时候修改了这个地方，增加了 background: #ccc; 部分。你可以修改 background:#ccc; 中的 #ccc 颜色，改成你想要的颜色。另外，我们还发现“预览”功能好像不能使用，即使加入了 <%preview(mytemplate)%> ，也不能实现预览功能。（将其中的 mytemplate 修改成自己的模板，如 default）

怎样利用CSS定义表单的样式

通过各种各样的变量，我们能将各种表单，如 <%searchform%> 和 <%commentform%> 很轻松的加入到皮肤中去。利用CSS，我们能改变表单的式样，如表单域和按钮的样式。

下面是关于表单应用中的对应类：

Form Type	Skin Variable	CSS Class Name
Add Item to Blog	<%additemform%>	.blogform
Add Comment	<%commentform%>	.commentform
Login Form	<%loginform%>	.loginform
Search Form	<%searchform%>	.searchform
Member to Member Mail	<%membermailform%>	.mailform

下面是应用于表单域和按钮的对应类：

Type	CSS Class Name
Input fields (text and textarea)	.formfield
Buttons	.formbutton

下面是如何使用这些类的例子：

/* applies to all input fields */
.formfield {
  background-color: gray;
}

/* only applies to buttons for comment forms */
.commentform .formbutton {
  border: 1px solid #000;
  background-color: #ddd;
  color: #000;
  font-size: xx-large;
}

在上述的例子中，所有的表单域的底色是灰色的，评论表单中的提交按钮中的字体为黑色大字体，有1个象素的黑色边框，底色为浅灰色。

如何使用karma votes

默认的皮肤和模板中是不使用 Karma votes 的。下面将告诉你如何将 karma votes 加入到你的模板中。

1. 打开模板中的 “主索引” 文件 (main index)

编辑名为 'default' 的模板文件（如 default/index）

2. 编辑名为“文章体”(Item body) 的模板部分

在“文章体”部分的底部加入下列代码：

<div class="iteminfo">
  <%time%> -
  <a href="<%authorlink%>"><%author%></a> -
  karma: <%karma%>
    [<a href="<%karmaposlink%>">+</a>/<a href="<%karmaneglink%>">-</a>] -
  <%edit%>
  <%comments%>
</div>

修改完毕后，在主页面每个文章的底部，就会出现下面所示的文字：

9:00:39 PM - God - karma: 5 [+/-] - edit

3. 修改文章页面的模板

进行了上面的修改，karma srore 仅出现在主页面，单独的文章页面并没有。我们现在要做的就是在文章体的模板（如 default/item）中的相应部分也加入上述代码。

如何使用编辑文章链接

默认的 Nucleus皮肤中设置“编辑文章”链接仅仅对作者和对其有更改权限的用户可见。下面我们介绍该功能是如何在模板部分实现功能的。

“编辑链接”模板

“编辑链接”模板定义了“编辑文章”链接的格式。默认情况下，该部分的内容是：

<a href="<%editlink%>" onclick="<%editpopupcode%>">edit</a>

如果你更偏向于在后台管理中添加文章，用下列代码取代上述的内容：

<a href="nucleus/index.php?action=itemedit&amp;itemid=<%itemid%>">edit</a>

给“编辑”链接定位

变量 <%edit%> 就是显示“编辑链接”的代码。你可以将这个变量放入到任何你认为合适的地方。

你也可以借鉴 karma votes howto

利用导入、导出功能自定义皮肤

Nucleus v2.0 已经介绍了如何导入、导出皮肤和模板。这一节主要介绍如何创建一个简单的皮肤。

创建一个新皮肤

首先，我们要进入管理员后台，打开布局(Layout)下的皮肤(skins)页面，在该页面的最底部，建立一个新皮肤，举个例子，取名叫 Vista 吧。
填入 Vista 并点“创建”按钮后，在皮肤列表里面，我们就能找到名为 Vista 的皮肤，点击“编辑”来修改它。保证默认的“内容类型”(Content type)为 text/html 。

现在注意“包括方式”(Include Mode)和“包括前缀”(Include Prefix)。想要导出一个皮肤，我们需要将皮肤目录下的所有的文件，包括图像、CSS等，都导出。config.php 文件中的 $DIR_SKINS 变量以及后台网站设置中的“皮肤地址” (Skins URL) 就是与此相关的。我们假设它们是这样设置的：
```
/home/user/example/htdocs/skins/
http://example.org/skins/
```
而我们想让 Vista 皮肤出现在这里：
```
/home/user/example/htdocs/skins/vista/
http://example.org/skins/vista/
```
这就是“包含模式” (Include Mode) 的作用。设置“包含模式”为 “使用皮肤目录” (Use skin dir)

“包括前缀”(Include Prefix) 也很重要。我们设置为 Vista。

完成设置后，你的后台相应部分应该看起来是这样的：
- 名字: vista
- 内容类型: text/html
- 包括方式: 使用皮肤目录
- 包括前缀: vista/

编辑皮肤

“包括方式”(IncludeMode)和“包括前缀”(IncludePrefix) 的设置让 include, phpinclude 和 parsedinclude 知道该如何获取它们需要的文件。另外，skinfile这个变量会将相应的皮肤参数传递给主程序。

在此例中:

<%skinfile(myFile.jpg)%>

将被解释成:

http://example.org/skins/vista/myFile.jpg

我们现在来定义 pagefoot.inc 和 pagehead.inc ，这两个文件将放置在我们的 Vista 目录中。你可以利用 Skin files 插件来完成创建这2个文件的工作。

pagehead.inc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>My Site</title>
	<link rel="stylesheet" type="text/css" href="<%skinfile(layout.css)%>" />
</head>
<body>

<div id="contents">

pagefoot.inc

</div><!-- contents div end -->

<div id="stuffbar">
	<h2>Navigation</h2>

	<ul>
		<li><a href="<%todaylink%>">Today</a></li>
		<li><a href="<%archivelink%>">Archives</a></li>
	</ul>

	<h2>About</h2>

	<ul>
		<li><a href="http://www.nucleuscms.org/">Nucleus</a> Power!</li>
	</ul>
</div><!-- stuffbar end -->

</body>
</html>

现在我们来编辑皮肤中的下列文件：（并没有完全定义，本例子只是告诉你最重要的东西而已）

Main Index 主索引文件

<%parsedinclude(pagehead.inc)%>

<h1>My Blog</h1>

<%blog(vista/main,10)%>

<%parsedinclude(pagefoot.inc)%>

Item Pages 文章页

<%parsedinclude(pagehead.inc)%>

<h1>My Blog</h1>

<h2>Item</h2>
<%item(vista/detailed)%>

<h2>Comments</h2>
<%comments(vista/detailed)%>

<h2>Add Comment</h2>
<%commentform%>

<%parsedinclude(pagefoot.inc)%>

我们将上面2个文件命名为 vista/main 和 vista/detailed。

Archive List 档案列表

<%parsedinclude(pagehead.inc)%>

<h1>My Blog</h1>

<%archivelist(vista/main)%>

<%parsedinclude(pagefoot.inc)%>

Archive 档案

<%parsedinclude(pagehead.inc)%>

<h1>My Blog</h1>

<%archive(vista/main)%>

<%parsedinclude(pagefoot.inc)%>

导出皮肤

当上述操作都完成后，我们就能测试使用皮肤的导入、导出功能了。下面是操作：

在皮肤导入导出页面中，在皮肤和模板中选择 vista, vista/detailed 和 vista/main
如果有必要，在点击“导出”按钮前可以加入一些关于此皮肤的文本描述。最终生成一个 skinbackup.xml 文件。
将该文件( skinbackup.xml)于其他文件保存在一个目录中。 directory.
将该皮肤目录压缩打包
OK，你现在就可以将该皮肤文件给其他人使用了。

导入皮肤

导入皮肤是一个相反的过程:

首先解压缩皮肤文档，你将得到一个皮肤目录（一般一个皮肤就是一个目录）并将其放在你的服务器皮肤目录下
在后台的导入导出页面，选择你要按章的皮肤，然后点“导入”
根据提示进行下一步操作
安装完成。你可以在设置中选择该皮肤了

关于皮肤和模板的问题，你可以在hexu.info获取更多信息。