log inhelp

 | 

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

  • Whenever you search in PBworks, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, and Slack. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.

View
 

PBwiki

Page history last edited by Reder 15 years, 3 months ago

一些 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.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.

Printable version