فهرست منبع

wiki term 增加修改功能

visuddhinanda 5 سال پیش
والد
کامیت
d102ac2e6e
7فایلهای تغییر یافته به همراه414 افزوده شده و 169 حذف شده
  1. 0 143
      app/term/term.js
  2. 9 5
      app/term/term.php
  3. 7 1
      app/term/term_get.php
  4. 36 2
      app/term/term_post.php
  5. 15 6
      app/wiki/index.php
  6. 288 3
      app/wiki/wiki.js
  7. 59 9
      app/wiki/wiki.php

+ 0 - 143
app/term/term.js

@@ -109,149 +109,6 @@ function note_lookup(word, showto) {
 	);
 }
 
-var term_get_word_to_div_callback = null;
-function term_get_word_to_div(strWord, div, callback) {
-	term_get_word_to_div_callback = callback;
-	let word = [{ pali: strWord, channal: "", editor: "", lang: "" }];
-
-	$.post(
-		"../term/term_get.php",
-		{
-			words: JSON.stringify(word),
-		},
-		function (data, status) {
-			if (status == "success") {
-				try {
-					let result = JSON.parse(data);
-					let html = "";
-					if (result.length > 0) {
-						let type = new Array();
-						let authors = new Array();
-						for (const iterator of result) {
-							if (iterator.tag == "") {
-								iterator.tag = "_null_";
-							}
-							if (type[iterator.tag] == null) {
-								type[iterator.tag] = new Array();
-							}
-							type[iterator.tag].push(iterator.meaning);
-							authors[iterator.owner] = iterator.user;
-						}
-
-						html += "<div class='term_word_head'>";
-						html += "<div class='term_word_head_pali'>";
-						html += result[0].word;
-						$("#page_title").text(result[0].word + "-" + gLocal.gui.encyclopedia);
-						html += "</div>";
-						for (y in type) {
-							html += "<div class='term_word_head_mean'>";
-							if (y != "_null_") {
-								html += y + ":";
-							}
-							for (k in type[y]) {
-								html += type[y][k];
-							}
-							html += "</div>";
-						}
-						html += "<div class='term_word_head_authors'>" + gLocal.gui.contributor + ":";
-						for (y in authors) {
-							if (authors[y].nickname != "") {
-								html += '<a onclick="">' + authors[y].nickname + "</a> ";
-							} else {
-								html += '<a onclick="">' + y + "</a> ";
-							}
-						}
-
-						html += "</div>";
-						html += "</div>";
-						// end of term_word_head
-
-						html += "<div id='term_list_div' style='display:flex;'>";
-						html += "<div id='term_list'>";
-
-						for (const iterator of result) {
-							html += "<div class='term_block'>";
-							html += "<div class='term_block_bar'>";
-
-							html += "<div class='term_block_bar_left'>";
-
-							html += "<div class='term_block_bar_left_icon'>";
-							html += iterator.owner.slice(0, 1);
-							html += "</div>";
-
-							html += "<div class='term_block_bar_left_info'>";
-							html += "<div class='term_meaning'>" + iterator.meaning;
-							if (iterator.tag != "_null_") {
-								html += "<span class='term_tag'>" + iterator.tag + "</span>";
-							}
-							html += "</div>";
-							html += "<div class='term_author'>" + iterator.owner + "</div>";
-							html += "</div>";
-
-							html += "</div>";
-
-							html += "<div class='term_block_bar_right'>";
-							html += "<span><button class='icon_btn'><a href='#'>" + gLocal.gui.edit + "</a></button>";
-							html += "<button class='icon_btn'><a href='#'>" + gLocal.gui.like + "</a></button>";
-							html +=
-								"<button class='icon_btn'><a href='#'>" + gLocal.gui.favorite + "</a></button></span>";
-							html += "</div>";
-
-							html += "</div>";
-							//term_block_bar 结束
-							html += "<div class='term_note' status='1'>" + note_init(iterator.note) + "</div>";
-							//html += "</div>";
-						}
-						html += "</div>";
-
-						html += "<div id='term_list_right' >";
-
-						html += '<div class="fun_frame">';
-						html += '<div class="title">' + gLocal.gui.language + "</div>";
-						html += '<div class="content" style="max-height:10em;">';
-						html += '<div><a href="">' + gLocal.gui.all + "</a></div>";
-						html += "</div>";
-						html += "</div>";
-
-						html += '<div class="fun_frame">';
-						html += '<div class="title">' + gLocal.gui.translation + "</div>";
-						html += '<div id="channal_list"  class="content" style="max-height:10em;">';
-						html += '<div><a href="">' + gLocal.gui.all + "</a></div>";
-						html += "</div>";
-						html += "</div>";
-
-						html += "</div>";
-						//end of right
-
-						html += "</div>";
-						// end of term_list_div
-						//html += "</div>";
-					} else {
-						html += "<div >词条尚未创建</div>";
-						html += '<div ><input type="input" value="" placeholder="pali"/></div>';
-						html += '<div ><input type="input" value="" placeholder="meaning"/></div>';
-						html += '<div ><input type="input" value="" placeholder="other meaning"/></div>';
-						html += '<div ><input type="input" value="" placeholder="category"/></div>';
-						html += '<div ><input type="input" value="" placeholder="language"/></div>';
-						html += "<div ><textarea></textarea></div>";
-					}
-
-					$("#" + div).html(html);
-
-					note_refresh_new();
-
-					if (term_get_word_to_div_callback != null) {
-						term_get_word_to_div_callback(result);
-					}
-				} catch (e) {
-					console.error("term_get_word_to_div:" + e + " data:" + data);
-				}
-			} else {
-				console.error("term error:" + data);
-			}
-		}
-	);
-}
 function term_get_guid_to_html(strGuid) {}
 function term_apply(guid) {
 	if (g_eCurrWord) {

+ 9 - 5
app/term/term.php

@@ -45,10 +45,14 @@ PDO_Connect("" . _FILE_DB_TERM_);
 switch ($op) {
     case "pre": //预查询
         {
-            $query = "select word,meaning from term where \"eword\" like " . $PDO->quote($word . '%') . " OR \"word\" like " . $PDO->quote($word . '%') . " group by word limit 0,10";
+			if(trim($word)==""){
+				echo json_encode(array(), JSON_UNESCAPED_UNICODE);
+            	break;
+			}
+            $query = "SELECT word,meaning from term where \"word_en\" like " . $PDO->quote($word . '%') . " OR \"word\" like " . $PDO->quote($word . '%') . " group by word limit 0,10";
             $Fetch = PDO_FetchAll($query);
-            if (count($Fetch) < 5) {
-                $query = "select word,meaning from term where \"eword\" like " . $PDO->quote('%' . $word . '%') . " OR \"word\" like " . $PDO->quote('%' . $word . '%') . " group by word limit 0,10";
+            if (count($Fetch) < 3) {
+                $query = "SELECT word,meaning from term where \"word_en\" like " . $PDO->quote('%' . $word . '%') . " OR \"word\" like " . $PDO->quote('%' . $word . '%') . " group by word limit 0,10";
                 $Fetch2 = PDO_FetchAll($query);
                 //去掉重复的
                 foreach ($Fetch2 as $onerow) {
@@ -64,12 +68,12 @@ switch ($op) {
                     }
                 }
                 if (count($Fetch) < 8) {
-                    $query = "select word,meaning from term where \"meaning\" like " . $PDO->quote($word . '%') . " OR \"other_meaning\" like " . $PDO->quote($word . '%') . " group by word limit 0,10";
+                    $query = "SELECT word,meaning from term where \"meaning\" like " . $PDO->quote($word . '%') . " OR \"other_meaning\" like " . $PDO->quote($word . '%') . " group by word limit 0,10";
                     $Fetch3 = PDO_FetchAll($query);
 
                     $Fetch = array_merge($Fetch, $Fetch3);
                     if (count($Fetch) < 8) {
-                        $query = "select word,meaning from term where \"meaning\" like " . $PDO->quote('%' . $word . '%') . " OR \"other_meaning\" like " . $PDO->quote('%' . $word . '%') . " group by word limit 0,10";
+                        $query = "SELECT word,meaning from term where \"meaning\" like " . $PDO->quote('%' . $word . '%') . " OR \"other_meaning\" like " . $PDO->quote('%' . $word . '%') . " group by word limit 0,10";
                         $Fetch4 = PDO_FetchAll($query);
                         //去掉重复的
                         foreach ($Fetch4 as $onerow) {

+ 7 - 1
app/term/term_get.php

@@ -88,7 +88,13 @@ if (isset($_POST["words"])) {
             $fetch = PDO_FetchAll($query, $parm);
             $userinfo = new UserInfo();
             foreach ($fetch as $key => $value) {
-                # code...
+				# code...
+				if($value["owner"]==$_COOKIE["userid"]){
+					$fetch[$key]["readonly"]=false;
+				}
+				else{
+					$fetch[$key]["readonly"]=true;
+				}
                 $fetch[$key]["user"] = $userinfo->getName($value["owner"]);
                 $output[] = $fetch[$key];
             }

+ 36 - 2
app/term/term_post.php

@@ -17,11 +17,27 @@ if (isset($_COOKIE["userid"]) == false) {
     exit;
 }
 
+
 $respond = array("status" => 0, "message" => "");
 PDO_Connect("" . _FILE_DB_TERM_);
 
+
+
 if ($_POST["id"] != "") {
-    #更新
+	#更新
+	#先查询是否有权限
+	$query = "SELECT id from term where guid= ? and owner = ? ";
+	$stmt = $PDO->prepare($query);
+	$stmt->execute(array($_POST["id"],$_COOKIE["userid"]));
+	if ($stmt) {
+		$Fetch = $stmt->fetch(PDO::FETCH_ASSOC);
+		if(!$Fetch){
+			$respond['status'] = 1;
+			$respond['message'] = "no power";
+			echo json_encode($respond, JSON_UNESCAPED_UNICODE);
+			exit;			
+		}
+	}
     $query = "UPDATE term SET meaning= ? ,other_meaning = ? , tag= ? ,channal = ? ,  language = ? , note = ? , receive_time= ?, modify_time= ?   where guid= ? and owner = ? ";
 	$stmt = @PDO_Execute($query, 
 						array($_POST["mean"],
@@ -44,7 +60,25 @@ if ($_POST["id"] != "") {
         $respond['message'] = $_POST["word"];
     }
 } else {
-    #新建
+	#新建
+	if(trim($_POST["word"])==""){
+		$respond['status'] = 1;
+		$respond['message'] = "pali word cannot be empty";
+		echo json_encode($respond, JSON_UNESCAPED_UNICODE);
+		exit;
+	}
+	if(trim($_POST["mean"])==""){
+		$respond['status'] = 1;
+		$respond['message'] = "meaning cannot be empty";
+		echo json_encode($respond, JSON_UNESCAPED_UNICODE);
+		exit;
+	}
+	if(trim($_POST["language"])==""){
+		$respond['status'] = 1;
+		$respond['message'] = "language cannot be empty";
+		echo json_encode($respond, JSON_UNESCAPED_UNICODE);
+		exit;
+	}
     $parm[] = UUID::v4();
     $parm[] = $_POST["word"];
     $parm[] = pali2english($_POST["word"]);

+ 15 - 6
app/wiki/index.php

@@ -13,10 +13,12 @@ include "../pcdl/html_head.php";
 		color:red;
 	}
 	#search_result{
-    position: absolute;
-    background: wheat;
-    max-width: 95%;
-    width: 24em;
+		position: absolute;
+		background: var(--bg-color);
+    	box-shadow: 8px 8px 20px var(--border-shadow);
+		max-width: 95%;
+		width: 24em;
+		z-index: 20;
 	}
 	chapter{
 		color: blue;
@@ -50,6 +52,13 @@ include "../pcdl/html_head.php";
 		#index_list{
 			display:flex;
 		}
+		.wiki_search_list li{
+			padding:0 1em;
+			line-height:1.8em;
+		}
+		.wiki_search_list li:hover {
+			background-color: beige;
+		}
 	</style>
 	<style  media="screen and (max-width:800px)">
 		#index_list{
@@ -81,7 +90,7 @@ include "../pcdl/html_head.php";
 				<div ></div>
 				<div>
 					<div>
-						<input id="wiki_search_input" type="input" placeholder="<?php echo $_local->gui->search;?>" style="    margin-left: 0.5em;width: 40em;max-width: 100%;font-size:140%;padding: 0.6em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onkeyup="wiki_search_keyup(event,this)"/>
+						<input id="wiki_search_input" type="input" placeholder="<?php echo $_local->gui->search;?>" style="width: 40em;max-width: 100%;font-size:140%;padding: 0.3em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onkeyup="wiki_search_keyup(event,this)"/>
 					</div>
 					<div id="search_result">
 					</div>	
@@ -90,7 +99,7 @@ include "../pcdl/html_head.php";
 				<ul>
 					<li>人人皆可编辑</li>
 					<li>引用圣典原文</li>
-					<li>内容翔实可信</li>
+					<li><a href="wiki.php?word=:new"><?php echo $_local->gui->new_technic_term; ?></a></li>
 
 				</ul>
 				</div>

+ 288 - 3
app/wiki/wiki.js

@@ -19,16 +19,301 @@ var _word = "";
 var _channal = "";
 var _lang = "";
 var _author = "";
+var _term_list;
+
 function wiki_index_init() {}
 
+function term_get_word_to_div(strWord) {
+	let word = [{ pali: strWord, channal: "", editor: "", lang: "" }];
+
+	$.post(
+		"../term/term_get.php",
+		{
+			words: JSON.stringify(word),
+		},
+		function (data, status) {
+			if (status == "success") {
+				try {
+					let result = JSON.parse(data);
+
+					let html = "";
+					if (result.length > 0) {
+						_term_list = result;
+						//生成头部信息
+						let type = new Array();
+						let authors = new Array();
+						//计算所有贡献者
+						for (const iterator of result) {
+							if (iterator.tag == "") {
+								iterator.tag = "_null_";
+							}
+							if (type[iterator.tag] == null) {
+								type[iterator.tag] = new Array();
+							}
+							type[iterator.tag].push(iterator.meaning);
+							authors[iterator.owner] = iterator.user;
+						}
+
+						html += "<div class='term_word_head'>";
+						html += "<div class='term_word_head_pali'>";
+						html += result[0].word;
+						$("#page_title").text(result[0].word + "-" + gLocal.gui.encyclopedia);
+						html += "</div>";
+						for (y in type) {
+							html += "<div class='term_word_head_mean'>";
+							if (y != "_null_") {
+								html += y + ":";
+							}
+							for (k in type[y]) {
+								html += type[y][k];
+							}
+							html += "</div>";
+						}
+						html += "<div class='term_word_head_authors'>" + gLocal.gui.contributor + ":";
+						for (y in authors) {
+							if (authors[y].nickname != "") {
+								html += '<a onclick="">' + authors[y].nickname + "</a> ";
+							} else {
+								html += '<a onclick="">' + y + "</a> ";
+							}
+						}
+
+						html += "</div>";
+						html += "</div>";
+						$("#wiki_head").html(html);
+						// end of term_word_head
+						html = "";
+
+						html += "<div id='term_list_div' style='display:flex;'>";
+						html += "<div id='term_list'>";
+
+						for (const iterator of result) {
+							html += "<div class='term_block'>";
+							html += "<div class='term_block_bar'>";
+							html += "<div class='term_block_bar_left'>";
+							html += "<div class='term_block_bar_left_icon'>";
+							html += iterator.user.nickname.slice(0, 1);
+							html += "</div>";
+
+							html += "<div class='term_block_bar_left_info'>";
+							html += "<div class='term_author'>" + iterator.user.nickname + "</div>";
+							html += "<div class='term_meaning'>" + iterator.meaning;
+							if (iterator.tag != "_null_") {
+								html += "<span class='term_tag'>" + iterator.tag + "</span>";
+							}
+							html += "</div>";
+
+							html += "</div>";
+
+							html += "</div>";
+
+							html += "<div class='term_block_bar_right'>";
+							html += "<span>";
+							if (!iterator.readonly) {
+								html +=
+									"<button class='icon_btn' onclick=\"wiki_term_edit('" +
+									iterator.guid +
+									"')\">" +
+									gLocal.gui.edit +
+									"</button>";
+							}
+
+							html += "<button class='icon_btn'><a href='#'>" + gLocal.gui.like + "</a></button>";
+							html +=
+								"<button class='icon_btn'><a href='#'>" + gLocal.gui.favorite + "</a></button></span>";
+							html += "</div>";
+
+							html += "</div>";
+							//term_block_bar 结束
+							html +=
+								"<div class='term_note' guid='" +
+								iterator.guid +
+								"'>" +
+								note_init(iterator.note) +
+								"</div>";
+							html += "<div class='term_edit' id='term_edit_" + iterator.guid + "' ></div>";
+							//html += "</div>";
+						}
+						html += "</div>";
+
+						//end of right
+
+						html += "</div>";
+						// end of term_list_div
+						$("#wiki_body_left").html(html);
+					} else {
+						term_render_new_word("词条尚未创建", strWord);
+					}
+
+					note_refresh_new();
+
+					$("#doc_title").text(result[0].word + "[" + result[0].meaning + "]-圣典百科");
+				} catch (e) {
+					console.error("term_get_word_to_div:" + e + " data:" + data);
+				}
+			} else {
+				console.error("term error:" + data);
+			}
+		}
+	);
+}
+function wiki_term_edit(id) {
+	for (const iterator of _term_list) {
+		if (iterator.guid == id) {
+			$("#term_edit_" + id).html(render_term_form(iterator));
+			$("#term_edit_" + id).show();
+			$(".term_note[guid='" + id + "']").hide();
+			return id;
+		}
+	}
+	return false;
+}
+function term_edit_cancel() {
+	$(".term_edit").hide();
+	$(".term_edit").html("");
+	$(".term_note").show();
+}
+function render_term_form(item) {
+	let html = "";
+	html += "<form id='form_term'>";
+	html += '<input type="hidden" name="id" value="' + item.guid + '" />';
+	html += "<ul>";
+	html += "<li ><span class='field'>" + gLocal.gui.pali_word + "</span>";
+	html +=
+		'<span class="input"><input id="form_word" type="input" name="word" value="' +
+		item.word +
+		'" placeholder="' +
+		gLocal.gui.required +
+		'"/></span></li>';
+
+	html += "<li ><span class='field'>" + gLocal.gui.first_choice_word + "</span>";
+	html +=
+		'<span class="input"><input id="form_mean" type="input" name="mean" value="' +
+		item.meaning +
+		'" placeholder="' +
+		gLocal.gui.required +
+		'"/></span></li>';
+
+	html += "<li ><span class='field'>" + gLocal.gui.other_meaning + "</span>";
+	html +=
+		'<span class="input"><input type="input" name="mean2" value="' +
+		item.other_meaning +
+		'" placeholder="' +
+		gLocal.gui.optional +
+		'"/></span></li>';
+
+	html += "<li ><span class='field'>" + gLocal.gui.tag + "</span>";
+	html +=
+		'<span class="input"><input type="input" name="tag" value="' +
+		item.tag +
+		'" placeholder="' +
+		gLocal.gui.optional +
+		'"/></span></li>';
+
+	html += "<li ><span class='field'>" + gLocal.gui.channel + "</span>";
+	html +=
+		'<span class="input"><input type="input"  name="channal" value="' +
+		item.channal +
+		'" placeholder="' +
+		gLocal.gui.optional +
+		'"/></span></li>';
+
+	html += "<li ><span class='field'>" + gLocal.gui.language + "</span>";
+	html +=
+		'<span class="input"><input id="form_lang" type="input"  name="language" value="' +
+		item.language +
+		'" placeholder="' +
+		gLocal.gui.required +
+		'"/></span></li>';
+
+	html += "<li ><span class='field'>" + gLocal.gui.note + "</span>";
+	html += "<span class='input'><textarea name='note'>" + item.note + "</textarea></span></li>";
+	html += "</ul>";
+	html += "</form>";
+	html += "<button onclick='term_save()'>" + gLocal.gui.save + "</button>";
+	if (item.guid != "") {
+		html += "<button onclick='term_edit_cancel()'>" + gLocal.gui.cancel + "</button>";
+	}
+
+	return html;
+}
+function term_render_new_word(title, word) {
+	let html = "";
+	html += "<div class='term_word_head_pali'>" + title + "</div>";
+	$("#wiki_head").html(html);
+	html = render_term_form({
+		guid: "",
+		word: word,
+		meaning: "",
+		other_meaning: "",
+		owner: "",
+		channal: "",
+		language: "",
+		tag: "",
+		note: "",
+	});
+
+	$("#wiki_body_left").html(html);
+}
+
+function term_save() {
+	if ($("#form_word").val() == "") {
+		alert(gLocal.gui.pali_word + " 不能为空");
+		return;
+	}
+	if ($("#form_mean").val() == "") {
+		alert(gLocal.gui.first_choice_word + "不能为空");
+		return;
+	}
+	if ($("#form_lang").val() == "") {
+		alert(gLocal.gui.language + "不能为空");
+		return;
+	}
+	$.ajax({
+		type: "POST", //方法类型
+		dataType: "json", //预期服务器返回的数据类型
+		url: "../term/term_post.php", //url
+		data: $("#form_term").serialize(),
+		success: function (result) {
+			console.log(result); //打印服务端返回的数据(调试用)
+
+			if (result.status == 0) {
+				alert(result.message + gLocal.gui.saved + gLocal.gui.successful);
+				window.location.assign("../wiki/wiki.php?word=" + result.message);
+			} else {
+				alert("error:" + result.message);
+			}
+		},
+		error: function (data, status) {
+			alert("异常!" + data.responseText);
+			switch (status) {
+				case "timeout":
+					break;
+				case "error":
+					break;
+				case "notmodified":
+					break;
+				case "parsererror":
+					break;
+				default:
+					break;
+			}
+		},
+	});
+}
+
 function wiki_load_id(guid) {
 	note_create();
-	note_lookup_guid_json(guid, "wiki_contents");
+	note_lookup_guid_json(guid, "wiki_body_left");
 }
 
 function wiki_load_word(word) {
 	note_create();
-	term_get_word_to_div(word, "wiki_contents", wiki_word_loaded);
+	if (word == ":new" || word == ":new") {
+		term_render_new_word(gLocal.gui.new_technic_term, "");
+	} else {
+		term_get_word_to_div(word);
+	}
 }
 function wiki_goto_word(guid, strWord) {
 	window.open("wiki.php?word=" + strWord, "_blank");
@@ -60,7 +345,7 @@ function wiki_search_keyup(e, obj) {
 	}
 	var keychar = String.fromCharCode(keynum);
 	if (keynum == 13) {
-		//dict_search(obj.value);
+		window.location.assign("wiki.php?word=" + obj.value);
 	} else {
 		wiki_pre_search(obj.value);
 	}

+ 59 - 9
app/wiki/wiki.php

@@ -54,9 +54,11 @@ echo "wiki_load_word('{$_get_word}')";
 	}
 	#search_result{
 		position: absolute;
-		background: wheat;
+		background: var(--bg-color);
+    	box-shadow: 8px 8px 20px var(--border-shadow);
 		max-width: 95%;
 		width: 24em;
+		z-index: 20;
 	}
 	note:hover chapter{
 		display:inline;
@@ -172,14 +174,16 @@ echo "wiki_load_word('{$_get_word}')";
     border-radius: 99px;
 	}
 	.term_block_bar_left_info{
-		    padding-left: 8px;
+		padding-left: 8px;
+		display:flex;
 	}
 	.term_meaning{
 		font-weight: 700;
 	}
 	.term_author{
 		font-size: 80%;
-		color: gray;
+		color: var(--main-color1);
+		padding: 0 10px 0 5px;
 	}
 	.term_tag{
 		font-size: 80%;
@@ -191,7 +195,7 @@ echo "wiki_load_word('{$_get_word}')";
 	}
 	#wiki_contents{
 		padding: 0 1em;
-		max-width: 1280px;
+		max-width: 960px;
 		margin-left: auto;
 		margin-right: auto;
 	}
@@ -252,6 +256,28 @@ echo "wiki_load_word('{$_get_word}')";
 		margin-left: 1em;
 		padding-left: 0.5em;
 	}
+	#wiki_head{
+		min-height:100px;
+	}
+	#form_term ul li{
+		display:flex;
+	}
+	#form_term ul .field{
+		flex:1;
+	}
+	#form_term ul .input{
+		flex:8;
+	}
+	input[type="text"], input[type="input"], textarea{
+		border:1px solid var(--border-line-color);
+	}
+	.wiki_search_list li{
+			padding:0 1em;
+			line-height:1.8em;
+		}
+		.wiki_search_list li:hover {
+			background-color: beige;
+		}
 	</style>
 
 <style media="screen and (max-width:800px)">
@@ -273,7 +299,6 @@ term_word_link_fun("wiki_goto_word");
 		position:unset;
 	}
 	#pali_pedia{
-		font-size: 200%;
     margin-top: auto;
     margin-bottom: auto;
     padding-left: 0.5em;
@@ -288,7 +313,7 @@ term_word_link_fun("wiki_goto_word");
 <div id="head_bar" >
 	<div id="pali_pedia" style="display:flex;width: 100%;">
 		<span style="margin: auto 1em auto 0;"><?php echo $_local->gui->wiki_term; ?></span>
-		<span id="wiki_search" style="width:35vw;margin: auto 0em;font-size: large;">
+		<span id="wiki_search" style="width:35vw;margin: auto 0em;">
 			<span style="display:block;">
 				<input id="wiki_search_input" type="input" placeholder=<?php echo $_local->gui->search; ?> style="width:30vw;background-color: var(--btn-color);border: 1px solid var(--btn-border-color);border-radius: 99px;padding: 3px 15px;"  onkeyup="wiki_search_keyup(event,this)"/>
 			</span>
@@ -297,14 +322,39 @@ term_word_link_fun("wiki_goto_word");
 		</span>	
 		<span style="font-size: medium; margin: auto 1em auto auto;">
 			<button class="icon_btn"><a href="#"><?php echo $_local->gui->setting; ?></a></button>
-			<button class="icon_btn"><a href="#"><?php echo $_local->gui->new; ?></a></button>
+			<button class="icon_btn"><a href="wiki.php?word=:new"><?php echo $_local->gui->new_technic_term; ?></a></button>
 			<button class="icon_btn"><a href="#"><?php echo $_local->gui->help; ?></a></button>
 		</span>
 	</div>
 </div>
 
-<div id="wiki_contents" style="padding: 0 1em;">
-	<?php echo $_local->gui->loading; ?>...
+<div id="wiki_contents"  >
+	<div id="wiki_head"></div>
+	<div id="wiki_body" style="display:flex;">
+		<div id="wiki_body_left" style="flex:7;padding: 0 1em;">
+			<?php echo $_local->gui->loading; ?>...
+		</div>
+		<div id="wiki_body_right" style="flex:3">
+
+			<div id='term_list_right' >
+
+				<div class="fun_frame">
+					<div class="title"><?php echo $_local->gui->language; ?></div>
+					<div class="content" style="max-height:10em;">
+						<div><a href=""><?php echo $_local->gui->all; ?></a></div>
+					</div>
+				</div>
+
+				<div class="fun_frame">
+					<div class="title"><?php echo $_local->gui->translation; ?></div>
+					<div id="channal_list"  class="content" style="max-height:10em;">
+						<div><a href=""><?php echo $_local->gui->all; ?></a></div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+	</div>
 </div>
 <script>
 	 window.addEventListener('scroll',winScroll);