Halyul/hexo-theme-mdui

<div class="theme-drawer__warpper__content">
  <ul class="mdui-list">
    <a href="<%= config.root %>" class="mdui-list-item mdui-ripple mdui-ripple-white">
      <i class="mdui-list-item-icon mdui-icon material-icons">&#xe88a;</i>
      <div class="mdui-list-item-content"><%= __('global.index') %></div>
    </a>
    <a href="<%= url_for('archives/') %>" class="mdui-list-item mdui-ripple mdui-ripple-white">
      <i class="mdui-list-item-icon mdui-icon material-icons">&#xe149;</i>
      <div class="mdui-list-item-content"><%= __('global.archives') %></div>
    </a>
    <ul class="mdui-list mdui-collapse" mdui-collapse="{accordion: true}" mdui-collapse>
      <% if (site.categories && site.categories.length) { %>
        <div class="mdui-collapse-item <% if (is_category()) { %>mdui-collapse-item-open<% } %>">
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple mdui-ripple-white">
            <i class="mdui-list-item-icon mdui-icon material-icons">&#xe86e;</i>
            <div class="mdui-list-item-content"><%= __('global.categories') %></div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe5c5;</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <% site.categories.map(function(category){
              %>
              <a href="<%= url_for(category.path) %>" class="mdui-list-item mdui-ripple mdui-ripple-white" style="display: flex">
                <%= category.name %>
                <div style="flex-grow: 1;"></div>
                <span class="theme-menu-badge new mdui-color-theme-accent" data-badge-caption=""><%= category.length %></span>
              </a>
            <% }) %>
          </div>
        </div>
      <% } %>
      <% if (site.tags && site.tags.length) { %>
        <div class="mdui-collapse-item <% if (is_tag()) { %>mdui-collapse-item-open<% } %>">
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple mdui-ripple-white">
            <i class="mdui-list-item-icon mdui-icon fa fa-tags mdui-text-center"></i>
            <div class="mdui-list-item-content"><%= __('global.tags') %></div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe5c5;</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <% site.tags.map(function(tag){  %>
              <a href="<%= url_for(tag.path) %>" class="mdui-list-item mdui-ripple mdui-ripple-white" style="display: flex">
                <%= tag.name %>
                <div style="flex-grow: 1;"></div>
                <span class="theme-menu-badge new mdui-color-theme-accent" data-badge-caption=""><%= tag.length %></span>
              </a>
            <% }) %>
          </div>
        </div>
      <% } %>
      <div class="mdui-collapse-item <% if (is_year()) { %>mdui-collapse-item-open<% } %>">
        <div class="mdui-collapse-item-header mdui-list-item mdui-ripple mdui-ripple-white">
          <i class="mdui-list-item-icon mdui-icon material-icons">&#xe916;</i>
          <div class="mdui-list-item-content"><%= __('global.years') %></div>
          <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe5c5;</i>
        </div>
        <div class="mdui-collapse-item-body mdui-list">
          <%
          var years = {};
          site.posts.sort('date').reverse().forEach(function(post){
            var year = post.date.year()
            if(years[year]===undefined){
              years[year] = [];
            }
            years[year].push(post);
          });
          %>
          <% Object.keys(years).reverse().forEach(function(year){  %>
            <a href="<%= url_for('/archives/' + year + '/') %>" class="mdui-list-item mdui-ripple">
              <%= year %>
            </a>
          <% }) %>
        </div>
      </div>
    </ul>
  </ul>
  <% if (theme.pages !== null) { %>
    <div class="mdui-divider"></div>
    <ul class="mdui-list" mdui-collapse="{accordion: true}" mdui-collapse>
      <% for (var i in theme.pages) { %>
        <% if (theme.pages[i].cascade === true) { %>
          <div class="mdui-collapse-item">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple mdui-ripple-white">
              <% if (theme.pages[i].fa) { %>
                <i class="mdui-list-item-icon mdui-icon fa <%= theme.pages[i].fa %> mdui-text-center"></i>
              <% } %>
              <% if (theme.pages[i].md) { %>
                <i class="mdui-list-item-icon mdui-icon material-icons"><%- theme.pages[i].md %></i>
              <% } %>
              <% if (theme.pages[i].null_icon === true) { %>
                <i class="mdui-list-item-icon"></i>
              <% } %>
              <div class="mdui-list-item-content"><%= i %></div>
              <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe5c5;</i>
            </div>
            <div class="mdui-collapse-item-body mdui-list">
              <% for (var x in theme.pages[i].pages) { %>
                <% if (theme.pages[i].pages[x].type === 'internal') { %>
                  <a href="<%= theme.pages[i].pages[x].link %>" class="mdui-list-item mdui-ripple mdui-ripple-white" target="_self">
                <% } else { %>
                  <a href="<%= theme.pages[i].pages[x].link %>" class="mdui-list-item mdui-ripple mdui-ripple-white" target="_blank">
                <% } %>
                    <%= x %>
                  </a>
              <% } %>
            </div>
          </div>
        <% } else { %>
          <% if (theme.pages[i].type === 'internal') { %>
            <a href="<%= theme.pages[i].link %>" target="_self" class="mdui-list-item mdui-ripple mdui-ripple-white">
          <% } else { %>
            <a href="<%= theme.pages[i].link %>" target="_blank" class="mdui-list-item mdui-ripple mdui-ripple-white">
          <% } %>
              <% if (theme.pages[i].fa) { %>
                <i class="mdui-list-item-icon mdui-icon fa <%= theme.pages[i].fa %> mdui-text-center"></i>
              <% } %>
              <% if (theme.pages[i].md) { %>
                <i class="mdui-list-item-icon mdui-icon material-icons"><%- theme.pages[i].md %></i>
              <% } %>
              <% if (theme.pages[i].null_icon === true) { %>
                <i class="mdui-list-item-icon"></i>
              <% } %>
              <div class="mdui-list-item-content"><%= i %></div>
            </a>
        <% } %>
      <% } %>
    </ul>
  <% } %>
</div>