빠른 팁 : Google 사용자 정의 검색 스타일 수동으로 스타일링하는 방법-JS 튜토리얼-php.cn

Quick Tip: How to Style Google Custom Search Manually

코어 포인트

특수 GCSE 태그를 사용하지 않아도 검색 양식을 수동으로 렌더링하면 GCSE (Google Custom Search Engine)를 수동으로 스타일링하여 검색 입력 필드를 더 잘 제어하고 더 간단하게 보이게 할 수 있습니다.

GCSE 콜백 함수는 입력 속성을 변경하기 전에 입력이로드되도록합니다. 이 메소드는

Google 검색 API를 사용하여 검색 상자 및 결과 상자를 만들 수 있습니다. 활성 쿼리가 있으면 결과 상자도 생성됩니다. 다른 사용자 정의는 문서를 찾아서 달성 할 수 있습니다.

사용자 정의 스타일 기능을 추가 사용자 정의를 위해 검색 div에 추가 할 수 있습니다. 이 기능은 자리 표시자를 변경하고 배경을 삭제하며 초점이 맞지 않을 때 배경을 제거하는 이벤트를 추가하는 데 사용될 수 있습니다.

setTimeout 이 기사는 Mark Brown이 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

웹 사이트 소유자는 종종 GCSE (Google Custom Search Engine)를 사용하여 내장 및/또는 사용자 정의 검색 기능을 사용하는 대신 컨텐츠를 검색하기로 선택합니다. 그 이유는 간단합니다. 작업이 훨씬 적으며 대부분의 경우 목적을 달성 할 수 있습니다. 고급 필터 또는 사용자 정의 검색 매개 변수가 필요하지 않은 경우 GCSE가 적합합니다.

이 빠른 팁에서는 검색 양식을 수동으로 렌더링하는 방법 (특수 GCSE 태그를 사용할 필요 없음)과 더 세밀한 제어 및 더 깨끗한 검색 입력 필드 스타일 설정 방법을 제공하는 결과 상자를 수동으로 렌더링하는 방법을 보여줍니다.

질문

일반적으로 웹 사이트에 GCSE를 추가하는 것은 웹 사이트에 복사하는 스크립트 및 사용자 정의 HTML 태그만큼 쉽습니다. 특수 GCSE 태그를 배치하면 입력 검색 필드가 렌더링됩니다. 이 필드에서 유형 및 시작 검색은 이전에 구성된 매개 변수를 기반으로 Google 검색을 수행합니다 (예 : Sitepoint.com 만 검색).

일반적인 질문은 "GCSE 입력 필드의 자리 표시자를 변경하는 방법?"입니다. 불행히도, 제안 된 답변은 일반적으로 신뢰할 수없는

메소드를 사용하여 GCSE의 AJAX 호출이 완료 될 때까지 기다린 다음 (입력이 DOM에 첨부되어 있는지 확인한 다음 JavaScript를 통해 속성을 변경하기 때문에 잘못된 답변입니다.

우리는 또한 요소를 쿼리하고 JS를 사용하여 속성을 변경하지만 를 사용하는 대신 GCSE에서 제공하는 콜백 함수를 사용하여 입력이로드되도록합니다.

GCSE 계정을 만듭니다

검색 엔진은 온라인으로 완전히 구성되어 있습니다. 첫 번째 단계는 GCSE 웹 사이트로 이동하여 추가를 클릭하는 것입니다. 마법사를 따라 검색하려는 도메인 이름 (일반적으로 웹 사이트 URL)을 작성하십시오. 이제 고급 설정을 무시할 수 있습니다. "마무리"를 클릭 한 후

제어판으로 이동하여 검색 엔진 ID를 클릭하고 나중에 사용하려면이 값에 유의하십시오.

를 사용해 보려면 필요한 HTML과 함께 기본 index.html과 렌더링 및 사용자 정의 검색에 필요한 기능이 포함 된 app.js 파일을 만듭니다.

와 함께 기본 HTML 파일을 계속 만듭니다

우리는 두 개의

를 추가하고 특수 클래스를 사용하여 검색 양식과 결과를 제시 해야하는 요소를 식별했습니다.

수동 렌더링 함수

이제 app.js 파일을 입력하고 다음을 추가하십시오. 먼저 구성에 대한 일부 변수를 선언합니다. 이전에 쓴 ID를

구성 필드에 넣으십시오. Local Index.html 파일의 URL을

필드에 넣으십시오. 사용자가 쿼리를 제출 한 후 검색이 리디렉션되는 곳입니다. 또한 GCSE는 제공된 URL에서 결과 필드를 렌더링 할 것으로 예상됩니다.

함수 페이지가로드되었는지 확인하고로드되면 콜백 함수는 를 렌더링하는 데 도움이됩니다. 나중에 문서가로드 된 후.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    <🎜>

</body>
</html>

로그인 후 복사

<🎜 🎜> <<> 함수 config에서 제공된 클래스의 요소로 dom을 쿼리하십시오. 래퍼 디바리가 발견되면 검색 및 결과 필드를 렌더링하기 위해

및 <div>가 각각 호출됩니다.

<<> 기능은 실제 마법이 발생하는 곳입니다. 우리는 Google 검색 API (<🎜 객체 사용 방법에 대한 자세한 내용)를 사용하여 검색 상자를 만들고 활성 쿼리 (결과)가있는 경우 결과 상자가 생성됩니다.

렌더링 함수는이 예제에서 제공되는 것보다 더 많은 매개 변수를 허용하므로 추가 사용자 정의가 필요한 경우 설명서를 확인하십시오. <🎜 🎜> 매개 변수는 실제로 우리가 렌더링하려는 div의 ID를 받아들이고, <🎜 🎜> 매개 변수는 우리가 정확히 무엇을 렌더링 할 것인지를 나타냅니다 (

results <🎜🎜> 또는 <🎜 🎜 <🎜 🎜 🎜> 또는 둘 다 ).

<<> 또한,

var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 传递div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();

로그인 후 복사

는 래퍼 요소의 데이터 속성을 찾아 내고 <🎜 🎜> 스타일링 기능 <🎜 🎜> 속성이 주어지면 범위에서 함수 이름을 찾아 요소에 적용합니다. . 이것이 요소를 스타일링 할 수있는 기회입니다.

gcseId 이 코드 스 니펫에서는 GCSE 가이 변수를 내부적으로 사용하고로드가 완료된 후 콜백 함수를 실행할 수 있도록 글로벌 범위에서 콜백 변수를 설정합니다. 이 방법은 <🎜 🎜> 솔루션을 사용하여 입력 필드의 자리 표시 자 (또는 다른)를 편집하는 것보다 훨씬 나은 방법을 만듭니다. resultsUrl

<<> 테스트 실행

<🎜 🎜> 지금까지 검색 상자와 결과를 렌더링하는 데 필요한 모든 것을 포함 시켰습니다. Node.js가 설치된 경우 index.html 및 app.js 파일이 배치 된 폴더로 이동하여

명령을 실행하십시오. 기본적으로 이것은 LocalHost의 포트 8080 폴더의 내용을 제공합니다. http-server

<<>

Quick Tip: How to Style Google Custom Search Manually <<> 스타일 함수

<🎜 🎜> 이제 우리는 검색 div에 사용자 정의 스타일 함수를 추가 할 것입니다. return Index.html 및 <🎜 🎜 div : <🎜 🎜>에 A

속성을 추가하십시오. 이제 파일 상단의 app.js로 이동하여 구성 변수 선언에 따라 새 기능을 추가하십시오. 이제 테스트 페이지를 다시로드하면 올바른 자리 표시자가 나타납니다.

<<> #searchForm <🎜 🎜> <<> 결론 styling-function

Google 사용자 정의 검색 엔진은 특히 웹 사이트가 정적 HTML 일 때 간단한 검색의 빠른 설정에 매우 효과적입니다. 소량의 JavaScript 코드만으로 검색 양식 및 결과 페이지를 사용자 정의하여 사용자에게보다 원활한 경험을 제공 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    <🎜>

</body>
</html>

로그인 후 복사

GCSE를 사용하고 있습니까, 아니면 더 나은 솔루션을 찾았습니까? 아래에 댓글을 달아주세요!

Google의 사용자 정의 검색 스타일을 설정할 때 FAQ

<<> Google의 사용자 정의 검색 엔진 모양을 사용자 정의하는 방법은 무엇입니까?

var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 传递div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();

로그인 후 복사

CSS 사용과 관련된 맞춤형 Google 검색 엔진 (Cascading Stylesheets)의 모양을 사용자 정의하십시오. CSS는 HTML로 작성된 문서의 모양과 형식을 설명하는 스타일링 언어입니다. 검색 엔진의 색상, 글꼴, 크기 및 기타 요소를 변경할 수 있습니다. 이를 위해서는 검색 요소를 사용자 정의 할 수있는 프로그래밍 가능한 검색 요소 컨트롤 API에 액세스해야합니다. 그런 다음 올바른 섹션에 CSS를 추가하여 검색 엔진의 모양을 변경할 수 있습니다.

내 웹 사이트에 Google 사용자 정의 검색을 추가 할 수 있습니까?

예, 웹 사이트에 Google 사용자 정의 검색을 추가 할 수 있습니다. Google은 GET 요청을 보내는 데 사용할 수있는 사용자 정의 검색 JSON API를 제공합니다. 이 API는 검색 결과를 JSON 형식으로 리턴합니다. 그런 다음이 결과를 사용하여 웹 사이트에서 사용자 정의 검색 엔진을 만들 수 있습니다. 이를 통해 사용자는 귀하가 지정한 웹 사이트 또는 기타 웹 사이트를 검색 할 수 있습니다.

Google 사용자 정의 검색을 사용하여 검색 창을 구현하는 방법은 무엇입니까? Quick Tip: How to Style Google Custom Search Manually

Google 사용자 정의 검색으로 검색 상자를 구현하려면 검색 엔진 ID를 작성하여 프로그래밍 가능한 검색 엔진 웹 사이트에서 수행 할 수 있습니다. ID가 있으면 사용자 정의 검색 요소 컨트롤 API를 사용하여 검색 창을 만들 수 있습니다. 그런 다음 CSS를 사용 하여이 검색 상자를 사용자 정의 할 수 있습니다.

프로그래밍 가능한 검색 요소 제어 API는 무엇입니까?

프로그래밍 가능한 검색 요소 컨트롤 API는 Google이 제공하는 기능 세트로 프로그래밍 가능한 검색 엔진을 사용자 정의 할 수 있습니다. 여기에는 검색 상자 생성, 검색 엔진 모양 사용자 정의 및 검색 결과 제어가 포함됩니다.

Google 사용자 정의 검색에서 검색 결과를 제어하는 방법은 무엇입니까?
프로그래밍 가능한 검색 요소 제어 API를 사용하여 Google의 사용자 정의 검색에서 검색 결과를 제어 할 수 있습니다. 이 API는 검색 한 웹 사이트, 반환 된 결과 수 및 결과가 표시되는 순서를 지정할 수있는 기능을 제공합니다.
상업적 목적으로 Google 사용자 정의 검색을 사용할 수 있습니까?
예, 상업적 목적으로 Google 사용자 정의 검색을 사용할 수 있습니다. 그러나 서비스 약관을 이해해야합니다. 예를 들어, 검색 엔진을 사용하여 성인 콘텐츠를 표시하거나 불법 활동을 촉진 할 수 없습니다.
Google 사용자 정의 검색에서 검색 결과의 색상을 변경하는 방법은 무엇입니까?
CSS를 사용하여 Google의 사용자 정의 검색에서 검색 결과의 색상을 변경할 수 있습니다. 프로그래밍 가능한 검색 요소 컨트롤 API에 액세스하고 올바른 섹션에 CSS를 추가해야합니다. 텍스트, 배경 및 기타 검색 결과 요소의 색상을 변경할 수 있습니다.
Google을 사용하여 모바일 장치에서 사용자 정의 검색을 할 수 있습니까?
예, 모바일 장치에서 Google을 사용하여 검색을 사용자 정의 할 수 있습니다. 프로그래밍 가능한 검색 엔진은 반응 형으로 설계되었으므로보고있는 장치의 화면 크기에 맞게 조정됩니다. CSS를 사용하여 검색 엔진의 모양을 사용자 정의하여 모바일 친화적으로 만들 수 있습니다.
내 Google 사용자 정의 검색 엔진에 로고를 추가하는 방법은 무엇입니까?
CSS를 사용하여 Google 사용자 정의 검색 엔진에 로고를 추가 할 수 있습니다. 프로그래밍 가능한 검색 요소 컨트롤 API에 액세스하고 올바른 섹션에 CSS를 추가해야합니다. 그런 다음 이미지 URL을 추가하여 로고로 표시 할 수 있습니다.
코딩 지식없이 Google을 사용하여 사용자 정의 검색을 할 수 있습니까?
코딩 지식없이 Google을 사용하여 검색을 사용자 정의 할 수 있지만 검색 엔진을 완전히 사용자 정의하기 위해 HTML 및 CSS에 대한 특정 이해가 있어야합니다. 그러나 Google은 자세한 문서 및 튜토리얼을 제공하여 시작합니다.

위 내용은 빠른 팁 : Google 사용자 정의 검색 스타일 수동으로 스타일링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!