神奇的javaScript实现的无需服务器支持的WIKI [摘]

key words: wiki tiddlyWiki 客户端wiki

今天的主角是 tiddlywiki

这个玩意真不错，N多时候其实说实在的，用服务器并不方便，能有一个放在我自己笔记本硬盘里的wiki，那是多么幸福的事啊 :)

今天真的有这样的wiki,纯粹用javaScript + css + html实现的wiki,功能强大，可配置性好，你只需要在里面增加某个标题的内容，就可以实现样式，功能，以及其他plugin 的扩展

好了，就夸到这了

那么，对我来说有什么用呢，我感觉最有用的就是当一个Notebook,一个可以随时跟着自己的贴身秘书，或者说是给自己看的blog,比如，把你日常使用需要的资源，做一个列表，每日工作计划，每日的灵感等，写在这里，只有你自己看，便于日后查找。

下面是一幅截图



下面是一些基本使用的语法:

* 粗体：左右各两个单引号「'」
* 斜体：左右各两个斜号「/」
* 加底线：左右各两个底线「_」
* 删除的文字：左右各两个等号「=」
* 上标字：左右各两个「^」
* 下标字：左右各两个波浪号「~」
* 字体颜色：左右各两个小老鼠「@」，並且在前两个@之后緊接著「color(颜色名):」的语法。
* 字体背景颜色：左右各两个小老鼠「@」，並且在前两个@之后緊接著「bgcolor(颜色名):」的语法。

如果你要修改样式，只要在systemTiddlers 目录下增加一篇标题为 StyleSheet的css样式即可,这里是我正在用得一个css， 从 这儿 copy过来的，感觉不错

1. popup{
padding-left: 2px !important;
padding-bottom: 2px !important;
}

1. popup *{
border: 0 !important;
}

1. popup hr {
border-top: solid 1px #ccc !important;
border-left: none;
border-right: none;
border-bottom: none;
height: 1px;
color: #ccc;
width: 98%;
}

1. popup a:hover{
color: black !important;
}

body {
margin: 0px;
background-color: #e4e4e4;
font-size: 9pt;
font-family: tahoma,arial,helvetica;
}

a:link, a:visited, a:hover, a:active {
text-decoration: none;
}

1. header {
border-bottom: 1px solid #458;
margin-bottom: 0em;
}

1. titleLine {
color: #fff;
background: #bcd;
padding: 0.7em 1em 1em 1em;
}

1. titleLine a {
text-decoration: none;
color: #9ab;
}

1. siteTitle {
font-size: 40pt;
font-weight: bold;
padding-left: 20px;
color: #9ab;
}

1. siteSubtitle {
font-size: 12pt;
font-family: georgia,times;
font-style: italic;
color: #457;
display: block;
position: relative;
bottom: 5px;
left: 0px;
padding-left: 70px;
}

1. mainMenu {
font-size: 12px;
float: left;
width: 13em;
border: 1px solid #aaa;
margin: .5em 1em .5em 1em;
background: #f3f3f3;
line-height: 125%;
color: black;
text-align: right;
padding: 0;
}

1. mainMenu .tiddlyLink, #mainMenu a.button{
display: block;
text-decoration: none;
width: 12em;
padding: .25em .5em;
color: #444;
text-transform: capitalize;
}

1. mainMenu a:hover {
color: #000 !important;
background-color: #bcd !important;
}

1. displayArea {
margin: 1em 14em 0em 15em;
}

1. messageArea {
background-color: #5a84ad;
color: #fff;
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 0em 0em 0.6em 0em;
border-bottom: 1px solid #458;
display: none;
}

1. messageArea a:link, #messageArea a:visited {
display: inline;
text-decoration: underline;
color: #ddf;
}

1. messageArea a:hover, #messageArea a:active{
color: #fff;
}

.tiddler {
border: 1px solid #aaa;
margin: 0 10px 20px;
padding: 8px;
padding-top:0;
font-family: arial,georgia,times;
background-color: white;
width: auto;
overflow: hidden;
}

.innerTiddler {
padding: 0.7em 1em 1em 0.8em;
font-size: 9pt;
}

1. displayArea .tiddlyLinkExisting {
font-weight: bold;
}

1. displayArea .tiddlyLinkNonExisting {
font-style: italic;
}

1. displayArea .externalLink {
text-decoration: underline;
}
.title {
font-family: tahoma,arial,helvetica;
font-size: 13pt;
color: #469;
font-weight: bold;
}

.toolbar {
font-family: tahoma,arial,helvetica;
font-weight: normal;
font-size: 8pt;
padding: 0em 0em 0em 1em;
color: #aaa !important;
visibility: hidden;
}

.toolbar a{
padding: 0.2em 0.4em 0.2em 0.4em;
color: #888 !important;
}

.toolbar a:hover{
color: black;
background-color: #e4e4e4 !important;
border: 1px solid #aaa !important;
margin-left: -1px;
margin-right: -1px;
}

.toolbar a:active{
color: #666;
}

.viewer a.button{
border: 0;
background-color: transparent !important;
padding: 0em;
color: #888 !important;
border: 1px solid transparent;
}

.editorFooter a:hover, .footer a.button {
color: #888 !important;
}

.editorFooter a:hover, .footer a:hover{
color: black;
background-color: #e4e4e4 !important;
border: 1px solid #aaa !important;
margin-left: -1px;
margin-right: -1px;
}

.viewer a.button:hover{
color: black;
background-color: #e4e4e4 !important;
border: 1px solid #aaa !important;
}

.viewer a.button,.editorFooter a:hover, .footer a.button {
color: #666;
}

1. popup {
display: none;
position: absolute;
top: 1.5em;
left: 13.25em;
font-size: 8pt;
color: #888;
background-color: #e4e4e4;
padding: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #330000;
border-right: 1px solid #330000;
border-left: 1px solid #aaa;
}

1. popup a {
display: block;
color: #888;
min-width: 8em;
border: 0;
margin: 0;
}

1. popup a:hover {
background-color: #e4e4e4;
color: black;
}

.body {
border-top:1px solid #ccc;
padding-top: 0.5em;
margin-top:0.3em;
overflow: hidden;
}

.viewer {
color: black;
line-height: 140%;
}

.viewer a:link, .body a:visited{
color: #922;
}

.viewer a:hover {
color: #b44;
background-color: transparent;
text-decoration: none;
}

.viewer blockquote {
font-size: 8pt;
line-height: 150%;
border-left: 1px solid #ccc;
padding-left: 0.8em;
margin-left: 2.5em;
}

.viewer ul {
margin-left: 0.5em;
padding-left: 1.5em;
}

.viewer ol {
margin-left: 0.5em;
padding-left: 1.5em;
}

/*============================================Headings==============*/

.viewer h1,.viewer h2,h3,h4,h5,h6 {
font-weight: bold;
text-decoration: none;
color: #469;
padding-left: .6em;
background-color: transparent !important;
border-bottom: 3px dotted #ccc;
}

.viewer h2 {
font-size: 12pt;
}

.viewer h3 {
font-size: 11pt;
}

.viewer h4 {
font-size: 10pt;
}

.viewer h5 {
font-size: 9pt;
}

.viewer h6 {
font-size: 8pt;
}

.viewer table {
font-size: 10pt;
border-collapse: collapse;
border: 2px solid #303030;
margin-left: 1.0em;
margin-right: 1.0em;
margin-top: 0.8em;
margin-bottom: 0.8em;
}

.viewer th {
background-color: #bcd;
border: 1px solid #606060;
padding: 3px;
}

.viewer td, tr {
border: 1px solid #606060;
padding: 3px;
}

.viewer caption {
font-size: smaller;
padding: 3px;
}

.viewer hr {
border-top: dashed 1px #606060;
border-left: none;
border-right: none;
border-bottom: none;
height: 1px;
color: #666666;
}

.highlight {
color: #000000;
background-color: #bcd;
}

.editor {
font-size: 8pt;
color: #402c74;
font-weight: normal;
}

.editor input {
display: block;
border: 1px solid black;
}

.editor textarea {
display: block;
font: inherit;
border: 1px solid black;
}

/*
===============Sidebar========
=================================

* /

1. sidebar {
float: right;
width: 14em;
font-size: 8pt;
border-left: 1px solid #aaa;
border-bottom:1px solid #aaa;
}

1. sidebarOptions {
color: #666 !important;
background-color: #f3f3f3 !important;
}

1. sidebar #sidebarOptions a:hover{
background-color: #f3f3f3;
}

1. contentWrapper #sidebar a:hover{
color: #b44;
text-decoration: underline;
}

1. contentWrapper .sidebarSubHeading {
font-size: 0.95em;
color: #236;
}

1. contentWrapper #commandPanel {
padding-top: 0.5em;
background-color: #f3f3f3;
color: black;
font-size: 8pt;
}

1. contentWrapper #commandPanel a {
display: block;
padding: 0.3em 0.2em 0.3em 1em;
color: #666;
text-decoration: none;
}

1. contentWrapper #commandPanel a:hover {
color: #922;
text-decoration: underline;
background-color: transparent;;
}

1. contentWrapper #commandPanel input {
margin: 0.4em 0em 0.3em 1em;
border: 1px solid black;
}

1. contentWrapper #optionsPanel {
display: none;
background-color: #f3f8ff;
padding: 0.5em 0.5em 0em 0.5em;
font-size: 7pt;
color: black;
}

1. contentWrapper #optionsPanel a:link, #optionsPanel a:visited {
color: #666;
font-weight: bold;
}

1. contentWrapper #optionsPanel a:hover {
color: #922;
text-decoration: underline;
background-color: transparent;
}

.optionsText {
margin-top: 0.25em;
margin-bottom: 0.75em;
}

.optionsItem {
}
/*========================================================================*/

1. contentWrapper #sidebarTabs {
background-color: #f3f3f3;
padding: 0em;
}

1. contentWrapper #sidebarTabs a {
color: black;
background-color: transparent;
}

1. contentWrapper #sidebarTabs a:hover {
color: #922; text-decoration: underline;
background-color: transparent;
}

1. contentWrapper #sidebarTabs a:active {
color: black;
}

1. contentWrapper .tabContentTags #popup {
display: none;
position: absolute;
top: 1em;
left: 13.25em;
font-size: 8pt;
color: #888;
background-color: #e4e4e4;
padding: 0;
margin-top: -2px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #330000;
border-right: 1px solid #330000;
border-left: 1px solid #aaa;
}

1. contentWrapper .tabContentTags #popup hr {
color: #ccc;
}

hr{
color: black !important;
}

1. contentWrapper .tabContentTags #popup a {
display: block;
color: #888;
min-width: 8em;
border: 0;
margin: 0;
height: 1.2em;
}

1. contentWrapper .tabContentTags #popup a:hover {
background-color: #e4e4e4;
color: black;
}

1. contentWrapper a.tab {
font-weight: normal;
display: inline;
margin: 0px 1px;
border:1px solid #aaa;
border-bottom:none;
}

1. contentWrapper a.tabSelected {
background-color: #e6e6e6 !important;
padding: 2px 4px 2px 4px;
}

1. contentWrapper a.tabUnselected {
background-color: #f3f3f3;
padding: 2px 4px 0px 4px;
}

/*===========================================================================================*/
/*===========================================================================================*/

1. sidebarTabs{
margin: 0;
padding: 0;
}

1. contentWrapper .tabContents {
background-color: #e6e6e6;
border-bottom: solid #aaa 1px;
}

1. contentWrapper .tabContents a.tiddlyLink, #contentWrapper .tabContents a.button{
background-color: #e6e6e6;
color: #922 !important;
}

1. contentWrapper .tabContents a:hover{
color: #b44 !important;
}

1. contentWrapper .txtMoreTab a.tabUnselected {
background-color: #e6e6e6;
padding: 2px 4px 0px 4px;
}

1. contentWrapper .txtMoreTab a.tabSelected {
background-color: #ccc !important;
padding: 2px 4px 2px 4px;
}

.txtMoreTab .tabContents {
background-color: #ccc !important;
border-bottom: solid #aaa 1px;
}

.txtMoreTab .tabContents a{
background-color: transparent !important;
}

1. licensePanel {
padding: 0.5em 0.2em 0.5em 0.2em;
}

1. licensePanel a {
display: block;
padding: 0.2em 0.2em 0.2em 0.2em;
color: #555;
}

1. licensePanel a:hover {
text-decoration: none;
color: #922;
background-color: transparent;
}

1. storeArea, #copyright {
display: none;
}

1. floater {
font-size: 10pt;
visibility: hidden;
color: white;
border: 1px solid #666;
background-color: white;
position: absolute;
padding: 1em 1em 1em 1em;
display:none;
}

@media print {

1. mainMenu {
display: none;
}

1. displayArea {
margin: 1em 1em 0em 1em;
}

1. sidebar {
display: none;
}

}

有兴趣的朋友不妨一试 .

ps:中文的相应站点在这里

其他参考站点: http://www.blogjones.com/TiddlyWikiTutorial.html http://efms.emome.net/Web/Map/tiddlywiki/wikibar_demo_2.html http://members.ozemail.com.au/~grieth/?C=N;O=A
另外一个很好用的plugin 是: wikibar,安装如下:

copy WikiBar plugin as a tiddler with "systemConfig" tag

edit your EditTemplate tiddler, put wikibar macro into it

put

<span macro='wikibar button'>

inside

<div class='toolbar'>

put

<div class='editor' macro='wikibar'></div>

anywhere you like. If you don't do this, wikibar is on top of edit area by default.

ps. refer to EditTemplate for more detail

posted on 2006-06-11 15:38 Alex 阅读(958) 评论(3) 编辑 收藏 收藏至365Key 所属分类: web技术

评论

你这个Wiki的中文是怎么整出来的? 回复


# re: 神奇的javaScript实现的无需服务器支持的WIKI 2006-06-12 10:34 HH
如果不能共享，Wiki还叫Wiki吗？ 回复


# re: 神奇的javaScript实现的无需服务器支持的WIKI 2006-06-12 14:35 Alex
@wolfsquare
到这个中文站点下载，可以下载中文的.
http://web.nlhs.tyc.edu.tw/~lss/wiki/TiddlyWikiTutorialTW.html

@HH
这个也可以共享的，你可以google一下，有很多站点作的.

当然，easy carry显然是它的一个卖点.

http://www.blogjava.net/alex/archive/2006/03/02/33228.html[转载]Meta标签详解

# re: 神奇的javaScript实现的无需服务器支持的WIKI 2006-06-12 09:26 wolfsquare