一些 PBwiki 的實用技巧。
(可以參考一下別人怎麼使用 Wiki)
一樣可以傳上 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 ,參考 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:
除了 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>
參考:http://widget.pbwiki.com/installToggle
除了使用 widget 一定得加的之外,在 SideBar 加上下面這段。
<script>widget.installToggle(toggleObj,controlObj,togInner,styleStates,returnState);</script>
那麼如下面的程式碼就可以有 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 的作法: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" 。
程式碼如下,我將 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>
<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.
<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" 改變大小。
<code>monospace</code> <sup>superscript</sup> <sub>subscript</sub> def:<dl>definition</dl>
monospace
superscript
subscript
def: