Поиск в блоге

11 января 2023

На момент написания этого мода существует возможность организации постов в блоге только путём тегирования. Это не всегда и не для всех задач удобно. Поэтому и родился этот мод, добавляющий поисковую строку в блог.

Важное отступление!

с 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>