awescnb
/
index.html

<!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>awescnb</title>

        <style>
            .hello {
                margin: 80px 0 0;
                text-align: center;
                font-size: 32px;
                color: #333;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1 class="hello">🌊 Hello Awescnb</h1>
            <aw-navlist></aw-navlist>
            <aw-footer></aw-footer>
        </div>

        <template id="aw-footer">
            <footer>awescnb @ <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: 500px;
                    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) {
                var divTemp = document.createElement('div'),
                    nodes = null,
                    fragment = document.createDocumentFragment()
                divTemp.innerHTML = html
                nodes = divTemp.childNodes
                for (var 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: '/public/templates/home.html',
                        },
                        {
                            title: '📃 富文本',
                            url: '/public/templates/post1.html',
                        },
                        {
                            title: '📃 Markdown',
                            url: '/public/templates/post.html',
                        },
                        {
                            title: '📃 tinymce5',
                            url: '/public/templates/tinymce5.html',
                        },

                        {
                            title: '📑 标签博文列表',
                            url: '/public/templates/catalog.html',
                        },
                        {
                            title: '📂 随笔分类',
                            url: '/public/templates/category.html',
                        },
                        {
                            title: '📷 相册',
                            url: '/public/templates/photos.html',
                        },
                        {
                            title: '🔍 相册 - 照片预览',
                            url: '/public/templates/photoview.html',
                        },
                        {
                            title: '📚 随笔档案博文列表',
                            url: '/public/templates/postarchive.html',
                        },
                        {
                            title: '🔖 标签列表',
                            url: '/public/templates/tags.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>