Важное отступление!
с 13 ноября 2023 года wfolio штатно сделали поиск в разделах типа «блог» и «анонсы». Поиск появляется если у вас более 20 записей. На эту дату штатное решение поддерживает поиск только по заголовкам статей. Моё решение — и по заголовкам и по аннотациям записей.
Если вам нужно моё решение, то штатный поиск необходимо скрыть, добавив в переопределение CSS:
.search-section {
display: none! important;
}
Как это работает вы можете посмотреть у меня в разделе «Статьи». Поиск осуществляется как по названию постов так и по их описанию. Минимальная длина поискового запроса — 3 символа.
Как это сделано
1. Идем в Настройки -> Интеграция с сервисами
2. В блок «Сторонний код в теге <head>» вставляем стиль поисковой строки. Тут можно ее раскрасить по желанию ;)
<style>
/* поиск в блоге */
.search_input {
margin: 0;
padding: 10px 15px;
transition: border-color 0.15s ease-out;
border: 1px solid #e6e6e6;
border-radius: 4px;
outline: 0;
background-color: #fff;
font-size: 14px;
line-height: 18px;
vertical-align: top;
-webkit-appearance: none;
}
</style>
3. В блок «Сторонний код в теге <body>» вставляем код скрипта:
<script>
/* поиск в блоге */
$(document).ready(function(){if($(".post").length>0){$(".-blog-prefix").append('<div class="sections-container-inner" style="padding: 0;text-align: center;"><input type="text" id="search" value="" placeholder="Поиск..." class="search_input"></div>');var s=$(".post"),t=$(".post-title"),e=$(".post-description");$(".post-list").height();var a=[];$(".post").each(function(s,t){a.push({position:"absolute",top:$(this).css("top"),left:$(this).css("left")})}),$("input#search").on("input",function(i){if(this.value.length>2){$(".post").remove();var n=0;t.each(function(t,i){($(this).html().replace(" "," ")+$(e[t]).html().replace(" "," ")).toLowerCase().includes($("input#search").val().toLowerCase())&&($(".post-list").append($(s[t])),$(s[t]).hasClass("-animated")?$(s[t]).addClass("-visible"):$(".post").eq(n).css(a[n]),n++)})}else{$(".post").remove();var n=0;t.each(function(t,e){$(".post-list").append($(s[t])),$(s[t]).hasClass("-animated")||$(".post").eq(n).css(a[n]),n++})}})}});
</script>
