


Petua Pantas: Cara Menggayakan Carian Custom Google secara manual
Feb 17, 2025 am 09:42 AM
mata teras
- Dengan bentuk carian secara manual (tanpa perlu menggunakan tag GCSE khas), anda boleh gaya secara manual Google Custom Search Engine (GCSE), dengan itu memberi anda kawalan yang lebih baik ke atas medan input carian dan menjadikannya kelihatan lebih mudah.
- fungsi panggil balik GCSE memastikan bahawa input dimuatkan sebelum menukar sifat input. Kaedah ini lebih dipercayai daripada menggunakan kaedah
- .
setTimeout
API Carian Google boleh digunakan untuk membuat kotak carian dan kotak hasil. Jika pertanyaan aktif wujud, kotak hasil juga dibuat. Penyesuaian lain boleh dicapai dengan melihat dokumen tersebut. - Fungsi gaya tersuai boleh ditambah ke Div Carian untuk penyesuaian selanjutnya. Fungsi ini boleh digunakan untuk menukar ruang letak, memadam latar belakang, dan menambah peristiwa yang membuang latar belakang apabila tidak fokus.
Pemilik laman web sering memilih untuk menggunakan Google Custom Search Engine (GCSE) untuk mencari kandungan mereka dan bukannya menggunakan ciri carian terbina dalam dan/atau tersuai. Alasannya adalah mudah - lebih kurang kerja dan dalam kebanyakan kes ia dapat mencapai tujuan. Jika anda tidak memerlukan penapis lanjutan atau parameter carian tersuai, GCSE adalah untuk anda.
Dalam hujung cepat ini, saya akan menunjukkan kepada anda bagaimana untuk membuat borang carian secara manual (tidak perlu menggunakan tag GCSE khas) dan kotak hasil, yang membolehkan kawalan yang lebih baik dan kaedah penetapan gaya medan input carian yang bersih.
Soalan
Biasanya, menambahkan GCSE ke laman web anda semudah skrip salinan dan tag HTML tersuai ke laman web anda. Di mana anda meletakkan tag GCSE khas, medan carian input akan diberikan. Taipkan dan mula carian dari medan ini akan melakukan carian Google berdasarkan parameter yang dikonfigurasikan sebelumnya (contohnya, cari hanya sitepoint.com).
Soalan umum ialah "Bagaimana Mengubah Pemegang Sedang untuk Medan Input GCSE?". Malangnya, jawapan yang dicadangkan biasanya salah, kerana ia menggunakan kaedahyang tidak boleh dipercayai untuk menunggu panggilan Ajax GCSE untuk disiapkan (pastikan input dilampirkan ke DOM), dan kemudian ubah sifat melalui JavaScript.
Kami juga akan menanyakan elemen dan menukar atribut menggunakan JS, tetapi kami akan menggunakan fungsi panggil balik yang disediakan oleh GCSE dan bukannya menggunakan secara membabi buta setTimeout
, yang akan memastikan bahawa input dimuatkan.
setTimeout()
Buat akaun GCSE
Enjin carian dikonfigurasi sepenuhnya dalam talian. Langkah pertama ialah pergi ke laman web GCSE dan klik Tambah. Ikuti wizard untuk mengisi nama domain yang ingin anda cari (biasanya URL laman web anda). Sekarang anda boleh mengabaikan sebarang tetapan lanjutan.
Selepas mengklik "Selesai", anda akan melihat tiga pilihan:- "Dapatkan Kod", yang akan membimbing anda melalui apa yang anda perlu salin dan di mana untuk meletakkannya supaya carian akan muncul di laman web anda
- "URL awam" akan menunjukkan kepada anda pratonton kerja carian set
- "Panel Kawalan" digunakan untuk menyesuaikan carian
pergi ke panel kawalan, klik ID enjin carian, dan perhatikan nilai ini untuk kegunaan kemudian.
Tetapan html
Untuk mencubanya, kami akan membuat index.html asas dengan HTML yang diperlukan, serta fail app.js yang mengandungi fungsi yang diperlukan untuk rendering dan carian tersuai.
terus membuat fail HTML asas dengan:
<!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>
kami menambah dua <div>
dan menggunakan kelas khas untuk mengenal pasti unsur -unsur di mana bentuk carian dan hasil harus dibentangkan.
fungsi rendering manual
Sekarang masukkan fail app.js anda dan tambahkan yang berikut:
var config = { gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址 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); })();
Pertama, kami mengisytiharkan beberapa pembolehubah untuk konfigurasi. Letakkan ID yang anda tulis sebelum ini ke dalam medan konfigurasi. Letakkan URL fail index.html tempatan ke dalam medan gcseId
. Di sinilah carian akan diarahkan semula selepas pengguna mengemukakan pertanyaan. Di samping itu, GCSE akan mengharapkan untuk menjadikan medan hasil pada URL yang disediakan. resultsUrl
Pemeriksaan fungsi Jika halaman dimuatkan, dan jika ia dimuatkan, fungsi panggil balik akan bertanggungjawab untuk memberikan renderSearchForms
; Kemudian selepas dokumen dimuatkan. queryAndRender()
Pertanyaan fungsi DOM dengan unsur -unsur kelas yang disediakan dalam konfigurasi. Jika Div Wrapper dijumpai, queryAndRender
dan renderSearch()
dipanggil masing -masing untuk menjadikan medan carian dan hasil. renderResults()
Fungsi
adalah di mana sihir sebenar berlaku. renderSearch
) untuk membuat kotak carian dan jika terdapat pertanyaan aktif (hasil) maka kotak hasil dibuat. google.search.cse.element
Fungsi yang diberikan
sebenarnya menerima ID div yang akan kami berikan, dan parameter div
menunjukkan apa sebenarnya yang akan kami render (tag
atau carian atau kedua -duanya atau kedua -duanya atau kedua -duanya atau kedua -duanya ).
Di samping itu,
gaya renderSearch()
diberikan, ia akan mencari nama fungsi dalam skop dan memohon kepada elemen . Ini adalah peluang kami untuk gaya elemen.
window.__gcse = { parsetags: 'explicit', callback: renderSearchForms };untuk mengedit pemegang tempat (atau apa -apa lagi) dari medan input.
setTimeout()
Setakat ini, kami telah memasukkan semua yang kami perlukan untuk menjadikan kotak carian dan hasilnya. Jika anda mempunyai Node.js yang dipasang, pergi ke folder di mana fail index.html dan app.js diletakkan dan jalankan arahan Fungsi gaya
pada
Enjin carian Google Custom sangat berkesan untuk persediaan cepat carian mudah, terutamanya apabila laman web hanya HTML statik. Dengan hanya sedikit kod JavaScript, anda boleh menyesuaikan borang carian dan halaman hasil untuk memberi pengguna pengalaman yang lebih lancar. Adakah anda menggunakan GCSE, atau adakah anda menemui penyelesaian yang lebih baik? Sila komen di bawah!
Bagaimana untuk menyesuaikan penampilan enjin carian tersuai Google? Bolehkah saya menambah carian khas Google ke laman web saya? Bagaimana untuk melaksanakan kotak carian menggunakan carian custom Google? Apakah API Kawalan Elemen Carian yang boleh diprogramkan? Anda boleh menggunakan API Kawalan Elemen Carian yang boleh diprogramkan untuk mengawal hasil carian dalam carian tersuai Google. API ini menyediakan fungsi yang membolehkan anda menentukan laman web yang anda cari, bilangan hasil yang dikembalikan, dan urutan di mana hasilnya dipaparkan. Ya, anda boleh menggunakan carian khusus Google untuk tujuan komersil. Walau bagaimanapun, anda perlu memahami syarat perkhidmatan. Sebagai contoh, anda tidak boleh menggunakan enjin carian untuk memaparkan kandungan dewasa atau mempromosikan aktiviti haram. Anda boleh menggunakan CSS untuk menukar warna hasil carian dalam carian tersuai Google. Anda perlu mengakses API Kawalan Elemen Carian yang boleh diprogramkan dan menambah CSS ke bahagian yang betul. Anda boleh menukar warna teks, latar belakang, dan elemen hasil carian yang lain. Ya, anda boleh menyesuaikan carian menggunakan Google pada peranti mudah alih anda. Enjin carian yang boleh diprogramkan direka untuk menjadi responsif, yang bermaksud ia akan menyesuaikan agar sesuai dengan saiz skrin peranti yang dilihatnya. Anda juga boleh menggunakan CSS untuk menyesuaikan rupa enjin carian untuk menjadikannya lebih mesra mudah alih. Anda boleh menambah logo dalam enjin carian Google Custom saya menggunakan CSS. Anda perlu mengakses API Kawalan Elemen Carian yang boleh diprogramkan dan menambah CSS ke bahagian yang betul. Anda kemudian boleh menambah URL imej untuk dipaparkan sebagai logo anda. Walaupun anda boleh menggunakan Google untuk menyesuaikan carian tanpa pengetahuan pengekodan, disarankan agar anda mempunyai pemahaman tertentu tentang HTML dan CSS untuk menyesuaikan sepenuhnya enjin carian anda. Walau bagaimanapun, Google menyediakan dokumentasi dan tutorial terperinci untuk memulakan anda. Atas ialah kandungan terperinci Petua Pantas: Cara Menggayakan Carian Custom Google secara manual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!http-server
. Secara lalai, ini akan memberikan kandungan dalam folder pada port 8080 pada localhost.
#searchForm
div: styling-function
<!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>
Sekarang pergi ke app.js, di bahagian atas fail, di bawah pengisytiharan pembolehubah konfigurasi, tambahkan fungsi baru: var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
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);
})();
Sekarang cuba muatkan halaman ujian sekali lagi dan anda akan melihat pemegang tempat yang betul.
Sesuaikan penampilan enjin carian Google tersuai yang melibatkan penggunaan CSS (cascading stylesheets). CSS adalah bahasa gaya yang menggambarkan penampilan dan pemformatan dokumen yang ditulis dalam HTML. Anda boleh menukar warna, fon, saiz, dan elemen lain enjin carian. Untuk melakukan ini, anda perlu mengakses API Kawalan Elemen Carian yang boleh diprogramkan, yang membolehkan anda menyesuaikan elemen carian. Anda kemudian boleh menambah CSS ke bahagian yang betul untuk menukar rupa enjin carian.
Ya, anda boleh menambah carian Google Custom ke laman web anda. Google menyediakan API JSON carian tersuai yang boleh anda gunakan untuk menghantar permintaan GET. API ini mengembalikan hasil carian dalam format JSON. Anda kemudian boleh menggunakan hasil ini untuk membuat enjin carian tersuai di laman web anda. Ini membolehkan pengguna anda mencari laman web anda atau laman web lain yang anda tentukan.
Melaksanakan kotak carian dengan Carian Custom Google melibatkan mewujudkan ID enjin carian, yang boleh anda lakukan di laman web enjin carian yang boleh diprogramkan. Sebaik sahaja anda mempunyai ID, anda boleh menggunakan API Kawalan Elemen Carian Custom untuk membuat kotak carian. Anda kemudian boleh menyesuaikan kotak carian ini menggunakan CSS.
API Kawalan Elemen Carian yang boleh diprogramkan adalah satu set fungsi yang disediakan oleh Google yang membolehkan anda menyesuaikan enjin carian yang boleh diprogramkan. Ini termasuk membuat kotak carian, menyesuaikan rupa enjin carian, dan mengawal hasil carian.
bagaimana untuk mengawal hasil carian dalam carian tersuai Google?
Bolehkah saya menggunakan carian custom Google untuk tujuan komersial?
bagaimana menukar warna hasil carian dalam carian tersuai Google?
Bolehkah saya menggunakan Google untuk carian tersuai pada peranti mudah alih saya?
Bagaimana untuk menambah logo dalam enjin carian Google Custom saya?
Bolehkah saya menggunakan google untuk carian tersuai tanpa pengetahuan pengekodan?

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mekanisme pengumpulan sampah JavaScript secara automatik menguruskan memori melalui algoritma pembersihan tag untuk mengurangkan risiko kebocoran ingatan. Enjin melintasi dan menandakan objek aktif dari objek akar, dan tidak bertanda dianggap sebagai sampah dan dibersihkan. Sebagai contoh, apabila objek tidak lagi dirujuk (seperti menetapkan pembolehubah kepada null), ia akan dikeluarkan dalam pusingan seterusnya kitar semula. Punca kebocoran memori yang biasa termasuk: ① Pemasa atau pendengar peristiwa yang tidak jelas; ② Rujukan kepada pembolehubah luaran dalam penutupan; ③ Pembolehubah global terus memegang sejumlah besar data. Enjin V8 mengoptimumkan kecekapan kitar semula melalui strategi seperti kitar semula generasi, penandaan tambahan, kitar semula selari/serentak, dan mengurangkan masa menyekat benang utama. Semasa pembangunan, rujukan global yang tidak perlu harus dielakkan dan persatuan objek harus dihiasi dengan segera untuk meningkatkan prestasi dan kestabilan.

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Rangka kerja JavaScript mana yang terbaik? Jawapannya ialah memilih yang paling sesuai mengikut keperluan anda. 1. REACT adalah fleksibel dan bebas, sesuai untuk projek sederhana dan besar yang memerlukan penyesuaian tinggi dan keupayaan seni bina pasukan; 2. Angular menyediakan penyelesaian lengkap, sesuai untuk aplikasi peringkat perusahaan dan penyelenggaraan jangka panjang; 3. Vue mudah digunakan, sesuai untuk projek kecil dan sederhana atau perkembangan pesat. Di samping itu, sama ada terdapat timbunan teknologi sedia ada, saiz pasukan, kitaran hayat projek dan sama ada SSR diperlukan juga faktor penting dalam memilih rangka kerja. Singkatnya, tidak ada kerangka terbaik, pilihan terbaik adalah yang sesuai dengan keperluan anda.

Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle

IIFE (Segera Dilanjutkan FunctionExpression) adalah ekspresi fungsi yang dilaksanakan dengan segera selepas definisi, digunakan untuk mengasingkan pembolehubah dan mengelakkan mencemarkan skop global. Ia dipanggil dengan membungkus fungsi dalam kurungan untuk menjadikannya ungkapan dan sepasang kurungan segera diikuti olehnya, seperti (fungsi () {/code/}) ();. Penggunaan terasnya termasuk: 1. Elakkan konflik berubah -ubah dan mencegah pertindihan penamaan antara skrip berganda; 2. Buat skop peribadi untuk menjadikan pembolehubah dalaman tidak kelihatan; 3. Kod modular untuk memudahkan permulaan tanpa mendedahkan terlalu banyak pembolehubah. Kaedah penulisan biasa termasuk versi yang diluluskan dengan parameter dan versi fungsi anak panah ES6, tetapi perhatikan bahawa ungkapan dan ikatan mesti digunakan.

Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)

CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.
