Question

我想设计一个双语网页，即英语和卡纳达语。当用户在语言之间切换时，我不想加载新的网页或重新加载页面。如果有任何使用JavaScript或PHP的解决方案，请告诉我。

Answer 1

我们需要做的第一件事就是创建一些文件，其中包含网站支持的每种语言的文本。出于演示目的，我选择了英语，西班牙语和德语。

创建一个名为“directory”的目录。在此目录中创建3个文件：

lang.de.php
lang.en.php
lang.es.php

在我们的主文件（index.php）中，我们将包含一个文件（common.php），其中包含一段获取所请求语言的代码。

以下是3种语言文件的内容。

lang.en.php：

<?php
/*
  ------------------
  Language: English
  ------------------
 */

$lang = array();

$lang['PAGE_TITLE'] = 'My website page title';
$lang['HEADER_TITLE'] = 'My website header title';
$lang['SITE_NAME'] = 'My Website';
$lang['SLOGAN'] = 'My slogan here';
$lang['HEADING'] = 'Heading';

// Menu

$lang['MENU_HOME'] = 'Home';
$lang['MENU_ABOUT_US'] = 'About Us';
$lang['MENU_OUR_PRODUCTS'] = 'Our products';
$lang['MENU_CONTACT_US'] = 'Contact Us';
$lang['MENU_ADVERTISE'] = 'Advertise';
$lang['MENU_SITE_MAP'] = 'Site Map';
?>

lang.es.php：

 <?php
/*
 -----------------
 Language: Spanish
 -----------------
 */

$lang = array();

$lang['PAGE_TITLE'] = 'Título de la página de mi sitio web';
$lang['HEADER_TITLE'] = 'Mi sitio web de la cabecera título';
$lang['SITE_NAME'] = 'Mi Sitio Web';
$lang['SLOGAN'] = 'Mi lema aquí';
$lang['HEADING'] = 'Título';

// Menu

$lang['MENU_HOME'] = 'Inicio';
$lang['MENU_ABOUT_US'] = 'Sobre Nosotros';
$lang['MENU_OUR_PRODUCTS'] = 'Nuestros productos';
$lang['MENU_CONTACT_US'] = 'Contáctenos';
$lang['MENU_ADVERTISE'] = 'Publicidad';
$lang['MENU_SITE_MAP'] = 'Mapa del Sitio';
?>

lang.de.php：

 <?php
 /*
  -----------------
  Language: German
  -----------------
  */

 $lang = array();

 $lang['PAGE_TITLE'] = 'Meine Webseite Titel';
 $lang['HEADER_TITLE'] = 'Meine Website-Header Titel';
 $lang['SITE_NAME'] = 'Meine Website';
  $lang['SLOGAN'] = 'Mein Slogan hier';
 $lang['HEADING'] = 'Position';

 // Menu

 $lang['MENU_HOME'] = 'Heim';
 $lang['MENU_ABOUT_US'] = 'Über uns';
 $lang['MENU_OUR_PRODUCTS'] = 'Unsere Produkte';
 $lang['MENU_CONTACT_US'] = 'Kontaktieren Sie uns';
 $lang['MENU_ADVERTISE'] = 'Werben';
 $lang['MENU_SITE_MAP'] = 'Site Karte';
 ?>

分析common.php文件：

 <?php
 session_start();
 header('Cache-control: private'); // IE 6 FIX

 if(isSet($_GET['lang']))
 {
 $lang = $_GET['lang'];

 // register the session and set the cookie
 $_SESSION['lang'] = $lang;

 setcookie('lang', $lang, time() + (3600 * 24 * 30));
 }
 else if(isSet($_SESSION['lang']))
 {
 $lang = $_SESSION['lang'];
 }
 else if(isSet($_COOKIE['lang']))
 {
 $lang = $_COOKIE['lang'];
 }
 else
 {
  $lang = 'en';
 }

  switch ($lang) {
  case 'en':
  $lang_file = 'lang.en.php';
   break;

  case 'de':
  $lang_file = 'lang.de.php';
  break;

  case 'es':
    $lang_file = 'lang.es.php';
  break;

 default:
  $lang_file = 'lang.en.php';

 }

 include_once 'languages/'.$lang_file;
 ?>

应在页面中输出常量值。例子;对于文档标题：

  <title><?php echo $lang['PAGE_TITLE']; ?></title>

标题菜单：

 <ul>
 <li><a href="/"><?php echo $lang['MENU_HOME']; ?></a></li>
 <li><a href="about_us"><?php echo $lang['MENU_ABOUT_US']; ?></a></li>
 <li><a href="our_products"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a> 
</li>
 <li><a href="contact_us"><?php echo $lang['MENU_CONTACT_US']; ?></a></li>
 <li><a href="advertise"><?php echo $lang['MENU_ADVERTISE']; ?></a></li>
 <li><a href="sitemap"><?php echo $lang['MENU_SITE_MAP']; ?></a></li>

Answer 2

看看这个，为您的语言制作两门课程，比如英语和卡纳达语。在您的布局中，将第二语言分区放在第一语言分区旁边。但是不要同时显示两者。因此，对于您网页的每个内容都应重复此操作。我想这就是你想要的。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <style type="text/css">
 @import url(http://fonts.googleapis.com/earlyaccess/notosanskannada.css);



 #header
 {
 padding:10px;background:#484848;color:#EDEDED;text-allign:center;width:100%;font-size:25px;
 }
 .kannada,.english
 {
 position:absolute;
 top:100px;
 left:20px;font-size:20px;
 display:none;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function()
 {
     $('.english').fadeIn(1000);
     $('.kannada').fadeOut(500);
 });


 function changeLang()
 {
     var language = document.getElementById('change').innerHTML;
     if(language === "Kannada")
     {
         $('.english').fadeOut(500);
         $('.kannada').fadeIn(1000);
         document.getElementById('change').innerHTML = "English";
     }
     else if(language === "English")
     {
         $('.kannada').fadeOut(500);
         $('.english').fadeIn(1000);
         document.getElementById('change').innerHTML = "Kannada";
     }

 }
 </script>
 </head>

 <body>
 <div id="header"><font style="font-size:18px;color:#FFFFFF;">Load in : &nbsp;&nbsp;</font><span id="change" style="cursor:pointer;" onclick="changeLang();">Kannada</span></div>
 <div class="english"><p>This is the paragraph in English</p></div>
 <div class="kannada"><p>ಈ ಪ್ಯಾರಗ್ರಾಫ್ ಕನ್ನಡದಲ್ಲಿ ಇದೆ.</p></div>
 </body>

 </html>

如何建立双语网页？

2 个答案: