31、定制博客主题：从基础到高级的全面指南

定制博客主题：从基础到高级的全面指南

在当今数字化的时代，拥有一个个性化的博客是展示自我、分享知识的重要方式。而定制博客主题则能让你的博客脱颖而出，吸引更多的读者。本文将详细介绍如何定制博客主题，包括编辑样式表、修改模板等操作，让你轻松打造出独具特色的博客。

1. 博客主题必备文件

在开始定制博客主题之前，我们需要了解每个博客主题必须具备的四个文件，它们分别是 weblog.vm 、 _day.vm 、 mystylesheet.css 和 theme.xml 。以下是这些文件的详细介绍：
| 文件名称 | 定义 | 提示 |
| — | — | — |
| weblog.vm | 描述博客的主页面 | 在这个文件中，你可以使用 Roller 和 Velocity 模板语言的宏和元素来设置博客的结构 |
| _day.vm | 描述如何显示博客中一天的文章 | 你可以在这里配置每个文章的标题、内容和评论的显示方式，例如根据 CSS 样式表的定义设置每个元素的字体颜色和大小 |
| mystylesheet.css | 样式表覆盖文件，定义博客使用的 CSS 样式代码 | 在这里定义博客的所有样式，如标题的大小和颜色、文章中使用的字体等 |
| theme.xml | 主题定义文件，描述博客中使用的每个文件 | 需要包含有关主题的一些基本数据、样式表文件、博客和 _day 模板，以及博客中使用的其他文件和/或资源 |

2. 编辑样式表覆盖文件

要改变新主题的视觉外观，首先需要编辑样式表覆盖文件 mystylesheet.css 。有两种编辑方式：直接在 Roller 主题目录中的 mytheme 目录下编辑文件，或者使用 Roller 的自定义主题功能。为了避免每次修改文件后都重启 Tomcat，我们选择使用 Roller 的自定义主题功能。以下是具体的操作步骤：
1. 打开网页浏览器，进入博客的“Front Page: Weblog Theme” 标签页，选择“Custom Theme” 选项，勾选 “I want to copy the templates from an existing theme into my weblog” 复选框，然后点击 “Update Theme” 按钮。
2. Roller 会显示成功消息。
3. 点击 “Templates” 链接，查看当前自定义空间中的模板列表。
4. 从模板列表中删除不需要的模板，如 custom.css 、 mytemplate 和 _css ，因为它们不属于 mytheme 主题。
5. 删除不需要的文件后，列表中应该只剩下两个模板。
6. 点击 “Stylesheet” 链接，开始编辑 mystylesheet.css 文件的代码。
7. 可以看到自定义样式表为空。点击 Roller 菜单栏中的 “Front Page” 链接，查看博客的当前首页。
8. 点击浏览器的返回按钮，返回样式表编辑页面，添加以下代码：

div.dayTitle {
    color:brown;
    font-weight:bold;
    font-size:90%;
    text-transform:uppercase;
    border-bottom:1px dotted #666;
}

.entryTitle {
    font-weight: bold;
}

9. 样式表现在应该包含以 /* 开头的行以及刚刚输入的代码。
10. 点击 “Save” 按钮应用更改，然后选择 “Front Page” 链接，查看输入的代码如何影响博客的视觉外观。
11. 比较步骤 7 和步骤 10 的截图，可以看到输入的代码改变了博客显示日期和文章标题的方式。点击浏览器的返回按钮，返回样式表编辑页面，在步骤 8 输入的代码上方添加以下代码：

a {
  text-decoration: none;
}

a:link {
  color: blue;
  font-weight: medium;
}

a:visited {
  color: purple;
  font-weight: medium;
}

a:hover {
  text-decoration: underline overline;
}

body {
    font-family:"Lucida Grande", lucida, Geneva, Arial, sans-serif;
    background:#FFFFCC;
}

12. 点击 “Save” 按钮，然后选择 “Front Page” 链接，查看博客的首页。
13. 点击返回按钮，返回样式表编辑页面。

2.1 代码解析

为了更好地理解上述代码的作用，我们来看一下 _day 模板的代码：

<div class="dayBox">
    <div class="dayTitle">
       $utils.formatDate($day, "EEEE MMM dd, yyyy")
    </div>
    #foreach( $entry in $entries )
    <div class="entryBox">
        <p class="entryTitle">$entry.title</p>
        <p class="entryContent">
            #if($model.permalink)
                $entry.displayContent
            #else
                $entry.displayContent($url.entry($entry.anchor))
            #end
        </p>
        <p class="entryInfo">
            Posted at 
              <a href="$url.entry($entry.anchor)">$utils.formatDate
              ($entry.pubTime, "hh:mma MMM dd, yyyy")</a>
            by $entry.creator.userName in <span 
              class="category">$entry.category.name</span>
              &nbsp;|&nbsp;
            #if ($utils.isUserAuthorizedToAuthor($entry.website))
                <a href="$url.editEntry($entry.anchor)">Edit</a> 
                  &nbsp;|&nbsp;
            #end
            #if($entry.commentsStillAllowed || $entry.commentCount > 
              0)  
            #set($link = "$url.comments($entry.anchor)" )
                <a href="$link"
                  class="commentsLink">Comments[$entry.commentCount]
                  </a>
            #end
        </p>
    </div>
    #end
</div>

其中，加粗的代码与我们在样式表中输入的 CSS 代码直接相关：
- <div class="dayTitle"> ： div 元素表示网页中的一个“分区”或部分，其中的 $utils.formatDate($day, "EEEE MMM dd, yyyy") 用于显示博客中包含一篇或多篇文章的每一天的日期和时间。 class="dayTitle" 代码段表示该分区将使用样式表中 .dayTitle 类定义的样式：

div.dayTitle {
    color:brown;
    font-weight:bold;
    font-size:90%;
    text-transform:uppercase;
    border-bottom:1px dotted #666;
}

这段 CSS 代码表示该分区内的每个文本元素将以棕色显示，字体加粗，大小为其他字体的 90%，文本将转换为大写，并且每个文本元素的底部将有一个 1 像素宽的灰色虚线边框。
- <p class="entryTitle">$entry.title</p> ： <p> HTML 标签表示网页中的一个段落， $entry.title 显示博客中一篇文章的标题。 class="entryTitle" 元素与样式表中的 .entryTitle 代码块相关：

.entryTitle { 
    font-weight: bold; 
} 

这段 CSS 代码表示该段落内的所有文本将加粗显示，即博客中每篇文章的标题将以加粗形式显示。
- 其余加粗的代码使用了 <a> 元素，即 HTML 中的锚点元素，用于在网页中显示链接，与样式表中的所有 a 元素相关：

a {
  text-decoration: none;
}
a:link {
  color: blue;
  font-weight: medium;
}
a:visited {
  color: purple;
  font-weight: medium;
}
a:hover {
  text-decoration: underline overline;
}

这些元素定义了博客中链接的显示方式。第一个代码块表示链接没有文本装饰（即链接不会像大多数网页那样下划线），每个链接的颜色为蓝色，字体粗细为中等，已访问链接的颜色为紫色。最后一个代码块表示当鼠标悬停在链接上时，链接将下划线和上划线。
- 最后一个代码块是：

body {
    font-family:"Lucida Grande", lucida, Geneva, Arial, sans-serif;
    background:#FFFFCC;
}

在这种情况下， body CSS 元素定义了用于显示博客数据的字体。包含多种字体是为了最大程度地提高浏览器兼容性。你可以尝试不同的字体和字体族，看看这些更改如何影响博客的数据显示方式。

3. 编辑博客模板

了解了如何编辑 mystylesheet.css 样式表覆盖文件以及 _day.vm 模板如何使用 CSS 样式和 Velocity 代码来显示博客数据后，接下来我们将学习如何编辑 weblog.vm 模板，以添加侧边栏和其他元素。以下是具体的操作步骤：
1. 打开网页浏览器，输入 http://yourhostname/roller/roller-ui/menu.rol 登录 Roller。
2. 登录后，点击博客中的 “Settings” 链接，进入 “Weblog Settings” 页面。
3. 在 “Weblog Settings” 页面中，点击 “Design” 标签，然后点击 “Stylesheet” 链接，查看自定义样式表代码。
4. 滚动样式表代码窗口，在末尾添加以下代码：

.rCategory li {
    font-size: 80%;
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

li.selected {
    font-weight: bold;
}

5. 点击 “Save” 按钮，然后选择 “Front Page” 链接，查看此代码如何影响博客的主页面。
6. 点击浏览器的返回按钮，返回样式表代码，在末尾添加以下代码：

.content_wrapper {
    width: 80%;
    float: right;
}

.content {
    padding: 0em 2em 2em 2em;
}

.sidebar_wrapper {
    width: 20%;
    float: left;
}

7. 点击 “Save” 按钮，然后点击 “Templates” 链接，查看主题中的模板列表。
8. 点击 “Weblog” 链接，编辑 weblog.vm 模板代码，在 </html> 标签之前添加以下代码：

<div class="sidebar_wrapper">
    <h2>Search</h2>
    <div class="sidebar">
        #showWeblogSearchForm($model.weblog false)
    </div>
</div>

9. 点击 “Save” 按钮，然后选择 “Front Page” 链接，查看输入的代码如何影响博客的主页面。
10. 点击浏览器的返回按钮，在最后一个 </div> 标签之前添加以下代码：

<h2>Links</h2>
<div class="sidebar">
    #set($rootFolder = $model.weblog.getBookmarkFolder("/"))
    #showBookmarkLinksList($rootFolder false false)
</div>

<h2>Navigation</h2>
<div class="sidebar">
    #showPageMenu($model.weblog)
    #showAuthorMenu(true)
</div>

11. 点击 “Save” 按钮，然后选择 “Front Page” 链接，查看输入的代码如何影响博客的主页面。
12. 点击浏览器的返回按钮，返回博客模板编辑页面，选择 “Stylesheet” 链接，进入样式表代码，将 .content_wrapper { 下方的 width: 80%; 行替换为 width: 79%; ，并在 sidebar_wrapper 代码块中添加以下代码：

font-size: 80%;
border-right: 1px dotted #666;

13. 点击 “Save” 按钮，然后选择 “Front Page” 链接，查看样式表代码的更改如何反映在博客的主页面上。

3.1 代码解析

在这个练习中，我们学习了如何操作博客主页面的一些 CSS 样式，以及如何使用 weblog.vm 模板中的 Velocity 属性、方法和宏。
- 在步骤 4 中，我们在样式表中添加了两个 CSS 代码块：

.rCategory li {
    font-size: 80%;
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

li.selected {
    font-weight: bold;
}

第一个代码块 .rCategory 由 #showWeblogCategoryLinksList 宏生成，该宏在 weblog.vm 文件中使用：

<center>
    #set($rootCategory = $model.weblog.getWeblogCategory("nil"))
    #showWeblogCategoryLinksList($rootCategory false false)
</center>

<center> 和 </center> HTML 标签表示它们之间的所有内容必须在页面上居中。第一个代码块获取博客的类别列表，第二个代码块是一个宏，用于生成在博客页面上显示该类别列表的 HTML 代码。在添加 .rCategory 和 li.selected 代码块到样式表之前，类别列表的显示如下：
| 元素 | 作用 |
| — | — |
| font-size: 80%; | 将文本的字体大小减小到原始值的 80% |
| display: inline; | 类别列表将内联显示（每个类别前后没有换行符） |
| list-style-type: none; | 每个类别名称之前不会显示圆盘或任何其他标记 |
| padding-right: 20px; | 每个类别名称的右侧有一个 20 像素宽的空白空间 |

第二个代码块 li.selected 只有一个元素：
| 元素 | 作用 |
| — | — |
| font-weight: bold; | 所选类别将以粗体文本显示，首次打开博客主页面时，“All” 类别名称将被选中 |

添加 .rCategory 和 li.selected 代码块到样式表后，类别列表的显示会发生相应变化。
- 在步骤 6 中，添加到样式表的 .content_wrapper 代码块影响 weblog.vm 文件中 <div class="content_wrapper"> 元素及其相应的关闭标签 </div> 之间的所有内容。该代码块将博客内容的宽度设置为占整个页面的 80%，并使其向右浮动。
- 第二个 CSS 代码块 .content 影响 weblog.vm 文件中 <div class="content"> 元素及其相应的关闭标签 </div> 之间的所有内容。它在顶部、底部、右侧和左侧边框之间创建一个空白空间。
- 第三个 CSS 代码块 .sidebar_wrapper 影响 weblog.vm 文件中 <div class="sidebar_wrapper"> 元素及其相应的关闭标签 </div> 之间的所有内容。它将博客侧边栏的宽度设置为占整个页面的 20%，并使其向左浮动。
- 在步骤 8 中添加的代码块通过 #showWeblogSearchForm($model.weblog false) 宏在博客的左侧边栏中创建一个搜索字段。
- 在步骤 11 中添加的代码块在博客的左侧边栏中添加了 “Links” 和 “Navigation” 部分。“Links” 部分包含一个书签列表（博客roll），由 #showBookmarkLinksList($rootFolder false false) 宏创建；“Navigation” 部分显示一个页面导航菜单，由 #showPageMenu($model.weblog) 宏创建，以及一个创作菜单，由 #showAuthorMenu(true) 宏创建。
- 在步骤 14 中，将 content_wrapper 部分的宽度从 80% 修改为 79%，以便在 sidebar_wrapper 部分的右侧添加一个 1 像素宽的灰色虚线边框，并将该部分的字体大小减小到 80%，以使侧边栏元素看起来不那么杂乱。

4. 完成博客主题定制

完成上述操作后，我们已经对博客主题进行了一系列的定制。接下来，我们需要将对样式表覆盖文件 mystylesheet.css 和 weblog.vm 文件所做的所有更改保存到一个安全的位置。具体操作如下：
1. 使用 Roller 的 “Stylesheet” 链接进入样式表，复制其中的所有代码，然后粘贴到 Desktop/chapter07/mytheme 目录下的 mystylesheet.css 文件中。
2. 对在 Roller 中修改的 weblog.vm 文件执行相同的操作。

这样，我们就可以将在 Roller 中对主题所做的更改保存到外部目录中。之后，你可以压缩主题目录，甚至与其他 Roller 用户分享！

5. 主题定义文件 theme.xml

最后，我们来了解一下主题定义文件 theme.xml 。该文件必须包含覆盖样式表、模板和博客主题中使用的资源。它使用 XML 语言语法，与我们之前看到的 HTML 代码非常相似。以下是 mytheme 目录中的 theme.xml 文件示例：

<?xml version="1.0" encoding="UTF-8"?>
<weblogtheme>
    <id>mytheme</id>
    <name>My First Roller Theme</name>
    <author>Alfonso Romero</author>
    <preview-image path="preview.jpg" />
    <stylesheet>
        <name>MyStylesheet</name>
        <description>Stylesheet Override File</description>
        <link>mystylesheet.css</link>
        <templateLanguage>velocity</templateLanguage>
        <contentsFile>mystylesheet.css</contentsFile>
    </stylesheet>
    <template action="weblog">
        <name>Weblog</name>
        <description>Main template of weblog</description>
        <link>weblog</link>
        <navbar>false</navbar>
        <hidden>true</hidden>
        <templateLanguage>velocity</templateLanguage>
        <contentType>text/html</contentType>
        <contentsFile>weblog.vm</contentsFile>
    </template>
    <template action="custom">
        <name>_day</name>
        <description>Displays one day of entries</description>
        <link>_day</link>
        <navbar>false</navbar>
        <hidden>true</hidden>
        <templateLanguage>velocity</templateLanguage>
        <contentType>text/html</contentType>
        <contentsFile>_day.vm</contentsFile>
    </template>
</weblogtheme>

<weblogtheme> XML 标签表示整个博客主题。在该标签内，必须包含以下几个元素：
- 主题的唯一 ID（ id ），按照惯例，该 ID 必须与主题的名称相同。
- 主题的名称。
- 作者的名称。
- 预览图像的路径。
- 覆盖样式表的信息。
- 博客模板的信息。
- _day 模板的信息。
- 博客中使用的任何其他模板的信息。
- 资源（如图像）的信息。

当你对主题满意时，应该为其拍摄一张快照，并将其包含在 mytheme 目录中。根据 theme.xml 文件的要求，快照文件必须命名为 preview.jpg 。如果你使用的是 Windows 系统，可以按下 Alt + Prt Scr 捕获活动窗口，然后打开 MS Paint，按下 Ctrl + V 将截图粘贴到 Paint 窗口中，最后保存图像。如果你想捕获整个屏幕，可以按下 Prt Scr 而不使用 Alt 。如果你使用的是 Ubuntu Linux 系统，也可以使用 Alt + Prt Scr （或仅使用 Prt Scr 捕获整个屏幕），然后将截图粘贴到你喜欢的绘图程序中，如 GIMP 图像编辑器。

在 chapter07 支持文件中，还包含一个名为 mytheme_final 的目录，其中包含我们在之前练习中看到的 weblog.vm 和 _day.vm 文件，以及完整的 mystylesheet.css 文件和一个 preview.jpg 图像文件。你可以以与 mytheme 目录相同的方式将该主题复制到你的 Roller 安装中，以查看它们之间的差异。

6. 总结与实践建议

通过本文的学习，你已经了解了如何定制博客主题，包括编辑样式表、修改模板等操作。以下是一些总结和实践建议：
- 定制博客主题可以让你的博客更加个性化，吸引更多的读者。
- 在编辑样式表和模板时，要注意代码的正确性和兼容性，避免出现错误。
- 可以多参考其他优秀的博客主题，学习它们的设计思路和代码实现。
- 不断尝试新的样式和布局，发挥自己的创意，打造出独一无二的博客。
- 遇到问题时，可以查阅相关的文档和资料，或者向其他开发者寻求帮助。

希望你能通过本文的指导，成功定制出属于自己的博客主题，享受博客创作的乐趣！

7. 常见问题解答

为了帮助你更好地应对定制博客主题过程中可能遇到的问题，下面整理了一些常见问题及解答：
| 问题 | 解答 |
| — | — |
| 公司公关部门想在博客中添加“About us”页面，该怎么做？ | 可以创建一个名为 About_us.vm 的自定义模板，将其复制到当前博客主题的目录中，并将其包含在 theme.xml 文件中，然后重启 Tomcat，以便 Roller 能够识别新模板。 |
| 如果想更改博客文章中使用的字体，应该怎么做？ | 需要编辑 CSS 样式表，在样式表中修改字体相关的属性。 |
| 可以在 Roller 博客的哪里添加书签列表？ | 可以在当前主题的 weblog.vm 文件中添加书签列表。 |

8. 流程回顾与总结

8.1 编辑样式表覆盖文件流程

graph LR
    A[进入 Front Page: Weblog Theme 标签页] --> B[选择 Custom Theme 选项]
    B --> C[勾选复制模板复选框]
    C --> D[点击 Update Theme 按钮]
    D --> E[点击 Templates 链接]
    E --> F[删除不需要的模板]
    F --> G[点击 Stylesheet 链接]
    G --> H[编辑样式表代码]
    H --> I[点击 Save 按钮]
    I --> J[查看博客外观变化]

8.2 编辑博客模板流程

graph LR
    A[登录 Roller] --> B[点击 Settings 链接]
    B --> C[进入 Weblog Settings 页面]
    C --> D[点击 Design 标签]
    D --> E[点击 Stylesheet 链接]
    E --> F[添加样式表代码]
    F --> G[点击 Save 按钮]
    G --> H[点击 Templates 链接]
    H --> I[点击 Weblog 链接]
    I --> J[编辑 weblog.vm 模板代码]
    J --> K[点击 Save 按钮]
    K --> L[查看博客外观变化]

9. 进一步探索与拓展

9.1 更多 Roller 宏、属性和方法

虽然在本文中我们介绍了一些常用的 Roller 宏、属性和方法，但实际上还有很多其他的可用资源。你可以查阅 Roller 模板指南，了解所有可用的宏、对象、属性和方法，并进行更多的实验和探索。

9.2 主题的持续优化

定制博客主题是一个持续的过程，你可以不断地对主题进行优化和改进。例如，你可以尝试不同的颜色搭配、字体样式和布局方式，以找到最适合自己博客风格的主题。

9.3 与其他用户分享主题

当你对自己创建的主题感到满意时，可以将其压缩并与其他 Roller 用户分享。这不仅可以展示你的成果，还可以与其他用户交流和学习，获取更多的反馈和建议。

10. 总结与展望

通过本文的介绍，你已经掌握了定制 Roller 博客主题的基本方法，包括编辑样式表覆盖文件、修改博客模板以及处理主题定义文件等。定制博客主题可以让你的博客更加个性化，吸引更多的读者，同时也能提升你在网页设计和代码编写方面的能力。

在未来的博客创作过程中，你可以继续深入探索 Roller 的各种功能和特性，不断优化和改进自己的博客主题。同时，也要保持学习和创新的精神，关注行业的最新动态和趋势，为自己的博客注入更多的活力和创意。

希望你在博客定制的道路上取得成功，享受博客创作带来的乐趣！如果你在实践过程中遇到任何问题，欢迎随时向社区或专业人士寻求帮助。祝你拥有一个独具特色的博客！