This page is a translated version of the page Extension:InputBox and the translation is 96% complete.
MediaWiki扩展手册
InputBox
发行状态: 稳定版
实现 标签 , 页面操作 , 搜索
描述 可讓使用者在wiki页面中添加预置的HTML表格
作者
  • Erik Möller
  • Leonardo Pimenta
  • Rob Church
  • Trevor Parscal
  • Daniel Schuba
最新版本 Continuous updates
MediaWiki >= 1.45
数据库更改
许可协议 MIT授權條款
下載
  • <inputbox>
前往translatewiki.net翻譯InputBox扩展
問題 开启的任务 · 报告错误

输入框(InputBox)扩展可以添加已经创建好的HTML表单到维基页面中。 用户可以在输入框中输入文本以“填写”表单(输入文本、选择菜单项等)。

输入框最初是由Erik Möller为在维基新闻中加入创建条目框的目的而创建的。

安裝

此扩展随附于MediaWiki 1.21及更新版本,因此您無需下載它。 但其余的配置的指示仍须依循執行。
  • 下载文件,并解压InputBox文件夹到extensions/目录中。
    开发者和代码贡献人员应改从Git安装此扩展,输入:
    cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/InputBox
    
  • 請新增下列代码到您的LocalSettings.php 文件的底部:
    wfLoadExtension( 'InputBox' );
    
  •   完成 – 請导航至您的wiki上的Special:Version,以验证此扩展已成功安装。

示例

创建一篇新條目的输入框。

Wiki代码

<inputbox>
type  = create
width = 30px   <!-- with unit of measurement -->
break = no
placeholder = Page title
</inputbox>

输出结果

常见語法

输入框像这样构造:

<inputbox>
type              = <!-- <input> type  ==  search search2 create comment commenttitle fulltext move -->
bgcolor           = <!-- Background color of parent <form>. -->
width             = <!-- Width of text field (searchbox) in 'characters'. Unit: Characters #Default: 50 -->
page              = <!-- Wiki pagename (i.e. page title) to post comment to, or move page to. No [[X]]. -->
default           = <!-- Initial value of the text field. -->
preloadtitle      = <!-- Content to prepopulate the title field with for a new comment -->
preload           = <!-- Content to prepopulate the source editor with for a new topic/comment, or new page. -->
editintro         = <!-- Wiki pagename of page to be transcluded as 'help text' shown above source editor window. -->

hidden            = <!-- Any value will hide the text field, but not buttons whose links will still work. -->
searchbuttonlabel = <!-- Visual label for "Search full text" in type == search == fulltext. -->
searchengine      = <!-- optionally "MediaSearch" (Extension:MediaSearch) "Search" #Default: local wiki default. -->
fulltextbutton    = <!-- Visual label for "Search full text" -->
labeltext         = <!-- labeltext -->
break             = <!-- break -->
namespaces        = <!-- namespaces -->
prefix            = <!-- prefix -->
placeholder       = <!-- placeholder -->
minor             = <!-- minor -->
nosummary         = <!-- nosummary -->
summary           = <!-- summary -->
id                = <!-- id -->
inline            = <!-- inline -->
dir               = <!-- dir -->
preloadparams[]   = <!-- preloadparams[] -->
searchfilter      = <!-- searchfilter -->
useve             = <!-- useve -->
usedt             = <!-- usedt -->
arialabel         = <!-- arialabel -->
buttonlabel       = <!-- Visual label for primary search button. -->
</inputbox>

Buttons are not exposed to assistive technology: currently the button elements generated by this template have no accessible label. Screen readers therefore announce only the element role (for example, "Button.") rather than a meaningful label. There is no reliable way to add an accessible label without access to the HTML code.

type 参数必须输入。 而所有的其他参数均为可选。 preloadparams[] 可以出现不止一次。

框的类型

默认情况下「提交」按钮位于输入框的下面。

可移動“提交”按钮至右侧,方法是使用換行參數來消除方塊和按鈕之間的換行:break=no

将“提交”按钮移至右侧对于使用搜索框时搜索建议覆盖了下方搜索按钮的情况很有用。

类型 示例 描述
search
创建的搜索框的默认宽度为50字符。 输入的内容为要搜索的确切页面标题(按钮1)或是条目中的文本(按钮2)。
create
创建新页面。 输入的内容为要创建的页面名称(对于已存在页面则是编辑页面)。
comment
在输入框指定的页面下增加一个新段落(如果为新页面则会创建页面)。
commenttitle
以输入框中输入的标题增加一个新段落。 标题可以用default=参数指定。页面必须用page=参数指定。 由於某些原因,當使用擴充功能時,用{{#tag}}啟用它時並不生效,只有使用‎<inputbox>時才生效。 (在版本rev:47203引入)
fulltext
仅显示搜索全文按钮,不显示精确匹配按钮(“前往”按钮)。 (在版本rev:45269引入)
move
将页面移动至另一个名字。 This also doesn't work when creating it by invoking a tag. (在版本gerrit:97559引入)

对于type=search2,默认的搜索按钮位置在同行右侧。 目前,似乎无法将其他参数添加到这种类型的输入框中。 这种搜索框将搜索其所在的整个维基。

类型 示例
search2

参数

参数 描述 适用范围 结果 示例 兼容性
arialabel= 为输入框提供aria-label属性,以允许屏幕阅读器访问生成的标记。 參見 ARIA: aria-label 屬性 所有类型
<inputbox>
type=search
arialabel=Search the wiki
</inputbox>
1.35
Gerrit change 572050
bgcolor= 设置表格背景色(HTML颜色值)。 不要使用引号。 所有类型
<inputbox>
type=search
bgcolor=gray
</inputbox>
?
width= 设置输入框的宽度,单位为字符。 所有类型
<inputbox>
type=create
width=24
</inputbox>
?
default= 输入框中的默认文本。 所有类型
<inputbox>
type=comment
default=User talk:Eloquence
</inputbox>
?
preloadtitle= Default text to add as the title for a new comment. comment
<inputbox>
type=comment
preloadtitle=My comment title
default=Extension talk:InputBox
</inputbox>
1.45
Gerrit change 1191433
preload= 当创建新页面时,此标题的页面将会被预先载入(参见手册:创建包含预加载文本的页面 )进空白编辑框。 create, comment, commenttitle
<inputbox>
type=create
preload=Log
</inputbox>
?
在上面或下面的输入框示例中输入一个不存在的页面标题,并分别点击“创建页面”或“新段落”按钮来测试此功能。
editintro= 通过这一参数指定的页面将会作为编辑指引显示在编辑窗口上方 create, comment
<inputbox>
type=comment
editintro=MediaWiki:Missingcommenttext
</inputbox>
?
buttonlabel= 此参数将作为表单主按钮显示的文字。 所有类型
<inputbox>
type=comment
buttonlabel=添加新的传言
</inputbox>
?
hidden= 此参数指定不显示输入框。

此参数需要与参数 default 配合使用,此参数现在不是默认值,而是作为页面标题的固定值。 任何带有 yes/true 意义的值。

create, comment
<inputbox>
type=comment
editintro=Extension:InputBox/editintro comment
preloadtitle=Comment title
preload=Extension:InputBox/preload
hidden=yes
default=Extension talk:InputBox
buttonlabel=在讨论页留言
</inputbox>
?
searchbuttonlabel= 此参数将作为表单“搜索全文”按钮显示的文字。 search, fulltext
<inputbox>
type=search
searchbuttonlabel=深入探索
</inputbox>
?
searchengine= 如果已安裝 1,此參數會設定查詢專頁為SearchMediaSearch二選一。 如果未使用此參數,則會使用使用者的(或wiki的預設)偏好設定。 search, search2
<inputbox>
type=search
searchengine=MediaSearch
</inputbox>
1.45
Gerrit change 1167841
fulltextbutton= 在“search2”表单上显示全文搜索按钮。 search2
<inputbox>
type=search2
searchbuttonlabel=深入探索
fulltextbutton=true
</inputbox>
?
labeltext= 在左侧显示的文字。 search2
<inputbox>
type=search2
searchbuttonlabel=深入探索
labeltext=查找: 
</inputbox>
?
break= 是否在输入框和按钮之间插入换行。 默认为yes(使用换行)。 所有类型
<inputbox>
type=create
width=24
break=no
</inputbox>
?
namespaces= 在全文搜索中支持选择命名空间。

使用“Main**”以默认选中主命名空间。

search, fulltext
<inputbox>
type=search
namespaces=Main**,Help
</inputbox>
?
prefix=
  • 指定搜索以特定前缀开头的页面来缩小范围。 注意这仅兼容特定的搜索后端,目前仅有Extension:CirrusSearch 。 默认为空(搜索所有页面)。
  • 创建一个以特定前缀开头的页面。
  • 在type=move中,前缀将加在默认参数前。

注:下划线不等同于空格。

search, fulltext, create

下面的按钮以Special:Mypage/作为前缀。

<inputbox>
type=search
prefix={{FULLPAGENAME}}/Archive
</inputbox>
?
placeholder= 设置当输入框为空时的占位文字。 所有类型
<inputbox>
type=search
placeholder=搜索此维基
</inputbox>
1.19
page= 要发表评论或要移动的页面。 comment, move
<inputbox>
type=comment
page=Project:Sandbox
</inputbox>
minor= 次要的编辑。 comment, create
<inputbox>
type=comment
page=Project:Sandbox
minor=true
</inputbox>
nosummary= 对新评论不要求编辑摘要(标题)。 comment
<inputbox>
type=commenttitle
page=Special:Mypage/inputbox test
nosummary=true
</inputbox>
summary= 编辑摘要或移动理由。 create, move
<inputbox>
type=create
default=Special:Mypage/inputbox test
summary=Foo
</inputbox>
id= ‎<form>的ID属性。 所有类型
<inputbox>
type=comment
page=Project:Sandbox
summary=Foo
id=bar
</inputbox>
1.23

for some types
inline= 将输入框作为内联元素(在开头不换行)。 任何带有yes/true意义的值。 search2 在此输入:
在此输入: <inputbox>
type=search2
inline=true
width=10
</inputbox>
dir= 书写方向从右到左(rtl)或从左到右(ltr)。 默认与页面语言的方向相同。 所有类型
<inputbox>
dir=rtl
type=comment
page=Project:Sandbox
summary=Foo
</inputbox>
preloadparams[]= 设置预载文本的参数。 参见使用预加载文本创建页面 create, comment, commenttitle
<inputbox>
type=create
preload=Log
preloadparams[]=param1
preloadparams[]=param2
</inputbox>
1.25
searchfilter= 指定在搜索中追加的参数。 search, fulltext
<inputbox>
type=search
searchfilter=insource:foo
</inputbox>
1.30
useve= 当新的可视化编辑器扩展被安装且此参数被设为任何值时,将使用可视化编辑器创建页面。 create, comment
<inputbox>
type=create
break=no
useve=true
</inputbox>
usedt= 添加新段落时,输入框将会打开讨论页工具的新话题工具,如果安装了拓展,则该参数会设置为任何值。 comment, commenttitle
<inputbox>
type=commenttitle
page=Project:Sandbox
usedt=true
</inputbox>

对于已存在的页面使用create只会跳转到编辑界面。 在这种情况下preload被忽略。 对新页面使用comment是有效的。

这里使用的在MediaWiki:命名空间下的文本只是作为示例,任何存在的页面都能被用于editintropreload。 不幸的是preload现在还不能对上传文件摘要生效。

Customizing with CSS

You can customize the inputbox in templates using CSS. First, wrap the inputbox in ‎<div> tags with an unique ID then use CSS selectors to change its appearance. You could also give the inputbox itself an ID and use the ID in the CSS selectors. You could also add a custom search button or icon.


Template:Exampleinputbox
<templatestyles src="Template:Example/styles.css"/><div id = "inputbox-search-wrapper">
{{#tag: inputbox|
type        = search
id          = inputbox-search
placeholder = Search all pages
namespaces  = Main**,Help**
}}<div class = "inputbox-search-icon"></div>
</div>
Exampleinputbox/styles.css
#inputbox-search-wrapper {
	box-sizing: border-box;
    height: 32px;
    display: flex;
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: 10px;
}

#inputbox-search-wrapper input {
	all: unset;
    padding-left: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    width: 180px !important;
	font-family: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-base--subtle, #72777d);
}

#inputbox-search-wrapper input::placeholder {
	font-family: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-base--subtle, #72777d);
}

#inputbox-search-wrapper input.mw-ui-button,
.searchbox .cdx-checkbox--inline,
#inputbox-search-wrapper .cdx-button,
#inputbox-search-wrapper div.mw-ui-checkbox {
	display: none;
}

.inputbox-search-icon {
    padding-left: 8px;
    width: 25px;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/18px-Vector_search_icon.svg.png");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

对齐

如果你想要在页面右侧创建一个输入框,使用:

<div style="float:right; width:42em">
<inputbox>
type=create
</inputbox>
</div>

会显示:


在模板中使用输入框

为了创建许多类似的输入框,输入框可以在模板中使用。 然而,只有‎<inputbox>...‎</inputbox>标签是透過模板中有{{#tag:inputbox | ...}}#tag 解析器函數使用,传递给输入框的模板参数才能够生效。

下面的例子是一个通过指定模板创建新页面的模板:

{{#tag:inputbox |
type=create
buttonlabel=创建新{{{1|条目}}}
preload={{{2|Template:Article}}}
}}

实例化此模板时,第一个参数提供一个已经创建好的项(默认为article),就像按钮中显示的那样。第二个参数提供用来创建项的模板名称(默认为Template:Article)。

例如:这段代码产生一个用于从项目模板创建新的项目的输入框:

{{Template:CreateNew|project|Template:Project}}

參見