<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="header(title,keywords)">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="keywords" th:content="${keywords ?: commons.site_option('site_keywords')}"/>
    <meta name="description" th:content="${description ?:commons.site_option('site_description')}"/>
    <link rel="shortcut icon" th:href="@{/user/img/favicon.png}"/>
    <link rel="apple-touch-icon" th:href="@{/user/img/apple-touch-icon.png}"/>
    <title><th:block th:text="${title ?: '首页'}+' - '+${commons.site_option('site_title','My Blog')}"></th:block></title>
    <link th:href="@{//cdn.bootcss.com/highlight.js/9.9.0/styles/xcode.min.css}" rel="stylesheet"/>
    <link th:href="@{/user/css/style.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>

    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body  gtools_scp_screen_capture_injected="true" th:class="${is_post}?'':'bg-grey'">
<!--[if lt IE 8]>
<div class="browsehappy" role="dialog">
    当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
</div>
<![endif]-->
<header id="header" class="header bg-white">

    <div id="container" class="navbar-container">
        <a th:href="${commons.site_url('/')}" class="navbar-logo">
            <img th:src="@{/user/img/logo.png}" alt="首页"/>
        </a>
        <div class="navbar-menu">
            <!--这里加一个关于typepage的查询 然后返回这些link-->
                <a :href ="'/'+site.link"  v-for="site in sites" >
                    {{site.name}}
                </a>
        </div>
        <div class="navbar-search" onclick="">
            <span class="icon-search"></span>
            <form role="search" onsubmit="return false;">
                <span class="search-box">
                    <input type="text" id="search-inp" class="input" placeholder="搜索..." maxlength="30"
                           autocomplete="off"/>
                </span>
            </form>
        </div>
        <div class="navbar-mobile-menu" onclick="">
            <span class="icon-menu cross"><span class="middle"></span></span>
            <ul>
                <li   v-for="site in sites" >
                    <a :href ="'/'+site.link" >
                        {{site.name}}
                    </a>
                </li>
            </ul>
        </div>

    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script th:inline="javascript">

        var vm2 = new Vue({
            el:"#container",
            data:{
                url:"title",
                sites: [

                ]
            },
            created:function(){

            },
            mounted(){
                var initSites=[
                { name: '归档' ,link:'archives'},
                { name: '友链' ,link:'links'},
                ]
                this.init(initSites)
            },
            methods:{
                init(param){
                    axios.get('/'+this.url).then(response=>{
                        console.log(response.data)
                        for (i in response.data) {
                            param.push(response.data[i]);
                        }

                        this.sites=param;
                    }).catch(error=>{
                        console.log(error);
                        alert('获取导航栏信息失败！');
                    })
                }
            }
        })

    </script>
</header>

</body>
</html>