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

原创 2006年06月15日 16:33:00
key words: wiki tiddlyWiki 客户端wiki

今天的主角是 tiddlywiki

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

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

好了,就夸到这了

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

下面是一幅截图
wiki.GIF




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

* 粗体:左右各两个单引号「'」
* 斜体:左右各两个斜号「/」
* 加底线:左右各两个底线「_」
* 删除的文字:左右各两个等号「
=
* 上标字:左右各两个「^」
* 下标字:左右各两个波浪号「~」
* 字体颜色:左右各两个小老鼠「@」,並且在前两个@之后緊接著「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

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

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

mediawiki -- 开放的wiki服务器

转自:http://www.cnitblog.com/coolfish/archive/2008/04/13/42295.aspx 另:站长百科有对mediawiki的详细介绍 ,链接:http:/...
  • muojie
  • muojie
  • 2012年04月21日 17:05
  • 673

Ubuntu 14.04 LTS 搭建wiki服务器

一.运行环境准备 1.安装apache2 : sudo apt-get install apache2 在浏览器地址栏中输入http://localhost/,出现以下信息表明安装成功 2....

Linux下Wiki服务器的搭建

一、准备工作   1、软件下载和安装         最主要的就是安装好Mysql+apache+PHP         测试apache能够解析index.php文件后就可以。 ...

神奇的sh:管道操作|原理 ,实现一个支持管道操作的grep

C程序的输入有参数和标准输入,

asp源码---wiki网站的开发与实现

  • 2009年08月14日 09:11
  • 756KB
  • 下载

【转】排序算法总结(摘至WIKI)

在计算机科学所使用的排序算法通常被分类为: 计算的复杂度(最差、平均、和最好性能),依据列表(list)的大小(n)。一般而言,好的性能是O(n log n),且坏的性能是O(n2)。对于一个排...

研发周报:神奇!1KB JavaScript代码编写的3D蜜蜂

摘要:忙碌的一周总算过去,闲暇时不妨来细细品味我们精心为你呈现的这份技术大餐。本期热点:神奇!1KB JavaScript代码编写的3D蜜蜂;魔兽之父专访:今年游戏产业会出现一场革命;回顾:那些被平台...
  • e_wsq
  • e_wsq
  • 2013年04月02日 12:17
  • 751
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:神奇的javaScript实现的无需服务器支持的WIKI [摘]
举报原因:
原因补充:

(最多只允许输入30个字)