添加多语言支持(#15);增加侧边栏全部展开选项(#7)

Author: HCLonely

README.md

@@ -77,16 +77,20 @@ logo:
 
 ### flag
 
-> 语言标识
+> Language identifier, multi-language please cooperate with [Subpage](#Subpage-configuration) use.
 
 - icon: Language icons, by default only `flag-cn` and `flag-us`, other icons please look for and store in `theme directory/source/images/flags/`.
 - name: Language name
+- default: Whether the language is the default language
+- index: The page link
 
 Examples:
 ```yml
 flag:
-  icon: flag-cn
-  name: Chinese
+  - name: Chinese
+    default: true
+    icon: flag-cn
+    index: /index.html
 ```
 
 ### search
@@ -171,6 +175,16 @@ menu:
         config: myBlog
 ```
 
+### expandAll
+
+> Whether to expand the sidebar.
+
+示例：
+
+```yml
+expandAll: true
+```
+
 ### about
 
 > About this site in the sidebar.

README_CN.md

@@ -75,16 +75,20 @@ logo:
 
 ### flag
 
-> 语言标识
+> 语言标识，多语言请配合[子页面](#子页面配置)使用
 
 - icon: 语言图标，默认仅有`flag-cn`和`flag-us`, 其他图标自行寻找存放于`主题目录/source/images/flags/`
 - name: 语言名称
+- default: 该语言是否为默认语言
+- index: 页面链接
 
 示例：
 ```yml
 flag:
-  icon: flag-cn
-  name: Chinese
+  - name: Chinese
+    default: true
+    icon: flag-cn
+    index: /index.html
 ```
 
 ### search
@@ -169,6 +173,16 @@ menu:
         config: myBlog
 ```
 
+### expandAll
+
+> 是否将侧边栏全部展开
+
+示例：
+
+```yml
+expandAll: true
+```
+
 ### about
 
 > 侧边栏的关于本站

_config.example.yml

@@ -7,8 +7,10 @@ logo:
   dark: /images/logo_dark@2x.png
 
 flag:
-  icon: flag-cn
-  name: Chinese
+  - name: Chinese
+    default: true
+    icon: flag-cn
+    index: /index.html
 
 search: true
 
@@ -24,6 +26,7 @@ userDefinedSearchData:
 
 githubCorner: '<a href="https://github.com/HCLonely/hexo-theme-webstack" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>'
 
+expandAll: false
 menu:
   - name: 测试页面
     icon: far fa-star

layout/common/head.ejs

@@ -9,7 +9,10 @@
   <link rel="shortcut icon" href="<%= url_for(setting.favicon) %>">
   <%- css(Object.values(setting.css)) %>
   <%- js(setting.js.jquery) %>
-  <script>var userDefinedSearchData = <%- JSON.stringify(setting.userDefinedSearchData) %>;</script>
+  <script>
+    var userDefinedSearchData = <%- JSON.stringify(setting.userDefinedSearchData || {}) %>;
+    var expandAll = <%- setting.expandAll ? 'true' : 'false' %>;
+  </script>
   <%- js(setting.js.header) %>
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]>

layout/common/header.ejs

@@ -20,7 +20,7 @@
     </header>
     <ul id="main-menu" class="main-menu">
       <% for( let e of setting.menu ) { %>
-      <li>
+      <li class="<%= (e.submenu && setting.expandAll) ? "expanded" : "" %>">
         <% if (e.submenu) { %>
         <a class="fas fa-angle-down" style="cursor: pointer;">
           <% } else { %>
@@ -30,7 +30,7 @@
             <span class="title"><%= e.name %></span>
           </a>
           <% if (e.submenu) { %>
-          <ul>
+          <ul style="display: <%= setting.expandAll ? "block" : "none" %>;">
             <% e.submenu.forEach(function(e) { %>
             <li>
               <a href="#<%= e.name %>" class="smooth">

layout/index.ejs

@@ -15,21 +15,21 @@
       </li>
       <li class="dropdown hover-line language-switcher">
         <% const defaultFlag = Array.isArray(setting.flag) ? (setting.flag.find(flag => flag.default) || setting.flag[0]) : setting.flag; %>
-        <a href="<%= url_for('/index.html') %>" class="dropdown-toggle" data-toggle="dropdown">
+        <a href="<%= url_for(defaultFlag.index || '/index.html') %>" class="dropdown-toggle" data-toggle="dropdown">
           <img src="<%- url_for('images/flags/' + defaultFlag.icon + '.png') %>" alt="<%= defaultFlag.icon %>" /> <%= defaultFlag.name %>
         </a>
         <ul class="dropdown-menu languages">
           <% if (Array.isArray(setting.flag)) { %>
             <% setting.flag.forEach(flag => { %>
               <li class="<%= flag.default ? 'active' : '' %>">
-                <a href="<%= url_for('/index.html') %>">
+                <a href="<%= url_for(flag.index) %>">
                   <img src="<%- url_for('images/flags/' + flag.icon + '.png') %>" alt="<%= flag.icon %>" alt="<%= flag.icon %>" /> <%= flag.name %>
                 </a>
               </li>
             <% }) %>
           <% } else { %>
             <li class="active">
-              <a href="<%= url_for('/index.html') %>">
+              <a href="<%= url_for(defaultFlag.index || '/index.html') %>">
                 <img src="<%- url_for('images/flags/' + defaultFlag.icon + '.png') %>" alt="<%= defaultFlag.icon %>" alt="<%= defaultFlag.icon %>" /> <%= defaultFlag.name %>
             </a>
           </li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-webstack",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "A hexo theme based on webstack.",
   "keywords": [
     "hexo",

source/js/footer.js

@@ -14,7 +14,7 @@ $(document).ready(function () {
     } else {
       $('.has-sub ul').each(function (id, ele) {
         var _that = $(this)
-        if (_this.find('ul')[0] != ele) {
+        if (_this.find('ul')[0] != ele && !expandAll) {
           setTimeout(function () {
             _that.attr("style", "")
           }, 300);