外观党福利，给条目添加贴纸
-
给条目添加纯文本便签
<style> .style1 { position: relative; } .style2 {position: absolute; display: block; color: #ffffff; background-color: #000000; text-align: center; width: 130px; padding: 10px; font-family: "Segoe Print"; left: -120px; top: 70px; } </style> <div class="style2"> Stop looking at me as if I was some kind of object. I'm just text, you chauvinist!!! </div>
-
附TWaddle大佬的网址，可以学到很多东西
http://twaddle.tiddlyspot.com/#Reference %26 Index -
@dyp1121054136 很厉害啊，我也是通过看各种tiddlywiki网站才逐渐学会tiddlywiki的。
-
给条目添加贴纸示例——图片式按钮链接到其他条目
<style> .style1 { position: relative; } .style2 { position: absolute; height: 10px; width: 20%; left: -180px; top: 30px; } </style> <div class="style2"> <$link to="条目标题" tooltip="鼠标悬浮显示的文本">{{图片名称}}</$link> </div> -
在图片上添加一个透明文本框，不知道为什么这个无法复现
-
搞出来了
给条目添加贴纸示例——在图片上添加一个透明文本框
代码
<style> .style1{ position: relative; } .style2{ position: absolute; left: 100px; top: 130px; width:600px;} </style> <div class="style2"> {{图片名称}} <div class="style2"> <$edit-text tiddler="链接的条目标题" field="text" class="tc-edit-overlayeditor" /> </div> </div> -
新建条目加tag
$:/tags/Stylesheet添加文本框样式css代码
.tc-tiddler-frame input.tc-edit-overlayeditor, .tc-tiddler-frame textarea.tc-edit-overlayeditor { width: 100%; padding: 3px 3px 3px 3px; margin: 4px 0 4px 0; border: 0px solid <<colour tiddler-editor-border>>; line-height: 1.3em; -webkit-appearance: none; background-color: transparent; color:red; font-weight: bold; } .tc-tiddler-frame input.tc-edit-overlayeditor { } .tc-tiddler-frame input.tc-edit-overlayeditor { <<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">> } .tc-tiddler-frame .tc-edit-tags input.tc-edit-overlayeditor { <<box-shadow "none">> border: none; outline: none; } -
马 马萨伊尔 将这个主题转为问答主题，在
-
马 马萨伊尔 将这个主题标记为已解决，在
-
马 马萨伊尔 将这个主题标记为已解决，在
-
官方中文教程示例：包含 HTML 或 wikitext 内容于 SVG 图像。
第一个例子是透明背景+文字，第二个例子是画一个图形+文字，背景和文字的位置和大小可调。
!!!示例： 您可以使用 `<text>` 元素包含简单的文本串于 SVG 图像： <svg width="290px" height="90px" viewBox="200 0 100 300"> <text x="20" y="150" font-family="Verdana" font-size="55"> Hello, out there </text> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> HTML 或 WikiText 内容可以包括使用 `<foreignObject>` 元素于内嵌 SVG 图像中。例如： <svg width="260px" height="260px"> <circle cx="150" cy="150" r="100" fill="#B1D3E9" stoke="red"/> <foreignObject x="75" y="95" width="150" height="180"> <body>这里是一段文字，文字会自动换行。这里是一段文字，文字会自动换行。这里是一段文字，文字会自动换行。</body> </foreignObject> </svg> -
@dyp1121054136 在 外观党福利，给条目添加贴纸 中说：
搞出来了
给条目添加贴纸示例——在图片上添加一个透明文本框
代码
<style> .style1{ position: relative; } .style2{ position: absolute; left: 100px; top: 130px; width:600px;} </style> <div class="style2"> {{图片名称}} <div class="style2"> <$edit-text tiddler="链接的条目标题" field="text" class="tc-edit-overlayeditor" /> </div> </div>增加代码style3，让透明文本框也可以调整位置和大小
<style> .style1{ position: relative; } .style2{ position: absolute; left: 100px; top: 130px; width:600px;} .style3{ position: absolute; left: -20px; top: 40px; width:600px;} </style> <div class="style2"> {{图片名称}} <div class="style3"> <$edit-text tiddler="透明文本框" field="text" class="tc-edit-overlayeditor" /> </div> </div> -
贴纸注释插件网址：
https://annotations.tiddlyhost.com/Annotations: Pure CSS annotations
$:/plugins/TWaddle/Annotations
1.0.0 -
@dyp1121054136 在 外观党福利，给条目添加贴纸 中说：
贴纸注释插件网址：
https://annotations.tiddlyhost.com/Annotations: Pure CSS annotations
$:/plugins/TWaddle/Annotations
1.0.0我还没看懂，要好好研究一下
-
贴纸注释插件Annotations使用说明
1、新建一个注释汇总条目并命名，加上tag：
annotations，如：贴纸注释测试，然后在设置面板Annotations选项卡中的 “Active annotations scheme” 的下拉菜单中就可以看到这个空白的注释主题。2、选中新建的注释主题， 开始添加贴纸注释。
3、“Type title of existing tiddler or PAGE for page element” 右侧的输入框可以填需要添加贴纸的条目名称，或者
PAGE，即对页面生效，也可以空着不填。4、“Element to "hook on" to or custom class e.g .myclass” 的下拉菜单中可选条目元素或页面元素；或者在右侧的输入框添加样式代码，需要自定义名称，如：
.class2。5、“Annotation” 右侧的输入框填写需要添加的注释文本。
6、下方出现新面板，可以调整注释的位置、字体、文字和背景颜色、阴影、旋转角度等，可以修改注释内容或删除注释。
7、如想在条目内容中间添加注释，可按此格式书写
@@.class2 文本@@。 -
-
经测试，贴纸注释插件Annotations添加的是真贴纸，把纯文本转换为图形元素了，如果想要可以复制文本的贴纸，请看楼上的“给条目添加纯文本便签”。
-
L linonetwo 在 中 引用了 这个主题
