articles.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="favicon.svg">
    <link rel="icon" type="image/svg" href="favicon.svg" />
    <link rel="apple-touch-icon" href="favicon.svg">
    <link rel="stylesheet" type="text/css" media="screen" href="css/global.css" />
    <title>Loadding...</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="js/articles-storage.js"></script>
    <script src="js/articles-backend.js"></script>
    <script src="js/page.js"></script>
    <script src="js/article.js"></script>
    <script type="text/javascript">
        marked.setOptions({
            gfm: true,
            breaks: true
        })
    </script>
    <style type="text/css">
        #container .title { font-size: 20px;}
    </style>
</head>
<body>
    <header><div id="header"><a href="/">Hibiks 的博客</a></div></header>
    <div id="container"></div>
    <footer><div id="page-tips"></div></footer>
    <script type="text/javascript">
        (function(){

            if(!location.hash ) {
                location.href = '404.html'
                return
            }
            // issue id
            let issueId = location.hash.substring(2)
            console.log('Issue Number: ' + issueId)
            
            article.renderArticle(issueId).finally( () => {
                article.updateArticleInBackground(issueId).catch( e => {
                    window.location.href = '/'
                })
            })

        })()
        
        window.onhashchange = () => {
            if(location.hash.startsWith('#!')) {
                window.location.reload(true)
            }
        }
    </script>
</body>
</html>