Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah saya boleh melaksanakan reka letak mod Terjemahan Google yang boleh disesuaikan pada tapak web saya?

Bagaimanakah saya boleh melaksanakan reka letak mod Terjemahan Google yang boleh disesuaikan pada tapak web saya?

Susan Sarandon
Susan Sarandonasal
2024-11-01 15:03:31348semak imbas

How can I implement a customizable Google Translate modal layout on my website?

Menambah Terjemahan Google pada Tapak Web Anda - Menyesuaikan Antara Muka

Apabila menyepadukan Terjemahan Google ke dalam tapak web anda, anda mempunyai dua pilihan: susun atur sebaris asas atau mod yang lebih disesuaikan susun atur. Kod yang anda bentangkan daripada Terjemahan Google menyediakan reka letak sebaris, tetapi jika anda lebih suka reka letak modal, anda boleh menggunakan kod dari tapak web tutorial html-5.

Melaksanakan Reka Letak Modal

Untuk melaksanakan reka letak modal dengan penanda SELECT dan OPTION, ikut langkah berikut:

  1. Tambah kod Terjemahan Google: Sertakan kod berikut dalam bahagian dokumen HTML anda:

    <code class="html"><div id="google_translate_element"></div>
    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement(
                {pageLanguage: 'en'},
                'google_translate_element'
            );
        }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></code>
  2. Buat bekas DIV: Tambahkan DIV berikut pada dokumen HTML anda, di mana-mana sahaja anda mahu modal muncul:

    <code class="html"><div class="translate">
        <div id="google_translate_element"></div>
    </div></code>
  3. Sesuaikan reka letak (pilihan): Anda boleh menyesuaikan penampilan modal dengan menambahkan gaya CSS pada kelas .translate. Contohnya:

    <code class="css">.translate {
        position: absolute;
        top: 100px;
        right: 0;
        z-index: 9999;
    }</code>

Mengalih keluar Reka Letak Sebaris Asas

Jika anda telah menambah reka letak sebaris asas, anda perlu mengalih keluarnya untuk mengelakkan konflik dengan modal susun atur. Cari kod berikut dalam bahagian dokumen HTML anda dan alih keluarnya:

<code class="html"><meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></code>

Nota:

  • Reka letak modal memerlukan JavaScript untuk berfungsi.
  • Anda mungkin perlu melaraskan CSS gaya yang sesuai dengan reka bentuk tapak web anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh melaksanakan reka letak mod Terjemahan Google yang boleh disesuaikan pada tapak web saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn