add search to the navbar using 'post_search' config param

This commit is contained in:
Dean Attali 2021-05-30 19:54:17 +00:00
parent 99fdbbd593
commit 950c341739
7 changed files with 172 additions and 2 deletions

View File

@ -1,5 +1,6 @@
## Unreleased version
- Added search to the navbar (can be turned off in the config file) (#770)
- Slightly reworked margins and position for avatar image to resolve an alignment issue on Safari.
- Changed the width at which the navbar collapses to a higher threshold because most modern non-mobile browsers are >1000px
- Fixed bug where navbar secondary level dropdown items didn't inherit the same colour as the primary navbar links

View File

@ -26,7 +26,7 @@
# Features
Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.
__Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.__
- **SIMPLE**: The primary goal of Beautiful Jekyll is to allow literally *anyone* to create a website in a few minutes.
- **Modern**: Uses the latest best practices and technologies to achieve nearly perfect scores on Google Chrome's Audit.
@ -36,8 +36,9 @@ Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the lates
- **Battle-tested**: By using Beautiful Jekyll, you'll be joining 50,000+ users enjoying this theme since 2015.
- **SEO and social media support**: Customize how your site looks on Google and when shared on social media.
- **Comments support**: Add comments to any page using either [Disqus](https://disqus.com/), [Facebook comments](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), or [Staticman](https://staticman.net).
- **Tags**: Any blog post can be tagged with keywords, and an index page showing all the tags is automatically generated.
- **Tags**: Any blog post can be tagged with keywords, and an index page is automatically generated.
- **Analytics**: Easily integrate Google Analytics, or other analytics platforms, to track visits to your website.
- **Search**: Let users easily find any page using a Search button in the navigation bar.
- **Photos support**: Any page can have a full-width cover photo and thumbnail.
- **RSS**: An RSS feed is automatically created, so you can even host a podcast easily with Beautiful Jekyll.

View File

@ -89,6 +89,9 @@ feed_show_excerpt: true
# Whether or not to show a list of tags below each post preview in the feed page
feed_show_tags: true
# Add a search button to the navbar
post_search: true
# The keywords to associate with your website, for SEO purposes
#keywords: "my,list,of,keywords"

View File

@ -30,6 +30,14 @@
</li>
{%- endif -%}
{%- endfor -%}
{% if site.post_search %}
<li class="nav-item">
<a class="nav-link" id="nav-search-link" href="#" title="Search">
<span id="nav-search-icon" class="fa fa-search"></span>
<span id="nav-search-text">Search</span>
</a>
</li>
{%- endif -%}
</ul>
</div>
@ -50,3 +58,5 @@
{% endif %}
</nav>
{% include search.html %}

39
_includes/search.html Normal file
View File

@ -0,0 +1,39 @@
{% if site.post_search %}
<div id="beautifuljekyll-search-overlay">
<div id="nav-search-exit" title="Exit search"></div>
<input type="text" id="nav-search-input" placeholder="Search">
<ul id="search-results-container"></ul>
<script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
<script>
var searchjson = '[ \
{% for post in site.posts %} \
{ \
"title" : "{% if post.title != "" %}{{ post.title | escape }}{% else %}{{ post.excerpt | strip_html | escape | strip }}{%endif%}", \
"category" : "{{ post.tags | join: \', \' }}", \
"url" : "{{ site.baseurl }}{{ post.url }}", \
"date" : "{{ post.date | date: "%B %e, %Y" | default: "January 1, 1970" }}" \
}, \
{% endfor %} \
{% for page in site.html_pages %}{% if page.title != "{title}" and page.title != "404 - Page not found" %} \
{ \
"title" : "{% if page.title != "" %}{{ page.title | escape }}{% else %}{{ page.excerpt | strip_html | escape | strip }}{% endif %}", \
"category" : "{% if page.tags %}{{ page.tags | join: \', \' }}{% else %}page{% endif %}", \
"url" : "{{ site.baseurl }}{{ page.url }}", \
"date" : "{{ page.date | date: '%B %e, %Y' | default: "January 1, 1970" }}" \
}{% unless forloop.last %},{% endunless %} \
{% endif %}{% endfor %} \
]';
searchjson = JSON.parse(searchjson);
var sjs = SimpleJekyllSearch({
searchInput: document.getElementById('nav-search-input'),
resultsContainer: document.getElementById('search-results-container'),
json: searchjson
});
</script>
</div>
{% endif %}

View File

@ -993,3 +993,98 @@ pre {
display: block;
margin: 0 auto;
}
/* Search bar */
#beautifuljekyll-search-overlay {
display: none;
z-index: 999999;
position: fixed;
background: rgba(0,0,0,0.9);
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
padding: 1rem;
}
#nav-search-exit {
position: absolute;
top: 1.5rem;
cursor: pointer;
right: 25%;
margin-right: 2rem;
color: #555;
font-size: 2rem;
line-height: 2rem;
font-weight: bold;
}
#nav-search-exit:hover {
color: #000;
}
#nav-search-input {
text-align: center;
background: #e7edee;
margin: auto;
display: block;
font-size: 2rem;
width: 50%;
transition: width 300ms ease;
color: #222;
border-radius: 5rem;
outline: none;
border: none;
padding: 0 3rem;
}
@media (max-width: 1199px) {
#nav-search-input {
width: 75%;
}
#nav-search-exit {
right: 12.5%;
}
}
@media (max-width: 767px) {
#nav-search-input {
width: 100%;
}
#nav-search-exit {
right: 0;
}
}
#nav-search-input:focus {
background: #f3f8fe;
box-shadow: 0px 0.15rem 1rem #e7f4ff;
outline: none;
}
#nav-search-input::placeholder {
color: #777;
}
#search-results-container {
list-style: none;
padding-left: unset;
margin-top: 1.5rem;
color: #fff;
font-size: 1.5rem;
}
#search-results-container a,
#search-results-container a:hover {
color: #fff;
}
#nav-search-icon {
display: inline-block;
}
#nav-search-text {
display: none;
}
@media (max-width: 1199px) {
#nav-search-icon {
display: none;
}
#nav-search-text {
display: inline-block;
}
}

View File

@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
// show the big header image
BeautifulJekyllJS.initImgs();
BeautifulJekyllJS.initSearch();
},
initNavbar : function() {
@ -108,6 +110,25 @@ var BeautifulJekyllJS = {
} else {
$(".img-desc").hide();
}
},
initSearch : function() {
if (!document.getElementById("beautifuljekyll-search-overlay")) {
return;
}
$("#nav-search-link").click(function(e) {
e.preventDefault();
$("#beautifuljekyll-search-overlay").show();
$("#nav-search-input").focus().select();
});
$("#nav-search-exit").click(function(e) {
e.preventDefault();
$("#beautifuljekyll-search-overlay").hide();
});
$(document).on('keyup', function(e) {
if (e.key == "Escape") $("#beautifuljekyll-search-overlay").hide();
});
}
};