Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable search in site #741

Open
SwitWu opened this issue Jul 1, 2023 · 2 comments
Open

Enable search in site #741

SwitWu opened this issue Jul 1, 2023 · 2 comments

Comments

@SwitWu
Copy link

SwitWu commented Jul 1, 2023

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
Copy link
Contributor

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
Copy link

0xjoma commented Oct 28, 2023

@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 jekyllbot removed the stale label Oct 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants