外观党福利,给条目添加贴纸
-
给条目添加贴纸示例——图片式按钮链接到其他条目
<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 在 中 引用了 这个主题