Skip to content

Commit

Permalink
docs: update links
Browse files Browse the repository at this point in the history
  • Loading branch information
linonetwo committed Mar 27, 2024
1 parent fc55b5b commit 5b8e6ed
Show file tree
Hide file tree
Showing 8 changed files with 22 additions and 23 deletions.
4 changes: 2 additions & 2 deletions src/doc/tutorials/en/001-beginning.tid
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ Before you officially start.
* You should first have a brief knowledge of git (e.g. clone, pull, push, add, commit, etc.) and install the git command line software;
* You should sign up for a <$text text="GitHub" /> account if you need automated build functionality and code management;
* You should understand what npm is and have a good grasp of common npm commands (such as install, run, etc.) and install <$text text="NodeJS" /> software;
* You'd better ideally have some experience using <$text text="TiddlyWiki" />;
* You can go into technologies related to HTML, CSS, <$text text="JavaScript" /> and <$text text="TypeScript" />;
* You'd better ideally have some experience using <$text text="TiddlyWiki" />; Note: A tutorial on detailed widget development is not included here, please read [[tiddlywiki.com/dev|https://tiddlywiki.com/dev/]] (or [[tw5-com|https://tiddlywiki.com/]] for beginners) to learn about it!
* You can go into technologies related to HTML, CSS, <$text text="JavaScript" /> and <$text text="TypeScript" />; You should head over to [[MDN - JavaScript|https://developer.mozilla.org/en-US/docs/Web/JavaScript]] or a video site to learn the basics first, and go to [[TypeScript Tutorial|https://www.typescripttutorial.net/]] to learn basic TS syntax.

! Start with an empty template

Expand Down
4 changes: 1 addition & 3 deletions src/doc/tutorials/en/003-typescript-dev.tid
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@ Let's go straight to the usage with an example.

A widget is a rendering unit for <$text text="TiddlyWiki" />, which is what you see as something like `<$xxx />`. <$text text="TiddlyWiki" /> has several built-in widgets that provide various functions such as text, links, images, citations, etc., and all kinds of <$text text="WikiText" /> are parsed and turned into widgets, so the widget is the most important and fundamental concept in <$text text=" TiddlyWiki" />.

Note: A tutorial on widget development will be done in the future, and anyone with knowledge is welcome for co-operation!

We want to create a wdiget that displays a random number and re-randomizes it when clicked, and we name this widget <$text text="RandomNumber" />. To achieve this, we add a `RandomNumberWidget.ts` file and a `RandomNumberWidget.ts.meta` file to the plugin development directory.

First write the following in `RandomNumberWidget.ts.meta`;

```
```yaml
title: $:/plugins/<author-name>/<plugin-name>/RandomNumberWidget.ts
type: application/javascript
module-type: widget
Expand Down
4 changes: 2 additions & 2 deletions src/doc/tutorials/en/004-compile-config.tid
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ Following the development specifications in the previous section allows us to ea

If a .meta is added to a script file it will be treated as an entry file, and the entry file will be compiled and the compiled result incorporated into the plugin and will not include the source file. If you wish to include the source file, you need to add this to the .meta file corresponding to the script file:

```
```yaml
Modern.TiddlyDev#IncludeSource: true
```

!! Excluding compilation

Further, if you do not want this script file to be compiled, you need to add this to the .meta:

```
```yaml
Modern.TiddlyDev#NoCompile: true
```

Expand Down
4 changes: 2 additions & 2 deletions src/doc/tutorials/zh/001-beginning.tid
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ type: text/vnd.tiddlywiki
* 你应当首先简要了解 git 的相关知识(如 clone、pull、push、add、commit 等),并安装 git 命令行软件;
* 你应当注册一个 <$text text="GitHub" /> 账号,如果你需要相关自动化构建功能和代码管理的话;
* 你应当了解什么是 npm,并掌握 npm 的常用指令(如 install、run 等),并安装 <$text text="NodeJS" /> 软件;
* 你最好有过一段时间的 <$text text="TiddlyWiki" /> 使用经验;
* 你可以去了解 HTML、CSS、<$text text="JavaScript" /> 和 <$text text="TypeScript" /> 的相关技术;
* 你最好有过一段时间的 <$text text="TiddlyWiki" /> 使用经验;''注意:widget 开发的具体教程在[[太微中文教程 插件开发|https://tw-cn.netlify.app/#%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91]]里,如果你尚未了解彻底太微,请前往那里学习!''
* 你可以去了解 HTML、CSS、<$text text="JavaScript" /> 和 <$text text="TypeScript" /> 的相关技术;你应该前往[[MDN - JavaScript|https://developer.mozilla.org/zh-CN/docs/Web/JavaScript]]或视频网站先学习一下基础,并到[[TypeScript 教程|https://wangdoc.com/typescript/]]学习基本的 TS 语法。

非常感谢 mabuqian(马不前) 同学分享的视频,非常的新手向,讲解了一些基本的用法,如果需要可以去看看:

Expand Down
19 changes: 10 additions & 9 deletions src/doc/tutorials/zh/002-create-a-plugin.tid
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ type: text/vnd.tiddlywiki

在创建一个插件之前,首先做一些科普:

# 在 <$text text="TiddlyWiki" /> 中,插件是指将若干 tiddler 的内容进行打包所得到的一个 tiddler。即插件本质上是若干 tiddler 打包得到的「压缩包」。
# 在 <$text text="TiddlyWiki" /> 中,插件是指将若干条目的内容进行打包所得到的一个条目。即插件本质上是若干条目打包得到的「压缩包」。

# 插件本身是一个 tiddler,其包含的被打包的那些 tiddler 被称为 shadow tiddler。shadow tiddler 的特点是,并不会独立存在于 wiki 中,而是在 wiki 加载时从其所在的插件中加载;同时,如果 wiki 中存在与 shadow tiddler 重名的普通 tiddler,则普通 tiddler 会覆盖 shadow tiddler 的内容(但不会删除 shadow tiddler),直到普通 tiddler 被删除或改名,才会恢复 shadow tiddler 本来的内容。通过这个原理可以实现『配置的默认值』,即将某个配置的默认值存储在 tiddler 中,若用户设置了新的值则创建普通 tiddler 来覆盖,而删除这个普通 tiddler 相当于恢复默认配置
# 插件本身是一个条目,其包含的被打包的那些条目被称为影子条目。影子条目的特点是,并不会独立存在于 wiki 中,而是在 wiki 加载时从其所在的插件中加载;同时,如果 wiki 中存在与影子条目重名的普通条目,则普通条目会覆盖影子条目的内容(但不会删除影子条目),直到普通条目被删除或改名,才会恢复影子条目本来的内容。通过这个原理可以实现『配置的默认值』,即将某个配置的默认值存储在条目中,若用户设置了新的值则创建普通条目来覆盖,而删除这个普通条目相当于恢复默认配置

# 插件的所有 shadow tiddlers 存储在插件 tiddler 的 text 字段中,使用 JSON 序列化的字符串存储。插件还包含其他字段,用于描述插件的版本、名称、加载时机和用途等,详见下文。
# 插件的所有影子条目存储在插件条目的 text 字段中,使用 JSON 序列化的字符串存储。插件还包含其他字段,用于描述插件的版本、名称、加载时机和用途等,详见下文。

# 由于插件是一个 tiddler,因此也一定要有一个 title,并且需要满足规范命名:`$:/plugins/<作者名>/<插件名>`,且其中的 shadow tiddlers 的 title 也最好是以 `$:/plugins/<作者名>/<插件名>/` 为前缀,这样便于管理与辨认。
# 由于插件是一个条目,因此也一定要有一个 title,并且需要满足规范命名:`$:/plugins/<作者名>/<插件名>`,且其中的影子条目的 title 也最好是以 `$:/plugins/<作者名>/<插件名>/` 为前缀,这样便于管理与辨认。

# 主题与语言包是插件的两个变种,三者在本质上是一样的,但插件更多提供的是功能上的补充,例如为 wiki 提供了播放音乐的功能;而主题(以`$:/themes/`为前缀)则主要提供视觉效果的改变,例如实现一个二次元风格的 wiki;而语言包(以`$:/languages/`为前缀)则为了提供多语言支持。我们这里主要就插件展开,其他两种,欢迎补充!

Expand All @@ -23,7 +23,7 @@ type: text/vnd.tiddlywiki

其次确定插件的名称,不多解释。

在确定以上两点后,你的插件的 title 就应当是 `$:/plugins/<作者名>/<插件名>`。
在确定以上两点后,你的插件的 `title` 字段就应当是 `$:/plugins/<作者名>/<插件名>`。

执行命令:

Expand All @@ -37,15 +37,16 @@ npm run new

还有一个 readme.tid 文件,其中的内容对应你的插件展示页面。


运行 `npm run dev` 打开网页,可以看到增加了一个插件:

<a class="tc-tiddlylink tc-tiddlylink-resolves tc-plugin-info tc-popup-handle tc-popup-absolute"><div class="tc-plugin-info-chunk tc-plugin-info-toggle"><button class="tc-btn-invisible tc-btn-dropdown">{{$:/core/images/chevron-right}}</button></div><div class="tc-plugin-info-chunk tc-plugin-info-icon">{{$:/core/images/plugin-generic-plugin}}</div><div class="tc-plugin-info-chunk tc-plugin-info-description"><h1><strong>my-plugin</strong>:&nbsp;My first plugin</h1><h2>~$:/plugins/my-name/my-plugin</h2><h2><div><em>0.0.1</em></div></h2></div></a>

! 添加 Shadow Tiddler
! 添加影子条目

现在这个插件还是空的,只有一个 readme,我们需要添加其他 shadow tiddler。为插件添加其他内容的是通过直接在插件文件夹中新增文件来实现的。而在网页中直接修改插件内容或者新增 tiddler 则是不能改变 shadow tiddler 的,请牢记。
现在这个插件还是空的,只有一个自述文件(Readme.tid),我们需要添加其他影子条目。为插件添加其他内容的是通过直接在插件文件夹中新增文件来实现的。而在网页中直接修改插件内容或者新增条目则是不能改变影子条目的,请牢记。

现在,我们在该文件夹下仿照 `readme.tid` 创建一个新的 tid 文件,其第一行改成你希望的 title (应当以`$:/xxx/xxx/xxx/`为前缀),后面的每一行都是`字段: 内容`,直到遇到一个空行,在空行之后都是 text 字段的内容。这样我们就为插件新增了一个 shadow tiddler
现在,我们在该文件夹下仿照 `readme.tid` 创建一个新的 tid 文件,其第一行改成你希望的 title (应当以`$:/xxx/xxx/xxx/`为前缀),后面的每一行都是`字段: 内容`,直到遇到一个空行,在空行之后都是 text 字段的内容。这样我们就为插件新增了一个影子条目

我们同样可以用这样的方式为插件添加其他内容,例如 css 文件、js 代码、图片、视频等。但请注意,若文件并非是`.tid`或`.json`,或者其中不包含title字段,就不会被插件所包含。因此,对于这样的文件,我们需要一个额外的 meta 文件来为其进行说明:

Expand Down Expand Up @@ -80,6 +81,6 @@ type: image/jpeg

同理,如果希望给1.jpg添加更多字段,可以照猫画虎,例如添加 tags 等字段。

以上,是为插件添加 shadow tiddler 的最简单最常用的方法,如果希望了解更多高级方法,请参考后文 [添加tiddler的多种方法] 篇。
以上,是为插件添加影子条目的最简单最常用的方法,如果希望了解更多高级方法,请参考后文 [添加tiddler的多种方法] 篇。

接下来,我们就该进入激动人心的 <$text text="TypeScript" /> 插件开发环节了,快进入下一页学习吧!
4 changes: 2 additions & 2 deletions src/doc/tutorials/zh/003-typescript-dev.tid
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ type: text/vnd.tiddlywiki

widget 是 <$text text="TiddlyWiki" /> 的渲染单位,也就是你看到的诸如 `<$xxx />` 的东西。<$text text="TiddlyWiki" /> 内置了若干 widget,提供了各种功能如文字、链接、图片、引用等,而所有的 <$text text="WikiText" /> 都会在解析后变成 widget。因此 widget 是 <$text text="TiddlyWiki" /> 中最重要和基础的概念。

因此我们尝试直接创建一个属于自己的 widget。注意:widget 开发的具体教程未来会做,欢迎有相关知识的大佬帮忙编写!
因此我们尝试直接创建一个属于自己的 widget。

我们希望创建这样一个 wdiget:其显示一个随机数字,并在点击其时重新随机,我们把这个 widget 其名为 <$text text="RandomNumber" />。为了达到这样的目的,我们在插件开发目录下添加一个 `RandomNumberWidget.ts` 文件和 `RandomNumberWidget.ts.meta` 文件。

首先在 `RandomNumberWidget.ts.meta` 中写如下内容;

```
```yaml
title: $:/plugins/<作者名>/<插件名>/RandomNumberWidget.ts
type: application/javascript
module-type: widget
Expand Down
4 changes: 2 additions & 2 deletions src/doc/tutorials/zh/004-compile-config.tid
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ type: text/vnd.tiddlywiki

如果为一个脚本文件添加了 .meta 将会被视为入口文件,而入口文件将会被编译,并将编译后的结果纳入插件中,并不包括源文件。如果希望包含源文件,则需要在脚本文件对应的 .meta 文件中添加:

```
```yaml
Modern.TiddlyDev#IncludeSource: true
```

!! 排除编译

进一步的,如果不希望编译这个脚本文件,就需要在 .meta 中添加:

```
```yaml
Modern.TiddlyDev#NoCompile: true
```

Expand Down
2 changes: 1 addition & 1 deletion wiki/tiddlers/$__DefaultTiddlers.tid
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ modified: 20221228055915176
title: $:/DefaultTiddlers
type: text/vnd.tiddlywiki

$:/plugins/your-name/plugin-name $:/plugins/Modern.TiddlyDev/doc
$:/plugins/Modern.TiddlyDev/doc $:/plugins/your-name/plugin-name

0 comments on commit 5b8e6ed

Please sign in to comment.