精选代码集

1.这是评分模块

它这么写

[[>]]
[[module Rate]]
[[/>]]

它这么显示:

评分: 0+x

结束。


2.这是讨论区

它这么写

+ 讨论区
[[module CSS]]

span.number.prw54353::before {
    content: ":";
}
span.number.prw54354::before {
    content: ":";
}
[[/module]]
[[module Comments]]

它这么显示

讨论区

新回复

结束。


3.学会用html

头 [[html]]
尾 [[/html]]

为什么要使用它?
wikidot虽是基于CSS语言的,但也只是基于,如果要使原CSS代码正常使用,请加上html的头尾。

事例
你写的

[[html]]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>这是title</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>
[[/html]]

你看到的:

结束。


4.精选div模块。

我们固有五个快捷div块。

[[div class="blockquote"]]
自定的引用,这是引用块的代码。
[[/div]]
[[div class="styled-quote"]]
初始风格
[[/div]]
[[div class="dark-styled-quote"]]
深色风格
[[/div]]
[[div class="lightblock"]]
浅色风格
[[/div]]
[[div class="darkblock"]]
纯黑风格
[[/div]]

分别打出来,它们将这么显示。

自定的引用,这是引用块的代码。

初始风格

深色风格

浅色风格

纯黑风格

你不妨尝试自定义一个。
例如scp基金会中的

[[div class="content-panel standalone" style="font-family: Courier New, Courier, monospace; width: 575px; padding: 10px 30px; margin: 20px auto; background: url(http://scp-wiki.wdfiles.com/local--files/about-the-scp-foundation/bg-marble.png) repeat; text-shadow: 1px 1px 1px rgba(0,0,0,.25)"]]
[[size 130%]]**人类到如今已经繁衍了250000年,只有最近的4000年是有意义的。**

所以,我们在将近4000年中在干嘛?不知道。可能我们在玩游戏。端坐在手机前就以为能掌控世界,这是不可能的,人类已经退化了。
[[image http://scp-wiki-down.wikidot.com/local--files/component:theme/logo_down  style="width: 63px; margin: 12px 15px 0 42px; float: left;"]]
**。。。。。**

**-- 我就是我**[[/size]]
[[/div]]

人类到如今已经繁衍了250000年,只有最近的4000年是有意义的。

所以,我们在将近4000年中在干嘛?不知道。可能我们在玩游戏。端坐在手机前就以为能掌控世界,这是不可能的,人类已经退化了。
url
。。。。。

— 我就是我


5.迭代


6.Adding A Site Logo

#header {
    height: 100px;
}
#header h1 a span{
    display: none;
}
#header h2 {
    display: none;
}
#header h1 a,#header h1 a:hover{
    margin: 0;
    padding: 0;
    background-image: url(http://mywikidotsite.wikidot.com/local--files/start/logo.jpg);
    height: 90px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 20px;
}

It will show like this:

结束。


7.Google Gadgets

Description

Google now offers tons of gadgets one can embed into web pages. The directory of gadgets is available at:

http://www.google.com/ig/directory?synd=open

Just find your gadget, click on Add this gadget to your webpage and Get the Code. Embed the code within the

Sorry, no match for the embedded content.
tags on your page.

These are the same elements you can use in your Google Homepage at http://www.google.com/ig.

Code(代码)

[[embed]]
<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/datetime.xml&up_color=red&synd=open&w=320&h=136&title=Date+%26+Time&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
[[/embed]]

它会这么显示:

结束。


8.Automatic Sitemap

By michal frackowiakmichal frackowiak

描述

It is quite important to have a nice and clean structure of the site. One of the best ways to do maintain such a structure is to use the "parent page" relation. This allows to:

display breadcrumb navigation element within pages
make nice sitemaps and listings
Below you will find a piece of code to make a "tree view" of pages also called "sitemap".

代码

If you want to start from the main page ("start"), just use the code:

[[module PageTree root="start" showRoot="true" depth="30"]]

它会这么显示

结束。


9.长短表格(Short and long table)

描述

表格各有长短之分。

||~ header ||~ header ||~ header ||||
|| cell-content || cell-content || cell-content ||
|| cell-content || cell-content || cell-content ||

insert the code here

like this
or this
toooooo longgggggg
longggggggg

结束。


10.Extra Side Bar(额外侧边栏)

By michal-frackowiakmichal-frackowiak

Description

Creates an extra side-bar using the floating div element. It is quite easy if you know CSS.

To use this feature, copy the code below into your wiki page.

代码

[[div style="float:right; width: 15em; padding: 0 1em; margin: 1em 0 1em 1em; border-left: solid #888888 1px; background-color: #FFFFFF;"]]
++ Side content

In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ....
[[module Members showSince="no"]]

[[/div]]

++ Main content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum placerat purus eget nunc. Class aptent 
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin cursus nisi sed massa. 
Curabitur a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
 Aliquam scelerisque mi sit amet pede. Etiam mollis ornare nulla. Donec eu massa. Aenean id nisl nec erat 
sollicitudin faucibus. In fringilla dui scelerisque nulla. Cras convallis posuere lacus.

Donec malesuada. Vestibulum pretium. Nullam euismod sem eget nunc nonummy dictum. In scelerisque tempus 
magna. Etiam

Side content

In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ….

Main content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum placerat purus eget nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin cursus nisi sed massa.
Curabitur a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam scelerisque mi sit amet pede. Etiam mollis ornare nulla. Donec eu massa. Aenean id nisl nec erat
sollicitudin faucibus. In fringilla dui scelerisque nulla. Cras convallis posuere lacus.

Donec malesuada. Vestibulum pretium. Nullam euismod sem eget nunc nonummy dictum. In scelerisque tempus
magna. Etiam

In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts…

结束。


11.Multicolumn Layout

By michal frackowiakmichal frackowiak

描述

OK, so you want a multicolumn layout. Unfortunately there are no special wiki tags for multicolumn layout but the result can be easily achieved using the [[div]] tags and adding CSS style to it.

There are 2 solutions to the problem depending on what you want:

Multicolumn for continuous text

So you have some piece of text and just want to apply multicolumn layout. This solution does not work in Internet Explorer 6 - 9.

You have to use CSS attributes:

{
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Where the -moz- ones are special mozilla (firefox) extensions , -webkit- ones are special Apple, Google and Nokia (Safari, Opera) extensions while the other follow CSS3 specifications. At the moment it is good to use all three. Only Internet Explorer (version 9) is not(yet) using one of these CSS3 specifications. IE users have to wait for IE(10):

代码

[[div class="fixmargin" style="-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px"]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
[[/div]]
[[module css]]
.fixmargin p {
  margin-top: 0;
}
[[/module]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit…

看起来如何?(HOW IT LOOKS)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo lectus, accumsan id, aliquam vitae, laoreet id, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Integer convallis. Nam ultricies. Sed feugiat sapien. Phasellus nulla. Mauris felis diam, hendrerit sed, interdum nec, pellentesque sed, est. Phasellus tellus justo, fringilla id, molestie a, consectetuer nec, enim. Nam placerat, diam id feugiat condimentum, magna nibh interdum dui, non tempor purus tellus in massa. Nunc tellus odio, pretium ut, interdum eu, mollis vitae, magna. Cras dolor. Nullam at erat.

Integer sed ligula non nulla pulvinar ultricies. Phasellus blandit. Vivamus fermentum pharetra nisl. Pellentesque elit. Phasellus laoreet lobortis augue. Sed vehicula. Aliquam erat volutpat. Proin bibendum quam ac pede. Suspendisse id erat. Etiam sodales neque.

Mauris aliquet pellentesque diam. Phasellus ultrices, velit nec ultricies

…………….
As you see the columns are nicely balanced.

Manual column breaking

This solution uses the float attribute to make columns. Use this if you want e.g. to put some text into the left column and some distinct content into the right one. Columns are not auto-balanced.

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License