Content search
The engine provides a built-in search action to find a string in the contents.
The search is activated creating a content with /search
path. The search path
can be set in the configuration. The search path can be localized using the
/search
identifier in content metadata. The content search is activated only
in those languages where the engine finds a search content file. That content
has to contain a form similar like the following:
<form class="form-inline search-phrase" action="/search" method="post">
<div class="form-group">
<label>Text to search:</label>
<input type="text" class="form-control" name="text2search"
maxlength="20" value="">
</div>
<button type="submit" class="btn btn-primary">Find</button>
</form>
{{ .results }}
The important parts here are the action and method attributes of the
form, and the name attribute of the input field, respectively. The results
of the search are listed by the results
property of the context data object.
The form and the control use the following style sheet classes:
/* Search page */
.search-phrase { ... }
.search-result { ... }
.search-result h4 { ... }
mark { ... }
The mark
tag is used to highlight the string found on the result pages.
Navigation bar
When content search is activated the navigation bar also displays a search field. The search field can be disabled in the configuration. This field requires the following classes to be included in the style sheet of the application:
/* Input group in navigation bar */
.navbar-input-group {
font-size: 0; /* removes whitespace between button and input */
}
.navbar-input-group input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 130px !important;
}
.navbar-input-group .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
The search field requires a JavaScript event handler as well that is provided
by the control-search-button
control. It should be placed at the end of the
document files:
...
<!-- Place here the application scripts -->
<script src="..."></script>
{{ #control-search-button }}
</body>
</html>