<header class="header">
  <section class="container header-main">
    <div class="logo">
      <a href="<%- url_for() %>">
        <div class="cover">
          <div class="name"><%= config.title %></div>
          <div class="description"><%= config.subtitle %></div>
        </div>
      </a>
    </div>
    <div class="dropnav icon-paragraph-justify" id="JELON__btnDropNav"></div>
    <!-- 导航栏 -->
    <ul class="menu hidden" id="JELON__menu">
      <% for (var i in theme.menu) { %>
      <li rel="<%= url_for(path) %>" class="item <%= url_for(theme.menu[i].link) == url_for(path).substring(0, url_for(path).lastIndexOf('/') + 1) ? 'current' : ''   %>">
        <a href="<%= url_for(theme.menu[i].link) %>" title="<%= theme.menu[i].name %>" class="<%= theme.menu[i].icon %>">&nbsp;<%= theme.menu[i].name %></a>
      </li>
      <% } %>
    </ul>
    <!-- 搜索框 -->
    <div id="search-box">
      <div class="icon"><span class="icon-search"></span></div>
      <div class="input-box"><input type="text" id="search-input" v-model="queryText" @focus="searchInit" placeholder="站内搜索"/></div>
      <!-- 搜索结果区 -->
      <div id="search-result-box" >
        <ul class="search-result-list" v-if="searchResult.length && !searchIniting">
          <li v-for="(article,index) in searchResult" :key="index">
            <a :href='article.url' class='search-result-title' target='_blank'>{{article.title || '无标题'}}</a>
            <p class="search-result" v-html="article.matchContent"></p>
          </li>
        </ul>
        <!-- 搜索未初始化完毕时显示 -->
        <div style="text-align:center;padding:10px 0" v-else-if="searchIniting">
          <img src="<%= config.root%>img/loading-bar.gif" style="height:8px;width:auto"/>
        </div>
        <!-- 无匹配时显示 -->
        <p class="search-result" v-else>没有搜索到任何结果</p>
      </div>
    </div>
    <div class="profile clearfix">
      <div class="feeds fl">
        <% if (theme.head_links.enable) { %>
        <%
          var supList = theme.head_links.list.sup,
            subList = theme.head_links.list.sub;
        %>
        <p class="links">
          <% for (var i in supList) { %>
            <a href="<%= supList[i]['link'] %>" target="_blank"><%= supList[i]['name'] %></a>
            <% if (i != 'last') { %>|<% } %>
          <% } %>
        </p>
        <p class="sns">
          <% for (var j in subList) { %>
            <a href="<%= subList[j]['link'] %>" class="<%= j %>" target="_blank"><b>■</b> <%= subList[j]['name'] %></a>
          <% } %>
        </p>
        <% } %>
      </div>
      <div class="avatar fr">
        <img src="<%- theme.avatar %>" alt="avatar" title="Sookie">
      </div>
    </div>
  </section>
</header>
