一些 PBwiki 的實用技巧。

    1. tutorial/useful
    2. others' pbwiki
    3. 免費 wiki 使用自己的 CSS
    4. 隱藏煩人的廣告
    5. Widget
      1. 樹狀 SideBar
      2. Toggle
      3. Tag Cloud
      4. Tag Editor
    6. Search Box
    7. 做出螢光筆的效果
    8. 將 wiki page 嵌入別的網頁
    9. 一些進階的 WikiStyle


tutorial/useful

  • 中文WikiStyle：PBWiki的Wiki格式中文說明書。
  • PBwiki Central：PBwiki的非官方網站，裡面有一些PBwiki的使用撇步。
  • pbcss：關於 PBwiki 的 CSS 的介紹。
  • mycss：關於 PBwiki 的 CSS 設定。裡頭有非常詳細的資料，包含這個圖示化的結構。
  • plugins：讓不使用 rich text editor 的人也可以非常容易加入 PB wiki 支援的 plugins 。

others' pbwiki

（可以參考一下別人怎麼使用 Wiki）

免費 wiki 使用自己的 CSS

一樣可以傳上 pbwiki 的檔案中，但是不能用 wiki.css （也就是預設的css，會說需要 premium帳號）。
以 mywiki.css 為例，在 SideBar 中編輯原始碼，放入：

<raw escaped="0"><link href="http://YOURWIKINAME.pbwiki.com/f/mywiki.css" type="text/css" rel="stylesheet" /> </raw>

即可。

或省事點，直接寫成：

<raw escaped="0"><style> 
 你 想 要 改 變 的 CSS
</style></raw>

也可以。

隱藏煩人的廣告

PBwiki 最下面第三欄都是些煩人的廣告，想隱藏？
請在上面的 CSS 中加上：

#wiki-premium, #wiki-newfeatures, .ssb_wrap_class,.pb_bloglink {display:none;}

Widget

要使用 widget ，參考 http://widget.pbwiki.com/HowTo ，將
<script type="text/javascript" src="http://widget.pbwiki.com/f/widget_lib.js"></script>

安裝在 wiki 的 SideBar 頁中。
而當你要使用 widget 某個功能時，則將網站該功能頁面當中所提供的 script 安插在頁面。更詳細的部份要看各 script 的網頁。

樹狀 SideBar

稍微紀錄一下怎麼做目前的樹狀 SideBar：
除了 widget 的基本步驟，參考 Collapsible Toc ，除了上述的程式碼外，還要安插

<script>
widget.collapsibleToc("SomeUniqueId");
</script>

到想要改變的網頁。其中 SomeUniqueId 是指你要使用樹狀的部份。像在 SideBar 中我所使用的是 categories 。

而這個 script 如果要像原網頁那樣顯示，還必須修改 css。我自己用的則是針對中文字型再多一點修改：

.MegaToc {
   font-size:100%;
   list-style:none;
   margin-left:15px;
   padding-left:0px;
}
.MegaToc > li {
   line-height:160%;
}
.MegaToc ol {
   margin-left:0px;
   padding-left:10px;
   list-style:none;
   font-size:100%;
}
.MegaToc > li ol {
   font-size:100%;
}
.MegaToc a {
   line-height:100%;
}
.MegaTocClick {
   font-family:Courier,fixed;
   font-weight:bold;
   text-decoration:none;
   margin-right:5px;
   color:#9090f0;
}
.MegaTocSelected {
   font-weight:bold;
}

付費的可以放在 wiki.css 中。如果是免費的 wiki 要用的話，在 SideBar 中加上這一段：

<raw escaped=0>
<style>
  在 這 裡 放 入 上 列 的 CSS
</style>
</raw>

Toggle

參考：http://widget.pbwiki.com/installToggle
除了使用 widget 一定得加的之外，在 SideBar 加上下面這段。

<script>widget.installToggle(toggleObj,controlObj,togInner,styleStates,returnState);</script>

  • toggleObj: 如下的 ToggleMe ，要 toggle 的區段。
  • controlObj：控制的東西，如下是用一個連結 id="button"。
  • togInner：顯示的文字。預設是"Hide|Show"。
  • styleStates：狀態。預設是"block|none"。所以想要一開始不出現，則是"none|block"。
  • returnState：可以不用改。使連結不是真的連結（控制用）。
那麼如下面的程式碼就可以有 toggle 的效果。
<a href="#" id="Button"></a>
<div id="ToggleMe">
Hello world.<br />
<br />
I love you!
</div>

<script>
   widget.installToggle('ToggleMe','Button');
</script>

Tag Cloud

首頁的 tag cloud 的作法：http://widget.pbwiki.com/cloud

<script src='http://widget.pbwiki.com/f/widget_lib.js'></script>
<script>widget.tags.cloud();</script>

如果已裝 widget 就只要後半就行了。
要改樣式，cloud 的 id 是 "cloudwrap" 。

Tag Editor

程式碼如下，我將 style 的部份分開放到 wiki.css 中。
<raw escaped=0>
<!--CODE BEGINS HERE-->
<!--The following line is not necessary if you already have Widget (http://widget.pbwiki.com) installed-->
<script type="text/javascript" src="http://widget.pbwiki.com/f/widget_lib.js"></script>
<style>
#TagEditor { display: none; }

#wrapper-te {
   background: #eef0ff;
   padding: 1px;
   border: 1px solid #ccd0f3;
   width: 195px;
}

#tag-editor-control {
   text-align: center;
   background: #cceeff;
}
   #tag-editor-control a {
      text-decoration:none;
      font: bold 12px Tahoma,Arial,sans-serif;
      font-variant: small-caps;
   }
   #tag-editor-control a:hover {
      text-decoration:underline;
   }

#tagboxall {
   overflow: auto;
   height: 150px;
   background: #f6f6ff;
   margin: 3px 0;
   border: 1px solid #ccc;
   padding: 2px;
}
#tagboxall a {
   text-decoration: none;
   line-height: 11px;
   font: 11px Tahoma,Arial,sans-serif;
   color: #6a8aa0;
}
   #tagboxall a:hover {
      font-weight:  bold;
   }
#tagboxall div {
   line-height: 11px;
}
#tagboxall div input {
   line-height: 11px;
}
   #tagboxall .new {
      background: #ff8;
   }

#addnewtag input.addtag {
   width: 135px;
   border: 1px solid #ddf;
   margin-right: 5px;
}
#addnewtag input.addbtn {
   width: 45px;
   border: 1px outset #ddf;
   background: #cdf;
   cursor: pointer;
}
</style>

<script type="text/javascript">
function toggleTE() {
   var inner = document.getElementById('tag-editor-control').getElementsByTagName('a')[0];
   if (inner.innerHTML=='Show Tags') {
      document.getElementById('TagEditor').style.display = 'block';
      inner.innerHTML = 'Hide Tags';
   } else {
      document.getElementById('TagEditor').style.display = 'none';
      inner.innerHTML = 'Show Tags';
   }
}
</script>

<div id="wrapper-te">
  <div id="tag-editor-control"><a href="#" onclick="toggleTE();">Show Tags</a></div>
  <div id="tag-editor-main"><script type="text/javascript">widget.tags.editor();</script></div>
</div>
<!--CODE ENDS HERE-->
</raw>

Search Box

<div class="my-search-box" id="my-search-box">
<form action="/FindPage" method="get">
<input type="text" name="SearchFor" class="my-input-search" id="my-input-search" value="search here" onfocus="this.value=''" />
</form>
</div>

做出螢光筆的效果

雖然用wysiwyg來做應該很容易，不過看到還是覺得蠻好玩的…
http://non-educational.pbwiki.com/BackgroundExample
This is some text with background changed. As you can see, it only appears as a highlight.

將 wiki page 嵌入別的網頁

<script src="http://USERNAME.pbwiki.com/YourPage?raw=js"></script>
<iframe src="http://USERNAME.pbwiki.com/YourPage?raw=bare"></iframe>

or http://widget.pbwiki.com/includePage

iframe 可以使用 style ，如 style="width:600px;height:300px" 改變大小。

一些進階的 WikiStyle

<code>monospace</code>
<sup>superscript</sup>
<sub>subscript</sub>
def:<dl>definition</dl>

monospace
superscript
subscript
def:

definition


Page Information

  • 7 months ago [history]
  • View page source
  • You're not logged in
  • Tags: online pbwiki

Wiki Information

Recent PBwiki Blog Posts