✨ 欢迎!!
我是猹道俎司 闰土。
您现在即将进入一个为完全萌新写的建站指导。
如果你是资深大佬,这里有一杯专为你准备的猹🍵,温着刚刚好🫖!!
喝完以后就请回到诸界之门休息吧。
各位新晋猹友,里边请!我打包票各位8分钟内找到属于自己的猹!
📚 更新内容
🆕v0.40更新内容
调整整体版式,更方便阅读。
修复了部分bug
新增了一些bug
增加 ⚙️ 功能性代码->制表符教程
修改部分版式
修复了部分bug
新增了一些bug
表情查询(感谢Mr Xanny!)
修复了部分bug
新增了一些bug
开始之前了解后会对你有所帮助的东西
📄 CSS
所谓CSS指的是一种网页开发技术,用于装饰网页,你可以理解为网页版式设计。
🎨 RGB颜色码
电脑使用的颜色识别方式是RGB码,你在个性化网页时调色需要用到
以#xxxxxx的形式出现
另外,一些基本颜色可以直接取用,比如red红 blue蓝 green绿等可以直接输英语。
点击进入RGB码对照表
🖼️ 图床
所谓图床是用来将图片上传网络保存,并获取图片外链的程序。
wikidot建站的免费存储空间只有300MB,不适合存放大量图片,因此使用外链可以有效减轻网页负担。
点击进入SM图床
另外,这个图床居然有独立的安卓APP!
点击前往GitHub下载 大小22.4MB
ℹ️ 其他内容
表情/小图标查询
免费主题中心
懒人网
酷站代码
1️⃣ 注册
由于建站需要外邮注册,这里提供了一种QQ邮箱成功建站的方法
2️⃣ 建站
注册完后进入个人中心“网站”标签页就可以建站。
如果这几个模板不能满足你,你可以随便选一个,稍后我们再去设置
然后我们返回个人中心,点击“Admin panel”(管理面板)
这里可以看到css模板链接入口,
我们可以从
主题中心找到自己想要的主题,复制链接粘贴在这里。
这样就算建完了。
wikidot的页面编辑自由度比较高,这就可能导致上手有一点难度,下面将为你介绍一下相关操作,不至于让你不知从何下手。
1️⃣ 编辑规则
wikidot预设了许多编辑入口,一般就在每个页面的底部。
我们可以看到许多按钮,第一个就是编辑,这个“编辑”按钮是仅对当前页面正文内容生效的,不影响侧栏和顶栏。
2️⃣ 子页面
所谓子页面,就是从属于网站的页面,我们看到在网站域名末尾/后有内容,表示我们查看的是子页面。子页面可以用来跳转,省去创建新站的麻烦。
一些预设的子页面:
只要在域名后添上就可以进入,注意域名不允许出现汉字符号。
进入后点击页末“编辑”就可以修改内容。
- 主页 /start
- 侧栏 /nav:side
- 顶栏 /nav:top
- 搜索 /search:site
- 管理面板 /_admin
- 最近更改 /system:recent-changes
创建子页面
一个比较简单的方法就是直接在浏览器网站域名后加个/,再打上你想要的标题,进入后就会提示你不存在页面,需要创建。
比如这样:
我的网站是
http://kver.wikidot.com
那么我如果想建个叫“毁灭世界大魔王”的子页,那么我就输入
http://kver.wikidot.com/xihongshijing
效果是这样的:
然后我们点建立页面就好了。
🗒️ 这里将列出一些编辑器没有预设但你可能经常用的基本代码
wikidot页面编辑的交互性比较差,这意味着用户只能在编辑框里用字母和符号来完成页面编辑。
wikidot采用了自家的页面编辑语言,虽然比js、html等传统网页开发语言简单得多,但是用户必须重新学习。
⚠️ 以下内容在包括但不限于论坛的地方都可生效。
📂本页内容
1️⃣文本链接
2️⃣图片链接
3️⃣字体颜色
4️⃣字体大小
5️⃣文本位置
6️⃣通用表情/图标
1️⃣ 文本链接
格式
[http://网址 你要的文本]注意必须有协议前缀(http://)
[http://kver.wikidot.com/xihongshijing 毁灭世界大魔王]
效果
点击就能跳转到指定网址(页面)
毁灭世界大魔王
2️⃣ 图片外链
图片外链需要到图床去生成
格式
[[image 图片url外链 设置宽]]
[[image https://i.loli.net/2020/03/08/LaYmzrpgF4OSNBR.png width="300px"]]
效果
3️⃣ 自定义字颜色
格式
##RGB色码|你要的文字##
##red|毁灭世界大魔王##
效果
毁灭世界大魔王
4️⃣ 字体大小常用
格式
[[size 大小代码]]你要的文字[[/size]]
[[size smaller]]小点的字[[/size]]
[[size larger]]大点的字[[/size]]
[[size 80%]]正文字体大小的80%[[/size]]
[[size 1.5em]]正文字体大小的150%[[/size]]
效果
小点的字
大点的字
正文字体大小的80%
正文字体大小的150%
5️⃣ 文本位置
格式
[[<]]
左对齐
[[/<]]
[[>]]
右对齐
[[/>]]
[[=]]
居中
[[/=]]
= 一整行居中
效果
一整行居中
6️⃣ 插入表情/图标
在Emoji表情大全里,你可以找到许多网络通用表情符,含有许多可爱的颜文字。
注意,由于浏览程序差异,有些表情可能显示异常,有些表情在不同情况下显示样式也会不同,如果你想保险一些,你最好使用颜文字。
颜文字的兼容性要更好一些,并且已经相当丰富。
可以被直接复制,甚至直接以图案形式显示在你的编辑框内,你不用预览就能看到效果。
比如 😂
ℹ️ 其他
更多内容请参照代码片段选
⚠️ 注意,全是英文!
⚙️ 下面是一些常用的功能代码
这类代码能给你的网页添加一些方便阅读者操作的功能。
⚠️ 以下内容在包括但不限于论坛的地方都可生效。
📂本页内容
0️⃣ 目录
2️⃣ 绘制表格
3️⃣ 标签页
4️⃣ 折叠文本
5️⃣ 折叠列表(允许多层折叠)
首先是
1️⃣ 目录
格式
(对,代码就这么简单)
效果
(注意,这个代码会自动链接本页面内所有加过标题的文字,无视标签页代码。)
(要使部分标题不显示,在该标题前面的加号后附加一个星号。)
比如
点击对应标题可以实现跳转!
2️⃣ 绘制表格实例
格式
表格里的内容是可以随意修改的,而且兼容wikidot的语言,所以你可以通过超链接文字或者图片来实现跳转功能。
表格的样式会受到你的自定义主题的影响,在嵌套wikidot的各预装主题的详情页里有这些示例样式,介意的话就多留意一下。
单元格尺寸会默认自动匹配字符长度。
可以删除第一行代码来省去表头。
要确保格式正确,包括模板里的一些空格也最好不要省去。
||~ 期目 ||~ 题目 ||~ 作品收录 ||~ 时间 ||
|| 1 || 标题1 || 1 || 2020/9月 ||
|| 0 || 标题0 || 3 || 2020/8月 ||
注意一定要保证表头栏数和主体栏数一致。
效果
期目 |
题目 |
作品收录 |
时间 |
1 |
标题1 |
1 |
2020/9月 |
0 |
标题0 |
3 |
2020/8月 |
3️⃣ 标签页实例
以下部分代码重复放,可以做好多标签页
实例
[[tabview]]
[[tab 毁灭]]
文本
[[/tab]]
[[tab 世界]]
文本
[[/tab]]
[[tab 大]]
文本
[[/tab]]
[[tab 魔王]]
西红柿精
[[/tab]]
[[/tabview]]
4️⃣ 折叠文本实例
格式
[[collapsible]]
折叠文本
[[/collapsible]]
[[collapsible
show="+ 毁灭世界大魔王你在哪?"
hide="- 我看见你了!~"]]
西红柿精
[[/collapsible]]
[[collapsible hideLocation="both"]]
好
几
行
文
本
[[/collapsible]]
效果
点击可以展开、隐藏
5️⃣ 折叠列表实例
格式(“*”前面有几个空格就是第几层,“*”后面必须有一个空格)
[[div class="foldable-list-container"]]
* 大魔王
* 要
* 毁灭世界
* 用大炮
* 用西红柿
[[/div]]
效果(
注意 该代码效果无法预览)
ℹ️ 其他
更多内容请参照代码片段选
⚠️ 注意,又全是英文!
1️⃣ 插入html
如果要实现更加自由的功能或样式,就要用到js、html等代码了,刚好wikidot编辑支持插入这些语言。
这是编辑框上第二行最后一个预设代码。
使用
来实现插入
这类代码大多数比wikidot代码要复杂,但是如果你仔细研究,会发现有许多参数可以更改,来达到喜欢的效果。
比如下面这个代码中,“marquee direction”表示滚动方向,“height”就表示高。
改变它们,然后预览观察效果!
2️⃣ 滚动字幕
代码
[[html]]
水平滚动:
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滚动字幕</marquee>
垂直滚动:
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滚动字幕</marquee>
[[/html]]
效果
还有一个非常不错的留言板小部件Cbox,点击这里查看
当然,我们不可能让每个人都变成网页程序员,这里我给大家推荐几个免费的代码网站,那里一定有你想要的。
点击下面快速访问:
懒人网
酷站代码
如果你有更好更方便的,欢迎留言。