• HOME
  • USER GUIDE
  • SHOWCASE
  • ABOUT
  • User Guide → Making the Site Searchable

    Making the Site Searchable

    MarkBind comes with with an in-built site search facility. You can add a Search Bar component to your pages (e.g., into the top navigation bar) to allow readers to search your website for keywords.

    All headings of levels 1-3 are captured in the search index by default. You can change this setting using the headingIndexLevel property of the site.json.

    MarkBind also provides a plugin for Algolia DocSearch, which provides full text search for your site.

    See: User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch.

    If you do not wish to use MarkBind's searchbar (e.g. you have an external service provider), it may be helpful to include the option enableSearch: false in your site.json. This stops MarkBind from indexing search headings and speeds up building.

    Search Bars

    The searchbar component allows users to search all headings within any page on the site.

    CODE:

    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
    <searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right></searchbar>
    

    To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.

    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
      </form>
    </li>
    

    OUTPUT:

    Enter a search term (eg. 'search bar') to see the search result dropdown.

    Options

    Name Type Default Description
    algolia Boolean false Whether the searchbar should be connected to Algolia DocSearch.
    data Array The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "searchData".
    menu-align-right Boolean false Whether the search bar's dropdown list will be right-aligned.
    on-hit Function A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "searchCallback".
    placeholder String '' The placeholder text shown when no keywords are entered in the search bar.

    Note: If you are using MarkBind's search functionality, then enableSearch must be set to true in site.json.

    See: User Guide: Site Configuration → enableSearch.

    Related topic: User Guide: Making the Site Searchable.

    Related topic: User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch.

    <searchbar :data="searchData" placeholder="Search"          :on-hit="searchCallback" menu-align-right></searchbar>
              
              
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
      </form>
    </li>
    

    Keywords

    You can also specify additional keywords to be indexed under a heading by tagging the words with the keyword class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add d-none as a class.

    Example:

    #### Developer Testing
    <span class="keyword d-none">regress</span>
    <span class="keyword d-none">regression testing</span>
    
    This is good for catching <span class="keyword">regressions</span>.
    

    Developer Testing

    This is good for catching regressions.

    You can also set additional keywords to be indexed for an entire page using the keywords attribute inside the <frontmatter> of that page.

    Example:

    <frontmatter>
      keywords: regress, regression testing, regressions
    </frontmatter>
    ...
    
    <span class="keyword d-none">regress</span>
              
              

    Including or Excluding Headings

    You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature using the .always-index or .no-index attributes.

    If you wish to index a specific heading outside the specified headingIndexLevel, you may add the .always-index attribute to the heading. Similarly, if you wish for a specific heading inside the specified headingIndexLevel not to be indexed, you may add the .no-index attribute to the heading.

    Example:

    ###### Heading outside heading index level that will be indexed {.always-index}
    
    # Heading inside heading index level that will not be indexed {.no-index}
    

    Reusing Contents

    Deploying the Site