tutorial/useful
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:
除了 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" 改變大小。
<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.