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 id="GCSE-test">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.
<p> <strong> fungsi rendering manual </strong> </p>
<p> Sekarang masukkan fail app.js anda dan tambahkan yang berikut: </p>
<pre class='brush:php;toolbar:false;'>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);
})();
</pre>
<p> 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 <code>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. 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 id="GCSE-test">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', // 替换为您的本地服务器地址
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?
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!
Aplikasi JavaScript: Dari Front-End ke Back-EndMay 04, 2025 am 12:12 AMJavaScript boleh digunakan untuk pembangunan front-end dan back-end. Bahagian depan meningkatkan pengalaman pengguna melalui operasi DOM, dan back-end mengendalikan tugas pelayan melalui Node.js. 1. Contoh front-end: Tukar kandungan teks laman web. 2. Contoh backend: Buat pelayan Node.js.
Python vs JavaScript: Bahasa mana yang harus anda pelajari?May 03, 2025 am 12:10 AMMemilih Python atau JavaScript harus berdasarkan perkembangan kerjaya, keluk pembelajaran dan ekosistem: 1) Pembangunan Kerjaya: Python sesuai untuk sains data dan pembangunan back-end, sementara JavaScript sesuai untuk pembangunan depan dan penuh. 2) Kurva Pembelajaran: Sintaks Python adalah ringkas dan sesuai untuk pemula; Sintaks JavaScript adalah fleksibel. 3) Ekosistem: Python mempunyai perpustakaan pengkomputeran saintifik yang kaya, dan JavaScript mempunyai rangka kerja front-end yang kuat.
Rangka Kerja JavaScript: Menguasai Pembangunan Web ModenMay 02, 2025 am 12:04 AMKuasa rangka kerja JavaScript terletak pada pembangunan yang memudahkan, meningkatkan pengalaman pengguna dan prestasi aplikasi. Apabila memilih rangka kerja, pertimbangkan: 1.
Hubungan antara JavaScript, C, dan penyemak imbasMay 01, 2025 am 12:06 AMPengenalan Saya tahu anda mungkin merasa pelik, apa sebenarnya yang perlu dilakukan oleh JavaScript, C dan penyemak imbas? Mereka seolah -olah tidak berkaitan, tetapi sebenarnya, mereka memainkan peranan yang sangat penting dalam pembangunan web moden. Hari ini kita akan membincangkan hubungan rapat antara ketiga -tiga ini. Melalui artikel ini, anda akan mempelajari bagaimana JavaScript berjalan dalam penyemak imbas, peranan C dalam enjin pelayar, dan bagaimana mereka bekerjasama untuk memacu rendering dan interaksi laman web. Kita semua tahu hubungan antara JavaScript dan penyemak imbas. JavaScript adalah bahasa utama pembangunan front-end. Ia berjalan secara langsung di penyemak imbas, menjadikan laman web jelas dan menarik. Adakah anda pernah tertanya -tanya mengapa Javascr
Aliran node.js dengan typescriptApr 30, 2025 am 08:22 AMNode.js cemerlang pada I/O yang cekap, sebahagian besarnya terima kasih kepada aliran. Aliran memproses data secara berperingkat, mengelakkan beban memori-ideal untuk fail besar, tugas rangkaian, dan aplikasi masa nyata. Menggabungkan sungai dengan keselamatan jenis typescript mencipta powe
Python vs JavaScript: Pertimbangan Prestasi dan KecekapanApr 30, 2025 am 12:08 AMPerbezaan prestasi dan kecekapan antara Python dan JavaScript terutamanya dicerminkan dalam: 1) sebagai bahasa yang ditafsirkan, Python berjalan perlahan tetapi mempunyai kecekapan pembangunan yang tinggi dan sesuai untuk pembangunan prototaip pesat; 2) JavaScript adalah terhad kepada benang tunggal dalam penyemak imbas, tetapi I/O multi-threading dan asynchronous boleh digunakan untuk meningkatkan prestasi dalam node.js, dan kedua-duanya mempunyai kelebihan dalam projek sebenar.
Asal JavaScript: Meneroka Bahasa PelaksanaannyaApr 29, 2025 am 12:51 AMJavaScript berasal pada tahun 1995 dan dicipta oleh Brandon Ike, dan menyedari bahasa itu menjadi C. 1.C Language menyediakan keupayaan pengaturcaraan prestasi tinggi dan sistem untuk JavaScript. 2. Pengurusan memori JavaScript dan pengoptimuman prestasi bergantung pada bahasa C. 3. Ciri lintas platform bahasa C membantu JavaScript berjalan dengan cekap pada sistem operasi yang berbeza.
Di sebalik tabir: Apa bahasa JavaScript?Apr 28, 2025 am 12:01 AMJavaScript berjalan dalam penyemak imbas dan persekitaran Node.js dan bergantung pada enjin JavaScript untuk menghuraikan dan melaksanakan kod. 1) menjana pokok sintaks abstrak (AST) di peringkat parsing; 2) menukar AST ke bytecode atau kod mesin dalam peringkat penyusunan; 3) Laksanakan kod yang disusun dalam peringkat pelaksanaan.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
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
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
