search

jekyll / minima

Minima is a one-size-fits-all Jekyll theme for writers.
https://jekyll.github.io/minima/
MIT License
3.46k stars 3.64k forks source link

Enable search in site #741

Open SwitWu opened 1 year ago

SwitWu commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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/simple-jekyll-search@1.7.3/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