Enable search in site #741

SwitWu · 2023-07-01T13:57:49Z

Search is a very powerful function when one needs to find something quickly. How to make search possible in minima theme like that in minimal mistakes theme?

jekyllbot · 2023-08-31T14:10:34Z

This issue has been automatically marked as stale because it has not been commented on for at least two months.

The resources of the Jekyll team are limited, and so we are asking for your help.

If this is a bug and you can still reproduce this error on the master/main branch, please reply with all of the information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in two months if no further activity occurs. Thank you for all your contributions.

0xjoma · 2023-10-28T23:57:29Z

@SwitWu The search used in minimal mistakes theme is algolia. I will provide you with a step by step instructions on how you can do this on your Jekyll minima theme with Simple-Jekyll-Search JavaScript Library.

Add the `Simple-Jekyll-Search` JavaScript Library

Include the Simple-Jekyll-Search script in your Jekyll site by adding the following script tag to the <head> section of your main layout _layouts/default.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/simple-jekyll-search.min.js"></script>

Create a Search Index

Create a file named search.json at the root of your Jekyll site with the following content:

---
layout: null
---
[
  {% for post in site.posts %}
    {
      "title": "{{ post.title | escape }}",
      "category": "{{ post.category }}",
      "tags": "{{ post.tags | join: ', ' }}",
      "url": "{{ post.url | prepend: site.baseurl }}"
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

Add Search Input, Results Display, and Initialization

In the desired template or page where you want the search functionality to appear (e.g.,_layouts/default.html, add:

<!-- Search Input -->
<input type="text" id="search-input" placeholder="Search...">

<!-- Results Display -->
<ul id="search-results"></ul>

<!-- Initialization Script -->
<script>
  SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('search-results'),
    json: '/search.json',
    searchResultTemplate: '<li><a href="{url}" title="{title}">{title}</a></li>',
    noResultsText: 'No results found'
  });
</script>

Style the Search Box and Results with CSS

Add the following (optional) CSS to your sites main stylesheet (scss file):

/* Styling for the search box */
#search-input {
    display: block;
    width: 80%;
    max-width: 600px;
    margin: 20px auto;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border 0.3s;
}

#search-input:focus {
    border-color: #0078d4;
}

/* Styling for the search results */
#search-results {
    list-style-type: none;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#search-results li {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
}

#search-results li:last-child {
    border-bottom: none;
}

#search-results a {
    text-decoration: none;
    color: #333;
}

#search-results a:hover {
    color: #0078d4;
}

Build and Test

Finally, rebuild your Jekyll site and test the search functionality. The search box should now appear with the provided styling, and you should be able to search through your posts based on the title, category, and tags.

Feel free to edit anything based on your liking and needs, but this should accomplish a good search alternate to algoliaon your minima theme

0xjoma

jekyllbot added the stale label Aug 31, 2023

jekyllbot removed the stale label Oct 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable search in site #741

Enable search in site #741

SwitWu commented Jul 1, 2023

jekyllbot commented Aug 31, 2023

0xjoma commented Oct 28, 2023 •

edited

Loading

Enable search in site #741

Enable search in site #741

Comments

SwitWu commented Jul 1, 2023

jekyllbot commented Aug 31, 2023

0xjoma commented Oct 28, 2023 • edited Loading

Add the Simple-Jekyll-Search JavaScript Library

Create a Search Index

Add Search Input, Results Display, and Initialization

Style the Search Box and Results with CSS

Build and Test

0xjoma

0xjoma commented Oct 28, 2023 •

edited

Loading

Add the `Simple-Jekyll-Search` JavaScript Library