diff --git a/Gmeek.py b/Gmeek.py
index 321e1d0..6876c21 100644
--- a/Gmeek.py
+++ b/Gmeek.py
@@ -158,6 +158,9 @@ class GMEEK():
 
             pageFlag=pageFlag+1
 
+        self.renderHtml('tag.html',self.blogBase,onePageList,self.root_dir+"tag.html")
+        print("create tag.html")
+
     def createFeedXml(self):
         self.blogBase["postListJson"]=dict(sorted(self.blogBase["postListJson"].items(),key=lambda x:x[1]["createdAt"],reverse=False))#使列表由时间排序
         feed = FeedGenerator()
diff --git a/templates/base.html b/templates/base.html
index e1320a1..d65e70e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,17 +14,7 @@
     {% block head %}{% endblock %}
 </head>
 <style>
-body{
-    box-sizing: border-box;
-    min-width: 200px;
-    max-width: 900px;
-    margin: 20px auto;
-    padding: 45px;
-    font-size: 16px;
-    font-family: sans-serif;
-    line-height: 1.25;
-}
-
+body{box-sizing: border-box;min-width: 200px;max-width: 900px;margin: 20px auto;padding: 45px;font-size: 16px;font-family: sans-serif;line-height: 1.25;}
 .avatar {transition: 0.8s;}
 .avatar:hover {transform: scale(1.15) rotate(360deg);}
 #header{display:flex;padding-bottom:8px;border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));margin-bottom: 16px;}
diff --git a/templates/tag.html b/templates/tag.html
new file mode 100644
index 0000000..b0c21c4
--- /dev/null
+++ b/templates/tag.html
@@ -0,0 +1,155 @@
+{% extends 'base.html' %}
+{% block head %}
+<title>{{ blogBase['title'] }}</title>
+{% endblock %}
+
+{% block style %}
+<style>
+h1 a:not([href]){color:inherit;text-decoration:none;vertical-align: bottom;font-size:40px;font-family:Monaco;}
+.title-right{display:flex;margin:auto 0 0 auto;}
+.title-right .circle{padding: 14px 16px;margin-right:8px;}
+
+.subnav-search{margin-top:8px;margin-right:8px;}
+.subnav-search-input{width:160px;border-top-right-radius:0px;border-bottom-right-radius:0px;}
+.subnav-search button{padding:5px 8px;border-top-left-radius:0px;border-bottom-left-radius:0px;}
+
+.SideNav-icon{margin-right: 16px}
+.SideNav-item .Label{color: #fff;margin-left:8px;}
+.genTime{float: right;}
+.d-flex{min-width:0;}
+.listTitle{overflow:hidden;white-space:nowrap;text-overflow: ellipsis;max-width: 100%;}
+.listLabels{white-space:nowrap;}
+
+@media (max-width: 767px) {
+    body { padding: 8px;}
+    h1 a{font-size:24px;}
+    .SideNav-item .listLabels{display:none;}
+    .subTitle{display:none;}
+    .genTime{float: none;}
+}
+</style>
+{% endblock %}
+
+{% block header %}
+<h1><a>Tag</a></h1>
+<div class="title-right">
+    <div class="subnav-search">
+        <form action="https://www.google.com/search" method="get" target="_blank">
+            <input type="hidden" name="q" value="site:{{ blogBase['homeUrl'] }}">
+            <input type="search" name="q" class="form-control subnav-search-input float-left" aria-label="Search site" value="">
+            <button class="btn float-left" type="submit">{{ i18n['Search'] }}</button>
+        </form>
+        <svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+            <path id="searchSVG" fill-rule="evenodd" d=""></path>
+        </svg>
+    </div>
+    {% for num in blogBase['singeListJson'] -%}
+    <a href="/{{ blogBase['singeListJson'][num]['label'] }}.html"><button class="btn btn-invisible circle" title="{{ blogBase['singeListJson'][num]['postTitle'] }}">
+        <svg class="octicon" width="16" height="16" >
+            <path id="{{ blogBase['singeListJson'][num]['postTitle'] }}" fill-rule="evenodd"></path>
+        </svg>
+    </button></a>
+    {%- endfor %}
+    <a href="/rss.xml" target="_blank"><button id="buttonRSS" class="btn btn-invisible circle" title="RSS">
+        <svg class="octicon" width="16" height="16" >
+            <path id="pathRSS" fill-rule="evenodd"></path>
+        </svg>
+    </button></a>
+    <button class="btn btn-invisible circle" onclick="modeSwitch()" title="{{ i18n['switchTheme'] }}">
+        <svg class="octicon" width="16" height="16" >
+            <path id="themeSwitch" fill-rule="evenodd"></path>
+        </svg>
+    </button>
+</div>
+{% endblock %}
+
+{% block content %}
+<div style="margin-bottom: 16px;">{{ blogBase['subTitle'] }}</div>
+<nav class="SideNav border">
+
+{% for num in postListJson -%}
+<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="{{ postListJson[num]['postUrl']|e }}">
+    <div class="d-flex flex-items-center">
+        <svg class="SideNav-icon octicon" style="witdh:16px;height:16px"><path class="svgTop{{ postListJson[num]['top'] }}" d=""></path>
+        </svg>
+        <span>{{ postListJson[num]['postTitle']|e }}</span>
+    </div>
+    <div class="listLabels">
+        {% if postListJson[num]['commentNum']>0 %}<span class="Label" style="background-color:{{ blogBase['commentLabelColor'] }}">{{ postListJson[num]['commentNum'] }}</span>{% endif %}
+        <span class="Label" style="background-color:{{ postListJson[num]['labelColor'] }}">{{ postListJson[num]['label'] }}</span>
+        <span class="Label" style="background-color:{{ postListJson[num]['dateLabelColor'] }}">{{ postListJson[num]['createdDate'] }}</span>
+    </div>
+</a>
+{%- endfor %}
+
+</nav>
+{% endblock %}
+
+{% block script %}
+<script>
+document.getElementById("searchSVG").setAttribute("d",IconList["search"]);
+document.getElementById("pathRSS").setAttribute("d",IconList["rss"]);
+
+{% for num in blogBase['singeListJson'] -%}
+document.getElementById("{{ blogBase['singeListJson'][num]['postTitle'] }}").setAttribute("d",value=IconList["{{ blogBase['singeListJson'][num]['label'] }}"]);
+{%- endfor %}
+
+let requestJson="blogBase.json"
+let request=new XMLHttpRequest();
+request.open("GET",requestJson);
+request.responseType='text';
+request.send();
+request.onload=function(){
+    jsonData=JSON.parse(request.response);
+    console.log(jsonData);
+    showList(jsonData);
+}
+
+function showList(jsonData){
+    let SideNav=document.getElementsByClassName("SideNav")[0];
+    for(let i=1;i<jsonData.length;i++){
+        
+        let item=document.createElement("a");
+        item.setAttribute("class","SideNav-item d-flex flex-items-center flex-justify-between");
+        item.setAttribute("href",jsonData["postListJson"][i]['postUrl']);
+        item.setAttribute("target","_blank");
+
+        let center=document.createElement("div");
+        center.setAttribute("class","d-flex flex-items-center");
+
+        svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
+        path=document.createElementNS("http://www.w3.org/2000/svg","path"); 
+        span=document.createElement("span");
+        svg.setAttributeNS(null,"class","SideNav-icon octicon");
+        svg.setAttributeNS(null,"style","witdh:16px;height:16px");
+        path.setAttributeNS(null, "d", IconList["post"]);
+        svg.appendChild(path);
+
+        let title=document.createElement("span");
+        title.setAttribute("class","listTitle");
+        title.innerHTML=jsonData["postListJson"][i]['title'];
+        center.appendChild(svg);
+        center.appendChild(title);
+
+        let listLabels=document.createElement("div");
+        listLabels.setAttribute("class","listLabels");
+        let LabelName=document.createElement("span");
+        LabelName.setAttribute("class","Label");
+        LabelName.setAttribute("style","background-color:"+jsonData["postListJson"][i]['labelColor']);
+        LabelName.innerHTML=jsonData["postListJson"][i]['label'];
+        listLabels.appendChild(LabelName);
+        let LabelTime=document.createElement("span");
+        LabelTime.setAttribute("class","Label");
+        LabelTime.setAttribute("style","background-color:"+jsonData["postListJson"][i]['dateLabelColor']);
+        LabelTime.innerHTML=jsonData["postListJson"][i]['createdDate'];
+        listLabels.appendChild(LabelTime);
+
+        item.appendChild(center);
+        item.appendChild(listLabels);
+        SideNav.appendChild(item)
+
+    }
+
+}
+</script>
+{% endblock %}