| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Files spread between Dropbox, Google Drive, Gmail, Slack, and more? Dokkio, a new product from the PBworks team, integrates and organizes them for you. Try it for free today.

View
 

PBwiki

Page history last edited by Reder 12 years, 2 months ago

一些 PBwiki 的實用技巧。

 


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.pbworks.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.pbworks.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

 


Comments (0)

You don't have permission to comment on this page.