快速编辑标签字段组件

[机杼]

新建一个条目，名称任意，加上标签$:/tags/Macro ，把下面的内容放进去。

\whitespace trim

\procedure lingo-base() $:/language/EditTemplate/

\procedure tag-body-inner(colour,fallbackTarget,colourA,colourB,icon,tagField:"tags",tid)
<$wikify name="foregroundColor"
	text="""<$transclude $variable="contrastcolour"
		target=<<colour>>
		fallbackTarget=<<fallbackTarget>>
		colourA=<<colourA>>
		colourB=<<colourB>>/>
	"""
>
	<$let backgroundColor=<<colour>> >
		<span class="tc-tag-label tc-tag-list-item tc-small-gap-right"
			data-tag-title=<<currentTiddler>>
			style.color=<<foregroundColor>>
			style.fill=<<foregroundColor>>
			style.background-color=<<backgroundColor>>
		>
			<$transclude tiddler=<<icon>>/>
			<$view field="title" format="text"/>
			<$button class="tc-btn-invisible tc-remove-tag-button"
				style.fill=<<foregroundColor>>
			>
				<$action-listops $tiddler=<<tid>> $field=<<tagField>> $subfilter="-[{!!title}]"/>
				{{$:/core/images/close-button}}
			</$button>
		</span>
	</$let>
</$wikify>
\end

\procedure tag-body(colour,palette,icon,tagField:"tags",tid)
<$transclude $variable="tag-body-inner"
	colour=`$(colour)$`
	colourA={{{ [<palette>getindex[foreground]] }}}
	colourB={{{ [<palette>getindex[background]] }}}
	fallbackTarget={{{ [<palette>getindex[tag-background]] }}}
	icon=<<icon>>
	tagField=<<tagField>>
	tid=<<tid>>
/>
\end

\procedure edit-tags-template-x(tagField:"tags",tagListFilter,tid)
<div class="tc-edit-tags" >
	<$list filter="[<tid>get<tagField>enlist-input[]sort[title]]" storyview="pop">
		<$transclude $variable="tag-body"
			colour={{{ [<tid>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
			palette={{$:/palette}}
			icon={{{ [<tid>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
			tagField=<<tagField>>
			tagListFilter=<<tagListFilter>>
			tid=<<tid>>
		/>
	</$list>
	<$let tabIndex={{$:/config/EditTabIndex}} cancelPopups="yes">
		<$transclude $variable="tag-picker" tagField=<<tagField>> tagListFilter=<<tagListFilter>> tiddler=<<tid>> />
	</$let>
</div>
\end

然后你就得到了一个可以随时调用编辑字段的组件了。使用方式如下。

<$transclude
$variable="edit-tags-template-x"
tagField="123"
tagListFilter="[has[cluster]get[cluster]unique[]enlist-input[]unique[]]"
tid="0023"/>

修改0023这个条目的123字段，列表展示出来的内容是cluster字段的相关值。如下图所示。

下面是更详细的说明。

• 更改来自官方的$:/core/ui/EditTemplate/tags
• 修改了名称，改为edit-tags-template-x
• 更新了里面的宏使用方式，使用更现代的<$transclude $variable="" />
• 增加变量tid，允许更具体控制要修改的条目
• tagField表示要修改的字段，默认是tags标签
• tagListFilter则是下方列表内容，可以手动设置
• 上述是一个常见的示例，比如选择具有cluster字段的值
• 目前存在的问题有，编辑框内容无法修改
• • 这是由底层的tag-picker宏控制的，修改起来很麻烦

使用用途应该很广泛，只要涉及到增加和修改属性，都可以用这个组件。且更适合用于需要存储多个类别的情况。

比如一款游戏，可能有多个类别，如果存储为标签，则很麻烦，因为可能造成标签失去控制。但存储在字段中，编辑起来又不方便，而用这个组件可以很好地解决。常用的也可以处理成编辑字段模板，如下图。

[机杼]

组合一下就可以变成其他笔记软件中常见的编辑字段方式了。

---

组合的方式有机会直播的时候说一下吧。搞懂了就也很简单，两个方向，一个是通过页面上的按钮控制展示，展示编辑方式。另一个则是对编辑字段模板进行处理。