Trac 定制_trac 自定义css-优快云博客

本文链接：https://blog.youkuaiyun.com/bryanliu1982/article/details/7068543

本文详细介绍了如何在Trac环境中利用WiKiProcessor实现多种语言的语法高亮，通过安装Pygments进行代码片段的美化展示。同时，文章阐述了如何自定义WiKiMacro生成页面索引，并提供了灵活的定制方法。此外，文中还展示了如何调整页面样式，包括字体、Table of content的位置和内容宽度，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法高亮

Trac用一个叫WiKiProcessor的功能来支持很多语言的语法高亮。

具体用法参考http://trac.edgewall.org/wiki/WikiProcessors

但是需要安装某一个语法高亮引擎，我选择的是Pygments，具体安装参考我的另一篇博文：安装Pygments，安装完后需重启Paache服务器才能起作用

安装WiKiMacro [[TOC]]

TOC是一个加强版的[[[TracGuiceToc]]，也就在页面显示一个Wiki页面的索引，方便用户导航，但是[[TracGuideToc]]只能显示默认的内容，而且不能改变(自己试试效果吧)

居然有这么一个好东西，想当初我都是手工建索引啊，真是苦逼啊

[[TOC]]可以灵活定制索引的内容，具体用法参考：TocMacro

安装方法如下（又是easy_install, so easy）：

easy_install http://trac-hacks.org/svn/tocmacro/0.11   # 0.11 and 0.12

自定义样式

首先我们需要写一个模板site.html 放到 {project_home}/template下(注意，修改site.html后需重启apache服务器)，内如如下：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:py="http://genshi.edgewall.org/"
      py:strip="">
    
   <head py:match="head" py:attrs="select('@*')">
    ${select('*|comment()|text()')}
    <link rel="stylesheet" type="text/css"
          href="${href.chrome('site/style.css')}" />
  </head>
  
</html>

href.chrome('site/style.css')

表明页面会添加自定义样式文件 {project_home}/htdocs/style.css

在其中我们可以覆盖原有的样式，比如下面的样式修改了字体，Table of content 固定位置，内容的宽度

body, th, tr {
 font: normal 13px  Verdana,"Microsoft YaHei",Simsun,Arial,sans-serif,'Bitstream Vera Sans',Helvetica,sans-serif;
}
.wiki-toc{
position:fixed;
right:1px;
top:1px;
}

.wikipage {
width: 87%;
}

定制后的图片如下，TOC固定在浏览器窗口的某个位置，不随页面滚动而滚动，为了尽量不遮住页面内容，所以将页面内容宽度设为87%