tona-vite 0.0.1

package/public/css/mobile-common.min.css

@@ -0,0 +1,226 @@
+body {
+    font-size: 14px !important;
+    -webkit-text-size-adjust: none
+}
+
+.skin-codinglife .bannerbar-mobile,.skin-codinglife .imagebar-mobile {
+    margin-bottom: -10px
+}
+
+.skin-codinglife .bannerbar-text-mobile,.skin-codinglife .imagebar-text-mobile {
+    margin-bottom: 0
+}
+
+.bannerbar-text-mobile,.imagebar-text-mobile {
+    text-align: center;
+    padding: 10px 0;
+    background-color: #ede9f2
+}
+
+.bannerbar-text-mobile a:link,.bannerbar-text-mobile a:hover,.bannerbar-text-mobile a:active,.bannerbar-text-mobile a:visited,.imagebar-text-mobile a:link,.imagebar-text-mobile a:hover,.imagebar-text-mobile a:active,.imagebar-text-mobile a:visited {
+    color: #369;
+    font-size: 14px;
+    text-decoration: none
+}
+
+.bannerbar-text-mobile a:hover,.imagebar-text-mobile a:hover {
+    text-decoration: underline
+}
+
+#bannerbar img,#imagebar img {
+    width: 100% !important;
+    max-width: 100% !important;
+    max-height: 70px
+}
+
+.formobile {
+    display: block
+}
+
+.forpc {
+    display: none !important
+}
+
+#blog_nav_rss {
+    display: none !important
+}
+
+#blog_nav_rss_image {
+    display: none !important
+}
+
+#blog_nav_newpost {
+    display: none !important
+}
+
+.blogpost-body img,.blog_comment_body img {
+    max-width: 300px !important;
+    height: auto
+}
+
+.blogpost-body p>img {
+    display: block;
+    margin: auto
+}
+
+.blogpost-body iframe {
+    max-width: 100% !important;
+    height: auto
+}
+
+div.commentform textarea {
+    min-height: 200px
+}
+
+.commentbox_title {
+    width: auto
+}
+
+#green_channel {
+    width: 100%
+}
+
+#cnblogs_post_body table[style] {
+    width: auto !important;
+    height: auto !important
+}
+
+#sidebar_search_box input[type="text"] {
+    width: 260px
+}
+
+#cnblogs_post_body table {
+    display: block;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: regular;
+    max-height: 800px
+}
+
+#cnblogs_post_body table::-webkit-scrollbar:horizontal {
+    height: 12px
+}
+
+#cnblogs_post_body table::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    border-radius: 10px;
+    background-color: #f5f5f5
+}
+
+#cnblogs_post_body table::-webkit-scrollbar {
+    width: 12px;
+    background-color: #f5f5f5
+}
+
+#cnblogs_post_body table::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #555
+}
+
+#blog_c1,#cnblogs_c2 {
+    text-align: center;
+    margin: 10px auto 0 auto
+}
+
+#blog_c1 {
+    width: 300px
+}
+
+#cnblogs_c2 img {
+    max-width: 100%;
+    height: auto
+}
+
+.commentform {
+    margin-left: 10px
+}
+
+.commentbox_tab {
+    /* width:100%; */
+}
+
+.comment_textarea {
+    width: 100%
+}
+
+div.commentform textarea {
+    font-size: 16px
+}
+
+.commentbox_title_right,.commentbox_title_left {
+    /* width: auto; */
+    /* max-width:100%; */
+    /* justify-content:space-between; */
+}
+
+.commentbox_title_right {
+    padding: 8px 5px
+}
+
+.navbar {
+    display: none
+}
+
+.cnblogs-markdown :not(pre,div,td)>code,.blogpost-body :not(pre,div,td)>code {
+    white-space: pre-wrap
+}
+
+.category-link-list {
+    grid-template-columns: repeat(2,minmax(0,1fr))
+}
+
+body.skin-lessismore {
+    min-width: auto
+}
+
+.skin-lessismore #home {
+    width: 100%
+}
+
+.skin-lessismore #mainContent {
+    float: none;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0
+}
+
+.skin-lessismore #sideBarMain {
+    width: 100%
+}
+
+.skin-lessismore .forFlow {
+    margin: 10px
+}
+
+.skin-lessismore #green_channel {
+    width: 80%
+}
+
+.skin-lessismore #tbCommentBody {
+    width: 100%
+}
+
+.skin-simplememory #mainContent {
+    float: none;
+    margin-left: 0
+}
+
+.skin-simplememory #main {
+    padding: 10px
+}
+
+.skin-simplememory .forFlow {
+    margin: 0 10px
+}
+
+.skin-simplememory #sideBarMain {
+    width: 100%;
+    float: none;
+    padding: 10px;
+    margin-right: 0
+}
+
+.skin-custom #mainContent {
+    float: none;
+    margin-left: 0
+}

package/public/images/avatar-default.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.339 16c-1.149 1.325-2.714 1.912-4.339 1.958-1.628-.05-3.225-.474-4.38-1.797-2.228 1.033-3.428 2.028-3.6 2.986v.137c-.059.369.011.75.196 1.06.184.309.468.521.788.59 2.085.952 4.767 1.078 6.996 1.064 2.455.02 4.339-.08 6.985-1.201.32-.063.606-.271.793-.578.187-.307.26-.688.203-1.057-.172-.942-1.386-1.996-3.642-3.162zm-9.423-2.295C7.92 16.285 9.478 17 11.917 17c2.44 0 3.807-.742 4.817-3.335.085.008.752-1.617.752-3.92C17.532 5.254 15.203 3 11.917 3c-3.285 0-5.766 2.253-5.72 6.779 0 1.65.647 3.931.72 3.926z" fill="#8D8EA2" fill-rule="nonzero"/></svg>

package/public/images/lite-mode-check.svg

@@ -0,0 +1 @@
+<svg t="1615632308217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478" width="16" height="16"><path d="M75.712 445.712l240.176 185.52s13.248 6.624 29.808 0l591.36-493.872s84.272-17.968 68.64 71.488c-57.04 57.968-638.464 617.856-638.464 617.856s-38.096 21.536-74.544 0C256.272 790.256 12.816 523.568 12.816 523.568s-6.672-64.592 62.896-77.856z" p-id="1479" fill="#666666"></path></svg>

package/public/images/logo.svg

@@ -0,0 +1 @@
+<svg id="layer_1" data-name="layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 280 102.66"><defs><style>.cls-1{fill:url(#gradient);}.cls-2{fill:#8dcefc;}.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:2px;}.cls-3{stroke:#457ab5;}.cls-4{stroke:url(#gradient_3);}.cls-5{fill:url(#gradient_2);}.cls-6{fill:#2e7acc;}.cls-7{fill:#e33e06;}.cls-8{fill:#8c8c8c;}</style><radialGradient id="gradient" cx="49.22" cy="-6550.95" r="44.62" gradientTransform="matrix(1, 0, 0, -0.07, 0, -359.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c8c8c"/><stop offset="0.13" stop-color="#919191" stop-opacity="0.95"/><stop offset="0.32" stop-color="#a0a0a0" stop-opacity="0.83"/><stop offset="0.54" stop-color="#b8b8b8" stop-opacity="0.61"/><stop offset="0.78" stop-color="#dadada" stop-opacity="0.32"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="gradient_3" cx="-147.55" cy="-262.27" r="23.26" gradientTransform="matrix(0.95, -0.32, -0.32, -0.95, 121.5, -275.63)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.21" stop-color="#fff" stop-opacity="0.99"/><stop offset="0.34" stop-color="#fff" stop-opacity="0.96"/><stop offset="0.46" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.56" stop-color="#fff" stop-opacity="0.81"/><stop offset="0.66" stop-color="#fff" stop-opacity="0.71"/><stop offset="0.74" stop-color="#fff" stop-opacity="0.58"/><stop offset="0.83" stop-color="#fff" stop-opacity="0.42"/><stop offset="0.91" stop-color="#fff" stop-opacity="0.24"/><stop offset="0.99" stop-color="#fff" stop-opacity="0.04"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="gradient_2" cx="61.19" cy="57.93" r="54.56" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7aacdf"/><stop offset="0.27" stop-color="#70a6dd"/><stop offset="0.73" stop-color="#5496d9"/><stop offset="1" stop-color="#408bd6"/></radialGradient></defs><title>博客园logo</title><g id="layer_2" data-name="layer 2"><g id="layer_1-2" data-name="layer 1-2"><ellipse class="cls-1" cx="49.22" cy="99.44" rx="44.62" ry="3.22"/><path class="cls-2" d="M49.22,1A48.22,48.22,0,1,0,97.44,49.22,48.22,48.22,0,0,0,49.22,1ZM34,77.06A10.46,10.46,0,1,1,44.43,66.6,10.46,10.46,0,0,1,34,77.06Zm25.11-4a6.5,6.5,0,0,1-6.5-6.5c0-9.81-8.51-18.1-18.58-18.1a6.5,6.5,0,0,1,0-13c17.12,0,31.58,14.24,31.58,31.1A6.5,6.5,0,0,1,59.08,73.1ZM79.72,67l-.56,0a6.5,6.5,0,0,1-6.47-6C71.35,45.29,59.57,28.5,40.4,28.5a6.5,6.5,0,0,1,0-13C64,15.5,83.48,34.63,85.65,60A6.51,6.51,0,0,1,79.72,67Z"/><circle class="cls-3" cx="49.22" cy="49.22" r="48.22"/><path class="cls-4" d="M35.2,5.89c23.88-7.78,50,5.36,57.41,29.05"/><path class="cls-5" d="M49.22,4.6A44.62,44.62,0,1,0,93.84,49.22,44.62,44.62,0,0,0,49.22,4.6ZM34,77.06A10.46,10.46,0,1,1,44.43,66.6,10.46,10.46,0,0,1,34,77.06Zm25.11-4a6.5,6.5,0,0,1-6.5-6.5c0-9.81-8.51-18.1-18.58-18.1a6.5,6.5,0,0,1,0-13c17.12,0,31.58,14.24,31.58,31.1A6.5,6.5,0,0,1,59.08,73.1ZM79.72,67l-.56,0a6.5,6.5,0,0,1-6.47-6C71.35,45.29,59.57,28.5,40.4,28.5a6.5,6.5,0,0,1,0-13C64,15.5,83.48,34.63,85.65,60A6.51,6.51,0,0,1,79.72,67Z"/><path class="cls-6" d="M79.72,67l-.56,0a6.5,6.5,0,0,1-6.47-6,39.24,39.24,0,0,0-4.45-15,56.64,56.64,0,0,0-37-13.58A57,57,0,0,0,5.93,38.39,44.61,44.61,0,0,0,85.62,75a51.4,51.4,0,0,0-2.86-9A6.55,6.55,0,0,1,79.72,67ZM34,77.06A10.46,10.46,0,1,1,44.43,66.6,10.46,10.46,0,0,1,34,77.06Zm25.11-4a6.5,6.5,0,0,1-6.5-6.5c0-9.81-8.51-18.1-18.58-18.1a6.5,6.5,0,0,1,0-13c17.12,0,31.58,14.24,31.58,31.1A6.5,6.5,0,0,1,59.08,73.1Z"/><path class="cls-7" d="M115.08,24.88V10.24h4.26V24.88h6.06v4.2h-6.06v36h-4.26v-36H108.6v-4.2ZM150.84,47.8v-3H155v3h7.86v3.84H155V60.4c0,3.12-1.56,4.68-4.62,4.68h-6.6l-.9-4c2.1.18,4.14.3,6.06.3,1.2,0,1.86-.66,1.86-2V51.64h-26V47.8Zm-9-33.36V10.3H146v4.14h7a34.08,34.08,0,0,0-1.74-3.6l3.72-.6a39.19,39.19,0,0,1,1.56,4.2h5.16V18.1H146v4.14h13.6V44h-4V39.82H146V43.6h-4.14V39.82H132.3V44h-4V22.24h13.56V18.1H126.18V14.44ZM142,59.38l-2.7,2.7A56.61,56.61,0,0,0,131,54.34l2.64-2.52A58.52,58.52,0,0,1,142,59.38Zm-.12-29.58V25.6H132.3v4.2Zm0,7.08V32.8H132.3v4.08ZM146,29.8h9.6V25.6H146Zm0,7.08h9.6V32.8H146Z"/><path class="cls-7" d="M192.06,20.68c-.9,1.38-1.8,2.7-2.76,4h22.14v3.48a32.73,32.73,0,0,1-10.62,9.06,74.75,74.75,0,0,0,22,4.74l-1,3.9a70,70,0,0,1-25.5-6.42c-7.08,3.24-16,5.76-26.82,7.62l-1.62-3.84c9.66-1.56,17.7-3.54,24.06-6.06A54.93,54.93,0,0,1,183.48,31a57.2,57.2,0,0,1-7.5,5.64l-2.76-3.36a44.52,44.52,0,0,0,14.64-13.5ZM219.78,26H215.4V18.52h-40V26H171V14.62h22a39.15,39.15,0,0,0-2.22-4.2l4.74-.72c.72,1.44,1.38,3.12,2.1,4.92h22.14Zm-6.72,39.36h-4.2V62.74h-25.8v2.58h-4.2V46.54h34.2Zm-4.2-6.48v-8.4h-25.8v8.4ZM206.28,28.3h-20.1l-.18.18a53.6,53.6,0,0,0,10.38,6.72A36,36,0,0,0,206.28,28.3Z"/><path class="cls-7" d="M280,65.14h-4.32v-2.4H235.2v2.4h-4.32V12.82H280Zm-4.32-6.24V16.78H235.2V58.9Zm-4.2-26.34V36.4h-9.6V48.7c0,1.44.6,2.16,1.92,2.16H266a3.05,3.05,0,0,0,1.92-.54c.72-.42,1.14-2.52,1.38-6.24l3.6,1.2c-.48,4.44-1.08,7.14-1.92,8s-2.16,1.08-4.14,1.14H262.5a4.46,4.46,0,0,1-3.42-1.32,5,5,0,0,1-1.2-3.48V36.4h-5.7c-.54,4.92-1.68,8.7-3.48,11.46-2,3.12-5.22,5.52-9.42,7.32l-2-3.48a16.49,16.49,0,0,0,8.16-6.12,22.43,22.43,0,0,0,2.88-9.18H239.4V32.56Zm-3.4-10.26v3.84H242.82V22.3Z"/><path class="cls-8" d="M123.37,79a6.18,6.18,0,0,1,5.31,2.52l-1.5,1.38a4.32,4.32,0,0,0-3.69-1.9c-3.09,0-5,2.37-5,5.58s1.92,5.61,5,5.61a4.37,4.37,0,0,0,3.69-1.89l1.5,1.38a6.18,6.18,0,0,1-5.31,2.52c-4.32,0-7.23-3.3-7.23-7.62S119.05,79,123.37,79Z"/><path class="cls-8" d="M141.61,84.36c0-2.55-1.29-3.36-3.24-3.36a5.59,5.59,0,0,0-4.29,2.25V93.84h-2.25V79.35h2.25v2.1A7.22,7.22,0,0,1,139.24,79c3,0,4.62,1.53,4.62,4.68V93.84h-2.25Z"/><path class="cls-8" d="M148.36,73.83h2.25v7.71A6,6,0,0,1,155.5,79c3.78,0,6.45,3,6.45,7.62s-2.67,7.59-6.45,7.59a6.11,6.11,0,0,1-4.89-2.52v2.16h-2.25Zm6.57,18.36c2.94,0,4.68-2.37,4.68-5.58S157.87,81,154.93,81a5.39,5.39,0,0,0-4.32,2.34v6.57a5.36,5.36,0,0,0,4.32,2.28Z"/><path class="cls-8" d="M165.61,73.83h2.25v20h-2.25Z"/><path class="cls-8" d="M171.52,86.58c0-4.2,2.76-7.59,7.17-7.59s7.17,3.39,7.17,7.59-2.76,7.62-7.17,7.62S171.52,90.78,171.52,86.58Zm12,0c0-2.94-1.71-5.58-4.8-5.58s-4.83,2.64-4.83,5.58,1.74,5.61,4.83,5.61,4.77-2.64,4.77-5.61Z"/><path class="cls-8" d="M190.63,95.88a5.53,5.53,0,0,0,4.71,2c2.4,0,4.65-1.17,4.65-4.35V91.44A6.06,6.06,0,0,1,195.13,94c-3.78,0-6.45-2.82-6.45-7.5s2.64-7.5,6.45-7.5A6,6,0,0,1,200,81.54V79.35h2.25V93.42c0,4.8-3.36,6.3-6.9,6.3a7.39,7.39,0,0,1-5.85-2.16ZM200,83.34A5.34,5.34,0,0,0,195.67,81c-2.91,0-4.65,2.31-4.65,5.52S192.76,92,195.67,92A5.36,5.36,0,0,0,200,89.67Z"/><path class="cls-8" d="M206.65,90.3a6.54,6.54,0,0,0,4.77,2.07c2.22,0,3.42-1,3.42-2.4,0-1.59-1.77-2.1-3.72-2.58-2.46-.57-5.25-1.23-5.25-4.23,0-2.25,1.95-4.17,5.4-4.17a7.36,7.36,0,0,1,5.37,2.1l-1,1.56a5.62,5.62,0,0,0-4.32-1.83c-2,0-3.21.9-3.21,2.19s1.65,1.86,3.54,2.31c2.52.57,5.43,1.29,5.43,4.5,0,2.43-2,4.38-5.7,4.38a7.71,7.71,0,0,1-5.85-2.28Z"/><path class="cls-8" d="M221.89,90.84a1.65,1.65,0,1,1-1.65,1.65h0A1.66,1.66,0,0,1,221.89,90.84Z"/><path class="cls-8" d="M233.77,79a6.18,6.18,0,0,1,5.31,2.52l-1.5,1.38a4.32,4.32,0,0,0-3.69-1.9c-3.09,0-5,2.37-5,5.58s1.92,5.61,5,5.61a4.37,4.37,0,0,0,3.69-1.89l1.5,1.38a6.18,6.18,0,0,1-5.31,2.52c-4.32,0-7.23-3.3-7.23-7.62S229.45,79,233.77,79Z"/><path class="cls-8" d="M241.39,86.58c0-4.2,2.76-7.59,7.17-7.59s7.17,3.39,7.17,7.59S253,94.2,248.56,94.2,241.39,90.78,241.39,86.58Zm12,0c0-2.94-1.71-5.58-4.8-5.58s-4.83,2.64-4.83,5.58,1.74,5.61,4.83,5.61,4.77-2.64,4.77-5.61Z"/><path class="cls-8" d="M276.88,84c0-1.83-.81-3-2.67-3a5.07,5.07,0,0,0-3.84,2.22V93.84h-2.25V84c0-1.83-.78-3-2.67-3a5.09,5.09,0,0,0-3.81,2.25V93.84h-2.25V79.35h2.25v2.1A6.25,6.25,0,0,1,266.32,79a3.72,3.72,0,0,1,3.9,2.7,6.1,6.1,0,0,1,4.86-2.7c2.64,0,4.05,1.47,4.05,4.38V93.84h-2.25Z"/></g></g></svg>

package/public/images/message.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 21.5c1.046 0 1.846-.772 1.846-1.781h-3.692c0 1.01.8 1.781 1.846 1.781zm6.77-5.344h-.616V10.22c0-2.85-2.092-5.285-4.923-5.819v-.713C13.23 3.034 12.677 2.5 12 2.5s-1.23.534-1.23 1.188V4.4c-2.832.534-4.924 2.969-4.924 5.819v5.937h-.615c-.677 0-1.231.535-1.231 1.188 0 .653.554 1.187 1.23 1.187h13.54c.676 0 1.23-.534 1.23-1.187s-.554-1.188-1.23-1.188z"
+          fill="#8d8ea2"/>
+</svg>

package/public/images/myblog.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.077 3H17.92c.874 0 1.579.779 1.579 1.74v14.52c0 .961-.705 1.74-1.577 1.74H6.08c-.874 0-1.579-.779-1.579-1.74V4.74C4.5 3.78 5.205 3 6.077 3zm4.6 12.055H8.09c-.325 0-.59.383-.59.856 0 .47.264.854.59.854h2.587c.326 0 .589-.384.589-.854 0-.473-.264-.856-.589-.856zm1.882-4.44h-4.47c-.324 0-.588.383-.588.855 0 .47.263.854.589.854h4.472c.324 0 .587-.384.587-.855 0-.47-.263-.855-.59-.855zm2.353-4.438H8.089c-.324 0-.588.382-.588.855 0 .47.263.854.589.854h6.824c.323 0 .587-.384.587-.855 0-.472-.263-.855-.59-.855v.001z"
+          fill="#8d8ea2"/>
+</svg>

package/public/images/newpost.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.41l-2.34-2.34a1.003 1.003 0 00-1.41 0l-1.83 1.83 3.751 3.75 1.83-1.83z"
+          fill="#8d8ea2"/>
+</svg>

package/public/images/search.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g stroke-width="2" transform="translate(1 1.458)" stroke="#979797" fill="none" fill-rule="evenodd"><circle cx="7.5" cy="7.5" r="7.5"/><path d="M12.494 12.048l7.778 7.778"/></g></svg>

package/public/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cnblog Pages</title>
+    <style>
+      .hello {
+        margin: 80px 0 0;
+        text-align: center;
+        font-size: 32px;
+        color: #333;
+      }
+      .theme-name {
+        color: #1b86f9;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <aw-navlist></aw-navlist>
+      <aw-footer></aw-footer>
+    </div>
+
+    <template id="aw-footer">
+      <footer>Tona @ <span></span></footer>
+
+      <style>
+        footer {
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          text-align: center;
+          padding: 20px 0;
+          background: #f8f8f8;
+          color: #555;
+        }
+      </style>
+    </template>
+
+    <template id="aw-navlist">
+      <div class="page-list"></div>
+      <style>
+        .page-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          width: 532px;
+          margin: 40px auto 0;
+        }
+        .page-list > a {
+          padding: 8px;
+          text-decoration: none;
+          border-radius: 4px;
+          color: #555;
+        }
+        .page-list > a:hover {
+          color: darkblue;
+          background-color: #f3f2f2;
+        }
+      </style>
+    </template>
+
+    <script>
+      HTMLElement.prototype.appendHTML = function (html) {
+        const divTemp = document.createElement('div')
+        let nodes = null
+        let fragment = document.createDocumentFragment()
+        divTemp.innerHTML = html
+        nodes = divTemp.childNodes
+        for (let i = 0, length = nodes.length; i < length; i += 1) {
+          fragment.appendChild(nodes[i].cloneNode(true))
+        }
+        this.appendChild(fragment)
+        nodes = null
+        fragment = null
+      }
+
+      class AwFooter extends HTMLElement {
+        constructor() {
+          super()
+          // var shadow = this.attachShadow({ mode: 'closed' })
+          const templateElem = document.getElementById('aw-footer')
+          const content = templateElem.content.cloneNode(true)
+          content.querySelector('span').innerText = new Date().getFullYear()
+          this.appendChild(content)
+        }
+      }
+
+      class NavList extends HTMLElement {
+        constructor() {
+          super()
+          const templateElem = document.getElementById('aw-navlist')
+          this.content = templateElem.content.cloneNode(true)
+          this._init()
+          this.render()
+        }
+
+        _init() {
+          this.createPageNav()
+        }
+
+        createPageNav() {
+          function createNavItem(item) {
+            return `<a href="${item.url}"><div>${item.title}</div></a>`
+          }
+
+          const pageList = [
+            {
+              title: '🏠 首页',
+              url: '/templates/home.html',
+            },
+            {
+              title: '📃 Markdown',
+              url: '/templates/post-markdown.html',
+            },
+            {
+              title: '📃 tinyMCE5',
+              url: '/templates/post-tinymce5.html',
+            },
+            {
+              title: '📃 tinyMCE',
+              url: '/templates/post-tinymce.html',
+            },
+            {
+              title: '📷 相册',
+              url: '/templates/photos.html',
+            },
+            {
+              title: '📑 标签博文列表',
+              url: '/templates/catalog.html',
+            },
+            {
+              title: '📂 随笔分类',
+              url: '/templates/category.html',
+            },
+            {
+              title: '🔍 相册 - 照片预览',
+              url: '/templates/photoview.html',
+            },
+            {
+              title: '🔖 标签列表',
+              url: '/templates/tags.html',
+            },
+            {
+              title: '📚 随笔档案博文列表',
+              url: '/templates/postarchive.html',
+            },
+          ]
+
+          pageList.forEach((item) => {
+            const navItem = createNavItem(item)
+            this.content.querySelector('.page-list').appendHTML(navItem)
+          })
+        }
+
+        render() {
+          this.appendChild(this.content)
+        }
+      }
+
+      window.customElements.define('aw-footer', AwFooter)
+      window.customElements.define('aw-navlist', NavList)
+    </script>
+  </body>
+</html>