searchinghost easy
v1.1.2
Ghost CMS용 제로 코드 및 설정이 쉬운 검색 창(블로그).
SearchinGhostEasy는 "개발자가 아닌" 모든 Ghost 사용자가 액세스할 수 있도록 원래 SearchinGhost 라이브러리를 둘러싼 래퍼입니다.
우리 모두가 디자인 기술을 타고난 것은 아니기 때문에 여러 검색창 템플릿이 이미 만들어졌습니다. 모두 반응형 디자인을 사용하므로 휴대폰부터 4K TV까지 모든 화면 크기에 완벽하게 맞습니다.
마지막으로 모든 것을 HTML iframe에 통합함으로써 매우 풍부하고 원활한 사용자 경험을 얻을 수 있습니다!
오! 가장 중요한 점을 말하는 것을 잊어버렸습니다. 모든 Ghost 테마에서 작동합니다 ! (캐스퍼, 대규모, 누비아, ...)
Ghost 블로그에 검색창을 설치하려면 다음의 빠른 단계를 따르십시오.
왼쪽 패널에서 "통합" 섹션으로 이동하여 "+ 사용자 정의 통합 추가"를 클릭하고 이름을 "SearchinGhostEasy"로 지정합니다. Ghost는 자신만의 고유한 "콘텐츠 API 키"를 생성했습니다( ba094afe723d802f235af61d51 형식). 다음 단계에 필요하므로 어딘가에 보관하세요. 추가 도움이 필요하면 공식 Ghost 사용자 정의 통합 페이지를 방문하세요.
"코드 삽입" 섹션에서 다음 코드 청크를 "사이트 바닥글" 영역에 복사하여 붙여넣습니다.
<CONTENT_API_KEY> 자리 표시자를 자신의 API 키로 바꾸는 것을 잊지 마세요. "저장"을 클릭하세요.
< script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>'
} ) ;
</ script > 참고 : 사용자 정의 테마를 수정하려면 해당 테마를 다른 스크립트 옆에 있는 default.hbs 에 붙여넣으면 정확히 동일한 방식으로 작동합니다.
마지막으로 검색창을 여는 메뉴에 링크를 추가하세요. 이렇게 하려면 "디자인" 섹션으로 이동하여 새 항목을 추가하세요. "탐색" 또는 "보조 탐색"에 있을 수 있습니다. 어떤 라벨로든 이름을 지정할 수 있지만("Search"가 자연스럽게 느껴짐) 링크는 #searchinghost-easy 로 끝나야 합니다 . "저장"을 클릭하세요.
단어 대신 검색 아이콘을 사용하려면 이 섹션으로 이동하세요.
? 이것으로 모든 설정이 완료되었습니다! 블로그의 메뉴 표시줄에 "검색" 버튼이 표시됩니다. 마법이 일어나는 것을 보려면 클릭하세요! 기본 검색창 모양이 마음에 들지 않으면 다음 템플릿 섹션을 확인하여 변경하세요.
또한 모든 유용한 팁을 얻으려면 질문 및 답변 섹션을 확인하고 고급 설정을 위한 구성 섹션을 확인하는 것을 잊지 마십시오.
SearchinGhostEasy는 다양한 그래픽 버전으로 제공됩니다. 기본적으로 제공되는 템플릿은 "기본"이지만 다른 템플릿으로 쉽게 전환할 수 있습니다.
이렇게 하려면 각 템플릿 설명을 참조하고 관련 코드 예제를 블로그 Code Injection > Site Footer 섹션에 복사하여 붙여넣으세요. 기본적으로 스크립트 이름의 마지막 부분만 변경됩니다(예: "searchinghost-easy-basic.js", "searchinghost-easy-backpack.js", ...).
더 많은 검색창 템플릿이 제공되기를 바랍니다! 이 프로젝트에 기여하여 귀하의 디자인 중 하나를 공유하고 싶다면 언제든지 저에게 연락하거나 이슈/PR을 작성해 주세요.
라이브 데모: https://gmfmi.github.io/searchinghost-easy/basic/
< script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>'
} ) ;
</ script >
라이브 데모: https://gmfmi.github.io/searchinghost-easy/backpack/
< script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js " > </ script >
< script >
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>'
} ) ;
</ script > 이 섹션은 고급 사용자를 위해 예약되어 있습니다. 기본적으로 구성 매개변수는 신중하게 선택되므로 추가 구성이 필요하지 않습니다.
SearchinGhostEasy에 대한 추가 제어가 필요한 경우 사용 가능한 구성 옵션은 다음과 같습니다.
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>' , // mandatory
apiUrl : 'http://example.com' ,
searchinghostOptions : { } ,
searchinghostVersion : '1.0.0' ,
zIndex : 200 ,
placeholder : "Search" ,
debug : false
} ) ;콘텐츠 API 키입니다. 이 값은 필수이며 사용자 정의 통합 세부사항에서 찾을 수 있습니다.
예:
'06a02026a9f2dcf69f7e065d7c'
블로그 도메인 이름과 다른 API URL을 설정하세요. 테스트 목적으로 유용할 수 있습니다. 이 옵션은 SearchinGhost 라이브러리의
url에 해당합니다.예:
'http://example.com'
SearchinGhost 기본 구성을 재정의합니다. 이 구성은 SearchinGhostEasy 자체에서 제공하는 구성 및 선택한 검색 템플릿과 병합됩니다.
사용 가능한 모든 옵션을 보려면 SearchinGhost 설명서를 참조하세요.
예:
{ searchOn : 'submit' , limit : 5 , cacheMaxAge : 3600 , }
사용할 SearchinGhost 버전을 설정합니다. 최신 버전이 방금 출시된 경우 유용할 수 있습니다.
예:
'1.3.0'
HTML iframe 요소
z-index특정 값으로 설정합니다.기본값:
2147483647
기본 "검색" 검색창 자리 표시자를 원하는 대로 변경하세요. 영어가 아닌 웹사이트에 특히 유용합니다.
모든 브라우저 호환(예: UTF-8) 문자를 사용할 수 있습니다. 다음은 몇 가지 실제 사례입니다.placeholder: "Rechercher..." # in french with dots placeholder: "Αναζήτηση" # in greek placeholder: "With emojis! ?" # use with caution기본값:
"Search"
디버그 모드를 활성화하려면
true로 설정하세요. 그러면 사용된 최종 SearchinGhost 구성이 출력되고 SearchinGhost에 대한 디버그도 활성화됩니다.기본값:
false
예, SearchinGhostEasy의 새 버전이 출시되면 자동으로 다운로드됩니다.
이 동작을 원하지 않으면 @latest URL의 특정 버전으로 바꾸세요. 예를 들어 basic 템플릿의 경우 https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js 를 사용합니다( 1.0.0 원하는 버전으로 교체). ).
예, 스크립트를 사용하거나 테마를 업데이트하여 수행할 수 있습니다(테마 옵션은 바로 아래 참조).
스크립트 옵션의 경우 SearchinGhostEasy 초기화 섹션 앞에 다음 예제의 첫 번째 3줄을 복사하여 붙여넣으면 됩니다.
이 코드 샘플은 기본 "Casper" Ghost 테마에서 작동하도록 설계되었습니다. 자신의 웹사이트에서 작동하도록 하려면 몇 가지 조정이 필요할 수 있습니다(예: 쿼리 선택기 및 생성된 내부 자바스크립트 요소).
< script >
var searchIcon = '<svg style="fill:#fff" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
var menu = document . querySelector ( 'ul.nav' ) ;
menu . insertAdjacentHTML ( 'beforeend' , `<li class="nav-search"><a href="#searchinghost-easy"> ${ searchIcon } </a></li>` ) ;
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>'
} ) ;
</ script >그렇지 않고 보조 메뉴(소셜 링크 옆)에 아이콘을 추가하려면 다음 중 하나를 사용하세요.
< script >
var searchIcon = '<svg style="fill:#fff" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
var menu = document . querySelector ( '.social-links' ) ;
menu . insertAdjacentHTML ( 'beforeend' , `<a class="social-link" href="#searchinghost-easy"> ${ searchIcon } </a>` ) ;
new SearchinGhostEasy ( {
contentApiKey : '<CONTENT_API_KEY>'
} ) ;
</ script > 두 경우 모두 Ghost 테마와 더 잘 어울리도록 아이콘 색상을 수정해야 하는 경우 fill 속성을 적절한 값으로 업데이트하세요. 예를 들어 style="fill:#fc03ec" 분홍색을 얻을 수 있습니다.
예, 테마를 사용자 정의하려면 이 Ghost 가이드에 따라 필요에 따라 메뉴를 수정하십시오.
그런 다음 SearchinGhostEasy가 작동하도록 하기 위한 유일한 요구 사항은 링크의 href 값으로 #searchinghost-easy 사용하는 것입니다.
예를 들어, partials/navigation.hbs 파일은 다음과 같을 수 있습니다.
< ul class =" nav " role =" menu " >
{{#foreach navigation}}
< li class =" {{link_class for=(url) class=(concat " nav- " slug)}}" role=" menuitem " > < a href =" {{url absolute= " true "}}" > {{label}} </ a > </ li >
{{/foreach}}
< li class =" search-icon " role =" menuitem " > < a href =" #searchinghost-easy " > {{ > "icons/search"}} </ a > </ li >
</ ul > 다음을 포함하는 partials/icons/search.hbs :
< svg xmlns =" http://www.w3.org/2000/svg " xmlns:xlink =" http://www.w3.org/1999/xlink " viewBox =" 0 0 512 512 " > < path d =" M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z "/> </ svg > 물론 #searchinghost-easy 를 가리키는 링크는 검색 상자 팝업을 엽니다. 예를 들어 Ghost 게시물이나 테마 .hbs 파일에서 직접 같은 페이지에 하나 이상의 링크를 만들 수 있습니다.
기사를 작성할 때 다음과 같은 방법으로 간단히 링크를 만들 수 있습니다.
HTML에서 SearchinGhostEasy 링크는 다음과 같습니다.
< a href =" #searchinghost-easy " > click to search </ a > 
