Dokuwiki主题/模板制作

之前也有写过,不过已经删掉了,因为提到的方法什么的都过时了,很多内容也没说清楚。看评论时发现这方面的东西还是有人需要的,于是决定重新写一遍。对于主题/模板的制作,除了官方文档之外,也可以在符合 Dokuwiki 标准的 starter 模板基础上进行修改,不少不错的模板都是基于它的。和官方文档类似,这里以 Starter 模板为例。

先安装 Starter 模板,并将 lib/tpl/starter 重命名为 lib/tpl/[你的模板名称] (名称应仅包含 a-z 和 0-9),然后在配置管理器里选择这个新模板。

目录结构

Starter 模板的目录下有不少文件,其中必要的有:

  • main.php: 主要的页面布局文件,决定我们一般所看到的页面的布局
  • detail.php: 图片的详细信息页布局
  • mediamanager.php: 媒体管理器/选择器窗口的布局
  • style.ini: 样式控制文件,决定每个样式表应用的情形(屏幕、打印等),并定义一些全站通用的颜色
  • template.info.txt: 模板的信息文件,包括名字、作者的信息等。

页面布局 (HTML+PHP)

页面布局的三个文件中,通常只需要修改 main.php,因为它影响一般所看到的页面的布局。没有特别需求的话,detail.phpmediamanager.php 不必修改,也可以直接复制默认模板的。布局文件是HTML+PHP,可以调用 Dokuwiki 提供的模板函数来显示标题、维基内容等等,也可以调用全局变量。Starter 模板的 main.php 比较复杂,可以先看一个简单的例子

<html>
  <head><title><?php echo $conf['title']?></title></head>
  <body>
    <div class="dokuwiki">
      <?php tpl_content()?>
      <?php tpl_indexerWebBug()?>
    </div>
  </body>
</html>

这会在标题栏显示网站名称,在页面上显示维基的内容。其中 $conf 是一个全局变量,包含 Dokuwiki 的配置信息。而 tpl_content() 是一个模板函数,可以显示带目录的文章内容。另外一个tpl_indexerWebBug()是每个模板都必须有的函数,否则搜索的索引可能无法建立。

模板函数中的 tpl_includeFile() 可以引用模板目录下的其它文件,从而方便用户添加自定义的内容。比如在 main.php 中写

<head>
    <?php tpl_includeFile('meta.html') ?>
</head>

可以将当前目录下的 meta.html 的内容放入。另外,在被引用的文件中也可以使用 PHP 代码。默认模板和 Starter 模板都预先定义了一些钩子,参见 Include Hooks

页面样式 (CSS)

对于模板的样式,Dokuwiki 会先读取 style.ini 文件 (参考 devel:style.ini)。这个文件决定需要哪些 CSS/LESS 文件以及每个文件应该用于何种情形(屏幕,打印等),同时对全站通用的颜色占位符进行定义。比如

[stylesheets]
css/basic.css  = screen
css/design.less = screen
css/print.css  = print   [replacements]
__text__ = "#333" ; @ini_text

这表示 css/basic.csscss/design.less 将应用于屏幕显示,而 css/print.css 用于打印,同时定义了__text__占位符代表的颜色。之后只需编辑相应的 CSS/LESS 文件就可以了。在 CSS 中使用颜色占位符的示例如下

body {
    color: __text__;   
}

如果是 LESS 则是

body {
    color: @ini_text;
}

Dokuwiki模版Vector使用总结

Dokuwiki模版Vector使用总结

Posted on 2012 年 11 月 8 日   11373 Views

Contents [hide]

模版介绍

仿维基百科主题,有侧边栏、用户页、讨论页、标签页功能,支持中文。

可以自定义 LOGO、CSS 样式、侧栏、标签页等。所有修改都在 lib/tpl/vector/user 目录下。

  • 自定义 LOGO:将图片命名为 logo,扩展名可以是 png、gif、jpg。然后放入 user 目录下。
  • 自定义 Favicon:将图片命名为 favicon.ico,放入 user 目录。(最好再放一个在根目录,方便搜索引擎收录 favicon 图片)
  • 自定义 CSS:要改变页面的显示样式,编辑 user 目录下的 screen.css 文件。要改变打印样式,编辑 print.css
  • 自定义 JavaScript:编辑 user 目录下的 user.js 文件。需要在配置设置里激活——载入“vector/user /user.js“?
  • 自定义标签页:标签页就是上面那一排“文章”、“讨论”之类的,可以添加自己的。在 user 目录的 tabs.php 里编辑,文件里有例子可以参考。
  • 自定义底部按钮:在 user 目录下的 buttons.php 中,文件里有例子。
  • 自定义侧栏内容:可以添加自己的区块,在 user 目录下的 boxes.php 中,文件里有例子。

增加自定义顶部导航

在user/screen.css中添加css代码

/*导航条*/

#diynav {

width: 450px;

height: 20px;

background: transparent url(http://localhost/wiki/lib/images/back.png) top left no-repeat;

position: absolute;

top: 0;

left: 36%;

margin-left: -225px;

padding: 0;

font: 14px Arial;

list-style-type:none;

}

#diynav a {

display: block;

text-align:center;

}

#diynav a:link  {

color:#666;

text-decoration:none;

}

#diynav a:visited  {

color:#666;

text-decoration:none;

}

#diynav a:hover  {

color:#9AC0CD;

text-decoration:none;

font-weight:bold;

}

#diynav li {

float: left;

}

#diynav li a:hover{

background:#D9D9D9;

}

#diynav li:hover ul {

left: auto;

}

#diynav li.sfhover ul {

left: auto;

}

修改main.php,在结尾加入导航代码

1

<!–开始设置导航条–>

1

<!–导航条设置结束–>

用户自定义样式的使用

可以调整页面和目录字体

 

/*重定义页面文字大小*/

#bodyContent {

font-size:14px;

}

/*重定义目录文字大小*/

.toc .level1 {

font-size:14px;

}

.toc .level2 {

font-size:13px;

}

.toc .level3 {

font-size:12px;

}

重定义标题样式

 

/*重定义标题样式*/

div.dokuwiki h3 {

font-size:120%;

margin-left:40px;

border-bottom:none;

padding:0.2em 0.4em;

background-color:#DDEFBD;

}

Dokuwiki主题/模板制作

Dokuwiki主题/模板制作

之前也有写过,不过已经删掉了,因为提到的方法什么的都过时了,很多内容也没说清楚。看评论时发现这方面的东西还是有人需要的,于是决定重新写一遍。对于主题/模板的制作,除了官方文档之外,也可以在符合 Dokuwiki 标准的 starter 模板基础上进行修改,不少不错的模板都是基于它的。和官方文档类似,这里以 Starter 模板为例。

先安装 Starter 模板,并将 lib/tpl/starter 重命名为 lib/tpl/[你的模板名称] (名称应仅包含 a-z 和 0-9),然后在配置管理器里选择这个新模板。

目录结构

Starter 模板的目录下有不少文件,其中必要的有:

  • main.php: 主要的页面布局文件,决定我们一般所看到的页面的布局
  • detail.php: 图片的详细信息页布局
  • mediamanager.php: 媒体管理器/选择器窗口的布局
  • style.ini: 样式控制文件,决定每个样式表应用的情形(屏幕、打印等),并定义一些全站通用的颜色
  • template.info.txt: 模板的信息文件,包括名字、作者的信息等。

页面布局 (HTML+PHP)

页面布局的三个文件中,通常只需要修改 main.php,因为它影响一般所看到的页面的布局。没有特别需求的话,detail.phpmediamanager.php 不必修改,也可以直接复制默认模板的。布局文件是HTML+PHP,可以调用 Dokuwiki 提供的模板函数来显示标题、维基内容等等,也可以调用全局变量。Starter 模板的 main.php 比较复杂,可以先看一个简单的例子

<html>
  <head><title><?php echo $conf['title']?></title></head>
  <body>
    <div class="dokuwiki">
      <?php tpl_content()?>
      <?php tpl_indexerWebBug()?>
    </div>
  </body>
</html>

这会在标题栏显示网站名称,在页面上显示维基的内容。其中 $conf 是一个全局变量,包含 Dokuwiki 的配置信息。而 tpl_content() 是一个模板函数,可以显示带目录的文章内容。另外一个tpl_indexerWebBug()是每个模板都必须有的函数,否则搜索的索引可能无法建立。

模板函数中的 tpl_includeFile() 可以引用模板目录下的其它文件,从而方便用户添加自定义的内容。比如在 main.php 中写

<head>
    <?php tpl_includeFile('meta.html') ?>
</head>

可以将当前目录下的 meta.html 的内容放入。另外,在被引用的文件中也可以使用 PHP 代码。默认模板和 Starter 模板都预先定义了一些钩子,参见 Include Hooks

页面样式 (CSS)

对于模板的样式,Dokuwiki 会先读取 style.ini 文件 (参考 devel:style.ini)。这个文件决定需要哪些 CSS/LESS 文件以及每个文件应该用于何种情形(屏幕,打印等),同时对全站通用的颜色占位符进行定义。比如

[stylesheets]
css/basic.css  = screen
css/design.less = screen
css/print.css  = print   [replacements]
__text__ = "#333" ; @ini_text

这表示 css/basic.csscss/design.less 将应用于屏幕显示,而 css/print.css 用于打印,同时定义了__text__占位符代表的颜色。之后只需编辑相应的 CSS/LESS 文件就可以了。在 CSS 中使用颜色占位符的示例如下

body {
    color: __text__;   
}

如果是 LESS 则是

body {
    color: @ini_text;
}

Dokuwiki主题:Vector

用作Wiki和笔记的话,强烈推荐使用。不仅仅是因为它模仿了Mediawiki,更主要的是它的自定义能力,不但强大而且简单。而且很多自定义的内容作者已经提供好了,你只需Copy and Paste就行了。

官方说明请走:http://www.dokuwiki.org/template:vector

基本设置

“管理”——“配置设置”——“Vector模板设置”里有基本的设置选项。多数情况下,你只需要在这里进行修改。

定制

你可以添加自己的LOGO、CSS样式、侧栏、标签页等。所有修改都应在lib/tpl/vector/user目录下进行。

  • 自定义LOGO:将图片命名为logo,扩展名可以是png、gif、jpg。然后放入user目录下。
  • 自定义favicon:将图片命名为favicon.ico,放入user目录。
  • 自定义CSS:要改变页面的显示样式,编辑user目录下的screen.css文件。要改变打印样式,编辑print.css
  • 自定义JavaScript:编辑user目录下的user.js文件。需要在配置设置里激活——载入“vector/user /user.js“?
  • 自定义标签页:标签页就是上面那一排“文章”、“讨论”之类的,可以添加自己的。在user目录的tabs.php里编辑,里面有例子可以参考。
  • 自定义底部按钮:在user目录下的buttons.php中,有例子。
  • 自定义侧栏内容:可以添加自己的区块,在user目录下的boxes.php中,有例子。

一些示例

增大侧栏宽度,并居中LOGO。比如增大到16em宽:

  div#footer {
      margin-left:16em;
  }
  #head-base{
      margin-left:16em;
  }
  #left-navigation{
      left:16em;   }
  div#content  {
      margin-left:16em;
  }
  div#panel {   width:16em;
  }
  #p-logo{
      width:16em;
  } 
  #p-logo a{
      width:16em;
  }

为侧栏的无序列表添加缩进:

  div#panel div.portal ul {
      margin-top: 0.5em !important;
      margin-left: 0.8em !important;
  }
  div#panel div.portal ul ul{
      margin-left: 2em !important;
  }

为侧栏的导航列表添加列表样式。默认为无,这里添加square样式,类似的也可以为其他的添加:

  div#panel ul li {
     overflow: visible !important;
  }
  div#panel #p-navigation ul {
      list-style-type: square !important;
      margin-left:2.0em !important;
  }

<code>标签默认是白色背景,有时和其他元素结合使用时很难看,可以改为透明:

  code{
      background-color:transparent !important;
  }
  • 你好。 我也是装这个模板。
    可是,一选这个模板的时候。整个网站的样式都没了。
    但选择默认的又全好的。在网上查好久了,也没解决掉。

Dokuwiki插件与主题推荐

Dokuwiki插件与主题推荐

只是一个列表和简要的功能介绍,具体使用看相关文档

主题

Vector是模仿Wikipedia/Mediawiki最新样式的主题,自定义比较能力强。另外其实Dokuwiki现在的默认主题非常不错,也很适合写博客。

如果希望自己写,可以参考这里的文档以及Dokuwiki提供的一个初始模板

插件

外观

  • wrap:几乎涵盖大多数外观、排版上的要求。

交互

  • discussion:添加评论功能,需要pagelist插件的支持。
  • disqus: 添加评论功能,使用 DISQUS 的服务。
  • avatar:使用gravatar头像,多用于评论里的头像显示
  • captcha:验证码

标签

  • tag:用标签来组织内容
  • tagentry:在编辑栏下提供所有标签的列表,方便选择
  • cloud:标签云

导航

  • indexmenu:功能强大。但我不喜欢它默认的样式,又懒得去改。
  • indexmenu2:功能也不错,相对indexmenu略微逊色点
  • pagequery:前面两个主要用于生成树状结构的导航,这个完全不一样,非常值得一看。
  • simpleindex: 生成类似内置索引的简单导航,仅适用于顶层命名空间。
  • simplenavi: 生成一个简单的导航。

其他

还有很多看起来非常不错的,例如画图、化学、图片/视频浏览等,不过自己没用过。

Dokuwiki 自動切換 Mobile 呈現頁面方式

因為最近開始使用 hTC Incredible S , 有這樣的需求, 很快找了一些現成的資料, 立即實現這樣的功能.

處理程序

  • 下載安裝 dokumobile Template

    cd /var/www/html/wiki/lib/tpl
    wget http://kjh.ca/dokumobile_2010_02_28.zip
    unzip dokumobile_2010_02_28.zip
  • 會出現 dokumobile 目錄, 然後修改 top_bar.php 第9-11行, 解決無法出現表頭圖樣的問題, 修改如下

         <td width="33%" style="border:0;" align="left"><img src="<?php echo DOKU_TPL?>images/icon_left.png" id="toggle_toc" /></td>
         <td width="33%" style="border:0;" align="center"><img src="<?php echo DOKU_TPL?>images/icon_middle.png" id="toggle_admin" /></td>
         <td width="33%" style="border:0;" align="right"><img src="<?php echo DOKU_TPL?>images/icon_right.png" id="toggle_nav" /></td>
  • 下載 Mobile_Detect.php 到 conf 目錄內

    cd /var/www/html/wiki/conf
    wget http://php-mobile-detect.googlecode.com/files/Mobile_Detect.php
  • 修改 inc/init.php 1)

    vi /var/www/html/wiki/inc/init.php
    • 在 72-77 行加入以下程式碼

      // for Mobile http://www.dokuwiki.org/template:dokumobile include(DOKU_CONF . "Mobile_Detect.php"); $mdetect = new Mobile_Detect(); if ($mdetect->isMobile()) {$conf['template']='dokumobile';}
    • 在原本 121-127 define Template baseURL, define real Template directory 要取消不執行

      #// define Template baseURL #if(!defined('DOKU_TPL')) define('DOKU_TPL', #        DOKU_BASE.'lib/tpl/'.$conf['template'].'/');  #// define real Template directory #if(!defined('DOKU_TPLINC')) define('DOKU_TPLINC', #        DOKU_INC.'lib/tpl/'.$conf['template'].'/');