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

神奇的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,安装如下:

1. copy WikiBar plugin as a tiddler with "systemConfig" tag
2. 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