Pomoc:WikiSearchFront

This page is a translated version of the page Help:WikiSearchFront and the translation is 88% complete.

The WikiSearchFront extension is a front-end for WikiSearch written in Vue.js

For installation instructions see the extension page

For full-text search and showing highlighted result snippets WSSemanticParsedText need to be installed and Semantic MediaWiki has to be configured to use elasticStore and store raw text in Elasticsearch with the following setting in LocalSettings.php

$smwgElasticsearchConfig["indexer"]["raw.text"] = true;

Konfiguracja

Rozszerzenie WikiSearchFront musi zostać skonfigurowane przy użyciu funkcji parsera WikiSearchFrontend

Istnieją trzy rodzaje konfiguracji:

Settings, without a prefix
Filter settings, prefixed with a @
Result settings, prefixed with a ?

Configurations can have setting options prefixed with a #

Example configuration:

{{#WikiSearchFrontend:
|size=10
|title=Page Title
|@Tag
|@Year
    #display=range
    #max=20
    #type=date
    #label=Publication year
|?Users
    #display=link
|?Image
    #display=image
|?Rating
    #display=template
    #template=Rating icon
}}

Dostępne opcje konfiguracji

Ustawienia

To są opcjonalne ustawienia dla głównego interfejsu


parametr	wartości parametrów	ustawienia	setting values	opis	domyślnie	przykład
size	`<number>`			defines how many results are shown per page	10	`size=10`
size options	`<number>, <number>`			if set a drop-down with the defined size options will be shown		`size options=10, 20, 50`
title	`<property>`			property that will be used for the search results title and link	page	`title=Title` `#highlight=true` `#urlstring=search` `#wrap=true`
		#label	`<text>`	sets a label for the title column in table layout
		#highlight	true	highlights the search term in the title
		#urlstring	`<text>`	adds search terms as an url parameter named by the value to the links href
		#wrap	true	wrap the result with a link
sort	`<property>`			sets sorting alphabetically based on a property instead of the default relevance order	score	`sort=Title`
order	desc				asc	`order=desc`
sort options	`<property>, <property>`			if set a drop-down with sort options will be shown, default results will be sorted by relevance, optional a label for the property to sort on can be set by adding text after the property divised by `:`		`sort options=Version, Title`
sort options	`<text>:<property>`,`<text>:<property>`					`sort options=Version:Version number, Title:Page name`
layout	table			changes the layout for the search results to a table		`layout=table`
	calendar			changes the layout for the search results to a calendar		`layout=calendar`
	template			use a template to display the results		`layout=template`
calendar	`<property>`	#display	year	show year view instead of the month view		`calendar=Event date#weekend=false#color=Type`
		#weekend	false	don't show weekends
		#color	`<property>`	property to use for adding CSS classes to different calendar items, so they can be assigned a color in your style sheet
		#template	`<template>`	template to use for creating new calendar items
		#slot	`<slot>`	slot to write to	main
		#prefix	text	prefix to use for event page name
template	`<template>`			to be used with `layout=template`
clear	term			if set, the 'clear all filters' button also clears the search term		`clear=term`
facets	`<number>`			how many facets to show before a 'show more' button is shown	5	`facets=10`
theme	dark			uses a dark theme		`theme=dark`
selected	`<property>:<value>;<property>:<value>`			list of pre-selected filters		`Version:1.0;Page name:Title`
info	true			show information icon about special search operators (OR, AND, and more)		`info=true`
action	`<function>` or `<page>`	#label	text	action to perform with selected results, `display=checkbox`		`action=doAction#label=Action`
action	`<function>` or `<page>`	#type	page	action to perform with selected results, `display=checkbox`

Ustawienia wyników wyszukiwania

These are optional settings for the search result output they are defined by adding a ? in front of the property name.


parametr	ustawienia	setting values	opis	przykład
?`<property>`	#display	image	displays an image, the property must be a relative URL to the image	`?Image#display=image`
		link	creates a link from a property	`?User#display=link`
		pill	creates a pill, that can be used for filter selection	`?Tag#display=pill`
		template	parses a template, add `#template=<template>` . The `{{{Page\|}}}` and `{{{Value\|}}}` parameters are passed to the template	`?Icon#display=template` `#template=Icon for search`
		checkbox	show a checkbox, can be used with `action`	`?User#display=checkbox`
	#template	<template>	used with `#display=template`
	#label	`<text>`	adds a label in front of the displayed property value. When table layout is used it defines the tabel column header name	`?Rating#label=Page rating`
	#highlight	true	highlights the search term on the displayed property value	`?Description#highlight=true`
Default properties, these can be used to create a custom order for your results
?$snippet			the search result snippet
?$title			set `#display=link`
?$page
?$namespacename
?$image			if result is a file page
?$Modification date

Facets filter settings

Facet filters are defined by adding an @ in front of the property name. All settings are optional. When no display setting is used the default checkboxes are displayed.

Filter properties also need to be set in the WikiSearchConfig, except for display type ask combobox, search, datepicker, date and range see WikiSearch for more information

Some display types need a setting with an ask query, see Semantic MediaWiki ask query string for more information about them.


parametr	ustawienia	setting values	opis	przykład
@<property>	#display	elastic combobox	show a select drop-down with aggregated search results, to hide the result count add `#count=false`	`@Author#display=elastic combobox`
		switch	add a switch, you can set a value for true false and default	`@Author#display=switch#true=Has name#false=Has no name#default=false`
		combobox	shows a drop-down combo-box instead of the default checkboxes	`@Author#display=combobox`
		ask combobox	shows a combobox and uses an ask query as you type to generate options. see ask combox for more information	`@Author` `#display=ask combobox` `#query=[[Class::User]]` `#data=Full name`
		search	adds a search input for the specified property	`@Title#display=search`
		datepicker	adds two DateInputWidgets that are used for filtering the results by a date property	`@Modification date#display=datepicker`
		range	adds the default checkboxes but with a set of ranges from the property. see range for more information	`@Range` `#display=range` `#max=5` `#step=1`
		sorted	adds the default checkboxes but sorts on a given ask query. see sorted for more information	`@Tag` `#display=sorted` `#query=[[Tag::+]]` `#data=-Tag group.Name` `#text=Tag name`
		date	shows date facets with ranges for 'last week', 'last moth', 'last quarter', and 5 years, needs `#type=date` to be set	`@Modification date` `#display=date` `#type=date`
		slider	adds a range slider, a max can be set with `#max=<number>`	`@Version` `#display=slider` `#max=5`
	#label	`<text>`	defines a label to be used for display instead of the property name	`@User` `#label=Author`
	#logic	or	set logic to or, needs 'post filter properties' setting in back-end WikiSearchConfig. see WikiSearch for more information	`@Tag` `#logic=or`
	#sort	alphabetically	sorts the facets alphabetically, default facets are sorted by page count	`@Tag` `#sort=alphabetically`
	#sort	alphanumeric	sorts the facets alphanumeric, default facets are sorted by page count	`@Tag#sort=alphanumeric`Optional: `#order=reverse`
	#translation	`<property>`	translates the property values based on a given ask query. only applicable for properties of type Page.	`@Service` `#translation=Name` `#query=[[Class::Service]]`
	#value	`<text>`	set a value for a single filter
	#valueLabel	`<text>`	set a label for a single value

ask combobox

`#display=ask combobox`
ustawienie	wartość	opis	przykład
#query	`<ask>`	ask query	@Tag #display=ask combobox #query=[[Class::Tag]] #data=Tag ID #text=Tag name
#data	`<property>`	property for options
#text	`<property>`	label for options
#search	true	searches for typed term on enter key

Sorted

`#display=sorted`
ustawienie	wartości	opis	przykład
#query	`<ask>`	ask query	@Tags #display=sorted #query=[[Tag::+]][[-Has subobject.Type::Search Tag]] #data=-Has subobject.Name #text=Tag name
#data	`<property>`	property to sort on
#text	`<property>`	property for display

Range

`#display=range`
setting	values	description	example
#max	`<number>`	maximum number of ranges	@Year #display=range #max=20 #type=date
#step	`<number>`	step for range
#type	date	type for date ranges

Styling and layout

WikiSearchFront can be styled using CSS. Components are logically named using BEM convention, and the layout is defined with CSS Grid. You can just add your own style-sheet, by adding your CSS to common.css or you could use TemplateStyles. A dark theme is available and can be set by adding theme=dark to the config.

Layout

Below you find the default layout, grid-template-columns defines the columns sizes, grid-template-rows define the row sizes.

The different components can be moved around by changing the grid-template-areas. In the default layout the search component spans over the whole first row.

.wikisearch {
  display: grid;
  grid-template-columns: minmax(20ch, 30ch) auto minmax(auto, 40ch);
  grid-template-rows:
    auto
    minmax(2em, auto)
    auto
    1fr;
  grid-template-areas:
    "search search search"
    "selected selected order"
    "filters action total"
    "filters results results";
  grid-gap: 0.5em 2em;
}

The available components are:

search this is the search input including the search button
selected this is the area where the pills for selected filter show up
order this is the area where the sort options drop-down will show if sort options are set in the configuration
filters this is where the different facet filters will be located
total this where the result count will show up
results this is the area where the search result are shown, including the pagers
action this is the area where the action button will appear

Variables

WikiSearchFront uses CSS variables to define colors and icons, the following variables are available to override

--ws-color-darker
--ws-color
--ws-color-lighter
--ws-color-lightest
--ws-white
--tint-1
--tint-2
--gray-1
--gray-2
--ws-border-color
--ws-border-color-darker
--ws-text-color-muted
--ws-black-lighter
--ws-black
--border-1
--star-size
--transition-short