update

6 years ago · 3f29aa7409
parent c830c0acbb
commit 3f29aa7409
13 changed files with 308 additions and 191 deletions
--- a/README.md
+++ b/README.md
@ -49,59 +49,133 @@ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autop



-## 博客配置项
+## 主题配置

-这一部分属于博客配置，要修改的文件是博客主目录的`_config.yml`文件。
+把 `themes/material-x/_config.yml` 中的 `materialx:` 相关的内容复制到博客主目录的 `_config.yml` 文件中，根据自己的需要填写和修改。

+这样做的好处是：更新主题的时候你修改过的配置就不会被覆盖了。

+以下这些配置如果没有特殊说明，都指的是博客主目录的 `_config.yml` 文件。

-### 头像

-如果你没有设置头像，将会显示默认头像，如果你不想显示任何头像，请修改主题的配置项。
+
+### 导航栏
+
+你可以 `materialx:` 下面找到类似这一段，把它改为你需要的：

 ```yaml
-avatar: "https://xaoxuu.com/assets/img/avatar.jpg"
+materialx:
+  # 导航栏
+  nav_menu:
+    - name: 主页
+      slug: about
+      fa:   home
+      url: /
+    - name: 项目
+      slug: projects
+      fa:   cube
+      url: https://xaoxuu.com/proj
+    - name: 博客
+      slug: home
+      fa:   rss
+      url: /
+    - name: 归档
+      slug: archives
+      fa:   archive
+      url: /archives
 ```
-### 评论

-提供3种可选，如果你使用其他的评论系统，请自己修改主题。
+其中 `fa` 是 `font-awesome` 图标名，你要显示什么图标，去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。

-#### Disqus

-官网： [http://disqus.com/](http://disqus.com/)
+
+### 侧边栏
+
+右边的小窗口，可以根据需要显示。
+
+#### 头像
+
+如果你没有设置头像，将会显示默认头像。

 ```yaml
-# disqus评论
-disqus_shortname: #你的disqus的shortname#
+avatar: "https://xaoxuu.com/assets/img/avatar.jpg" # 如果没有设置头像 url 将会显示默认头像。
+
+# 主题配置
+materialx:
+  widgets:
+  - avatar # 把这一项注释掉就不显示头像了
 ```

-#### Livere 来必力

-官网： [http://www.laibili.com.cn/](http://www.laibili.com.cn/)
+#### 分类

 ```yaml
-# 来必力评论
-livere_shortname: #你的disqus的shortname#
+# 主题配置
+materialx:
+  widgets:
+  - categories # 把这一项注释掉就不显示了
 ```
-#### Valine

-官网： [https://valine.js.org](https://valine.js.org)
+
+
+#### 标签

 ```yaml
-# valine
-valine:
-  enable: true # 如果你想用Valine评论系统，请设置enable为true
-  appId:  
-  appKey:  
-  guest_info: nick,mail #valine comment header info
-  placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
-  avatar: mp # gravatar style https://valine.js.org/avatar
-  pageSize: 10 # comment list page size
-  verify: false # valine verify code (true/false)
-  notify: false # valine mail notify (true/false)
-  lang: zh-cn
+# 主题配置
+materialx:
+  widgets:
+  - tagcloud # 把这一项注释掉就不显示了
+```
+
+
+
+#### 网易云音乐歌单
+
+```yaml
+# 主题配置
+materialx:
+  widgets:
+  - music # 把这一项注释掉就不显示了
+  # 网易云音乐歌单id
+  widgets_musicid: 746319661
+```
+
+
+
+#### 联系信息
+
+```yaml
+# 主题配置
+materialx:
+  widgets:
+  - contacts # 把这一项注释掉就不显示了
+  # 右边的联系信息小窗口
+  widgets_contacts:
+  - name: GitHub
+    desc: xaoxuu
+    url: https://github.com/xaoxuu
+  - name: 10086
+    desc: 测试打电话
+    url: tel:10086
+```
+
+
+
+#### 友链
+
+```yaml
+# 主题配置
+materialx:
+  widgets:
+  - links # 把这一项注释掉就不显示了
+  # 侧边栏的友链
+  widgets_links:
+  - name: xaoxuu
+    url: https://xaoxuu.com
 ```

+
+
 ### 推荐文章

 如果你不想显示推荐文章，可以卸载 `hexo-recommended-posts` 这个依赖包。
@ -123,55 +197,74 @@ recommended_posts:



-## 主题配置项
+### 评论

-`themes/material-x/_config.yml` 这个才是主题的配置项，别搞错了哦。
+提供3种可选，如果你使用其他的评论系统，请自己修改主题。

+#### Disqus

+官网： [http://disqus.com/](http://disqus.com/)

-### 导航栏
+```yaml
+# disqus评论
+disqus_shortname: #你的disqus的shortname#
+```

-你可以找到类似这一段，把它改为你需要的：
+#### Livere 来必力
+
+官网： [http://www.laibili.com.cn/](http://www.laibili.com.cn/)

 ```yaml
-menu:
- name: 主页
-  slug: about
-  fa:   home
-  url: https://xaoxuu.com
- name: 项目
-  slug: projects
-  fa:   cube
-  url: https://xaoxuu.com/proj
- name: 博客
-  slug: home
-  fa:   rss
-  url: /
- name: 归档
-  slug: archives
-  fa:   archive
-  url: /archives
+# 来必力评论
+livere_shortname: #你的disqus的shortname#
 ```
+#### Valine

-其中 `fa` 是 `font-awesome` 图标名，你要显示什么图标，去 [font-awesome](https://fontawesome.com/icons?d=gallery) 找就可以了。
+官网： [https://valine.js.org](https://valine.js.org)

+```yaml
+# valine
+valine:
+  enable: true # 如果你想用Valine评论系统，请设置enable为true
+  appId:  # 必填
+  appKey:  # 必填
+  guest_info: nick,mail #valine comment header info
+  placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
+  avatar: mp # gravatar style https://valine.js.org/avatar
+  pageSize: 10 # comment list page size
+  verify: false # valine verify code (true/false)
+  notify: false # valine mail notify (true/false)
+  lang: zh-cn
+```


-### 自定样式

-打开 `themes/material-x/source/less/_defines.less` 这个文件，修改下面这些内容为你需要的即可：
+### 页脚

 ```yaml
-// 主题色
-@primary-color: @xiaowenwen-green;
-// 强调色
-@accent-color: @material-orange;
-// ...
+# 主题配置
+materialx:
+  # 页脚
+  footer_social:
+  - slug: envelope
+    url: mailto:me@xaoxuu.com
+  - slug: github
+    url: https://github.com/xaoxuu
+  - slug: instagram
+    url:
+  - slug: google-plus
+    url:
+  - slug: twitter
+    url:
+  - slug: music
+    url:
 ```



-## 文章配置项
+
+
+## 单篇文章的配置

 某一篇文章不想开启评论

@ -191,6 +284,18 @@ recommended_posts: false



+## 主题色和其他样式
+
+打开 `themes/material-x/source/less/_defines.less` 这个文件，修改下面这些内容为你需要的即可：
+
+```yaml
+// 主题色
+@primary-color: @xiaowenwen-green;
+// 强调色
+@accent-color: @material-orange;
+// ...
+```
+


 其他的暂时不想写了，自己摸索吧~
--- a/_config.yml
+++ b/_config.yml
@ -1,55 +1,66 @@
 # 导航栏
+materialx:
+  # 导航栏
+  nav_menu:
+    - name: 主页
+      slug: about
+      fa:   home
+      url: /
+    - name: 项目
+      slug: projects
+      fa:   cube
+      url: https://xaoxuu.com/proj
+    - name: 博客
+      slug: home
+      fa:   rss
+      url: /
+    - name: 归档
+      slug: archives
+      fa:   archive
+      url: /archives
+  # 右边的小窗口
+  widgets:
+    - avatar # 显示个人头像，如果注释掉这一行就不显示
+    - categories # 显示分类
+    - tagcloud # 显示tags
+    - contacts # 显示自己的联系信息
+    - music # 显示自己的网易云歌单
+    - links # 显示友链
+  # 网易云音乐歌单id
+  widgets_musicid:
+  # 侧边栏的友链
+  widgets_links:
+  - name: xaoxuu
+    url: https://xaoxuu.com
+  # 右边的联系信息小窗口
+  widgets_contacts:
+  - name: GitHub
+    desc: xaoxuu
+    url: https://github.com/xaoxuu
+  - name: 10086
+    desc: 测试打电话
+    url: tel:10086
+  # 页脚
+  footer_social:
+  - slug: envelope
+    url: mailto:me@xaoxuu.com
+  - slug: github
+    url: https://github.com/xaoxuu
+  - slug: instagram
+    url:
+  - slug: google-plus
+    url:
+  - slug: twitter
+    url:
+  - slug: music
+    url:

-menu:
- name: 主页
-  slug: about
-  fa:   home
-  url: https://xaoxuu.com
- name: 项目
-  slug: projects
-  fa:   cube
-  url: https://xaoxuu.com/proj
- name: 博客
-  slug: home
-  fa:   rss
-  url: /
- name: 归档
-  slug: archives
-  fa:   archive
-  url: /archives

-# 右边的小窗口
-widgets:
-  - avatar # 显示个人头像，如果注释掉这一行就不显示
-  - categories # 显示分类
-  - tagcloud # 显示tags
-  - contacts # 显示自己的联系信息
-  - music # 显示自己的网易云歌单
-  - links # 显示友链


-# 页面底部的社交信息
-social:
- slug: envelope
-  url: mailto:me@xaoxuu.com
- slug: github
-  url: https://github.com/xaoxuu
- slug: instagram
-  url: https://www.instagram.com/xaoxuu
- slug: google-plus
-  url:
- slug: twitter
-  url: https://twitter.com/xaoxuu
- slug: music
-  url: https://music.163.com/#/user/home?id=63035382
-
-
-# 推荐文章 npm install hexo-recommended-posts --save
-recommended_posts:
-  enabled: true

 # Search
-search:
+nav_search:
  enable: true
  service: hexo
  # google
@ -66,8 +77,6 @@ search:
  # baidu
  baidu_api_id:

-
-
 # Less
 less:
  compress: true
--- a/layout/_partial/archive.ejs
+++ b/layout/_partial/archive.ejs
@ -13,9 +13,16 @@
 <% } %>

 <section class="post-list">
+    <% if(!config.materialx){ %>
+        <div class='post-wrapper'>
+            <article class="post revealno-title">
+                <iframe frameborder="no" width=100% height=600 src="https://xaoxuu.com/docs/material-x/#/?id=主题配置"></iframe>
+            </article>
+        </div>
+    <% } %>
    <% page.posts.each(function(post){ %>
        <div class='post-wrapper'>
-        <%- partial('post', {post: post}) %>
+    <%- partial('post', {post: post}) %>
        </div>
    <% }) %>
 </section>
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@ -61,11 +61,11 @@
 <br>

 <!-- 显示推荐文章和评论 -->
-<% if (post && ((theme.recommended_posts.enabled && post.recommended_posts != false) || post.comments )) { %>
+<% if (post && ((config.recommended_posts.autoDisplay == false && post.recommended_posts != false) || post.comments )) { %>
    <article class="post white-box article-type-<%= post.layout %>>">
        <section class="article typo">

-            <% if (post && theme.recommended_posts.enabled && post.recommended_posts != false) { %>
+            <% if (post && config.recommended_posts.autoDisplay == false && post.recommended_posts != false) { %>
                <%- partial('post/recommended_posts', {page: post, site: site}) %>
            <% } %>

--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@ -1,20 +1,16 @@
 <footer id="footer" class="clearfix">
-
    <div class="social-wrapper">
-        <% if (theme.social) { %>
-            <% theme.social.forEach(function(value, key) {
-                if (value.url && value.slug) { %>
-                    <a href="<%= value.url %>" class="social <%= value.slug %>"
-                        target="_blank" rel="external">
-                    <i class="fa fa-<%= value.slug %>"></i>
-                </a>
-            <% } }); %>
-        <% } %>
+      <% (config.materialx && config.materialx.footer_social && (config.materialx.footer_social||[]) || (theme.materialx.footer_social||[])).forEach(function(value){ %>
+        <% if (value.url && value.slug) { %>
+            <a href="<%= value.url %>" class="social <%= value.slug %>"
+                target="_blank" rel="external">
+            <i class="fa fa-<%= value.slug %>"></i>
+            </a>
+        <%}%>
+      <%})%>
    </div>
    <br>
-
    <div>博客内容遵循 <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" class="licenses">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></div>
-
    <div>本站使用 <a href="https://github.com/xaoxuu/hexo-theme-material-x" target="_blank" class="codename">Material-X</a> 作为主题，
 		总访问量为 <span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span> 次。
    </div>
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@ -5,20 +5,22 @@
 				<!-- <i class="fa fa-home"></i> -->
 				<%- config.title %>
 			</a>
-			<div class='menu'>
-				<ul class='h-list'>
-					<% (theme.menu||[]).forEach(function(value){ %>
-						<li>
-							<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'>
-								<i class="fa fa-<%=value.fa%>"></i>
-								<%=value.name%>
-							</a>
-						</li>
-					<%})%>
-				</ul>
-				<div class='underline'></div>
-			</div>
-			<% if (theme.search.enable === true) { %>
+
+				<div class='menu'>
+					<ul class='h-list'>
+						<% (config.materialx && config.materialx.nav_menu && (config.materialx.nav_menu||[]) || (theme.materialx.nav_menu||[])).forEach(function(value){ %>
+							<li>
+								<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'>
+									<i class="fa fa-<%=value.fa%>"></i>
+									<%=value.name%>
+								</a>
+							</li>
+						<%})%>
+					</ul>
+					<div class='underline'></div>
+				</div>
+
+			<% if (theme.nav_search.enable === true) { %>
 				<div class="m_search">
 					<form name="searchform" class="form u-search-form">
 						<input type="text" class="input u-search-input" placeholder="Search" />
@ -27,7 +29,7 @@
 				</div>
 			<% } %>
 			<ul class='switcher h-list'>
-				<% if (theme.search.enable === true) { %>
+				<% if (theme.nav_search.enable === true) { %>
 					<li class='s-search'><a href='javascript:void(0)'><i class="fa fa-search flat-box"></i></span></a></li>
 				<% } %>
 				<li class='s-menu'><a href='javascript:void(0)'><i class="fa fa-navicon flat-box"></i></a></li>
@ -47,14 +49,14 @@
 		</div>
 	</div>
 </header>
-<aside class="menu-phone">
-	<nav>
-		<% (theme.menu||[]).forEach(function(value, key) {
-					if (value.url && value.slug && value.name) { %>
-			<a href="<%= url_for(value.url) %>" class="nav-<%= value.slug %> nav">
-				<i class="fa fa-<%=value.fa%>"></i>
-				<%= value.name %>
-			</a>
-		<% } }); %>
-	</nav>
-</aside>
+	<aside class="menu-phone">
+		<nav>
+			<% (config.materialx && config.materialx.nav_menu && (config.materialx.nav_menu||[]) || (theme.materialx.nav_menu||[])).forEach(function(value, key) {
+						if (value.url && value.slug && value.name) { %>
+				<a href="<%= url_for(value.url) %>" class="nav-<%= value.slug %> nav">
+					<i class="fa fa-<%=value.fa%>"></i>
+					<%= value.name %>
+				</a>
+			<% } }); %>
+		</nav>
+	</aside>
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@ -8,16 +8,16 @@
 <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
 <%- js('js/jquery.fitvids.js') %>
 <script>
-var GOOGLE_CUSTOM_SEARCH_API_KEY = "<%- theme.search.google_api_key %>";
-var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "<%- theme.search.google_engine_id %>";
-var ALGOLIA_API_KEY = "<%- theme.search.algolia_api_key %>";
-var ALGOLIA_APP_ID = "<%- theme.search.algolia_app_id %>";
-var ALGOLIA_INDEX_NAME = "<%- theme.search.algolia_index_name %>";
-var AZURE_SERVICE_NAME = "<%- theme.search.azure_service_name %>";
-var AZURE_INDEX_NAME = "<%- theme.search.azure_index_name %>";
-var AZURE_QUERY_KEY = "<%- theme.search.azure_query_key %>";
-var BAIDU_API_ID = "<%- theme.search.baidu_api_id %>";
-var SEARCH_SERVICE = "<%- theme.search.service %>";
+var GOOGLE_CUSTOM_SEARCH_API_KEY = "<%- theme.nav_search.google_api_key %>";
+var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "<%- theme.nav_search.google_engine_id %>";
+var ALGOLIA_API_KEY = "<%- theme.nav_search.algolia_api_key %>";
+var ALGOLIA_APP_ID = "<%- theme.nav_search.algolia_app_id %>";
+var ALGOLIA_INDEX_NAME = "<%- theme.nav_search.algolia_index_name %>";
+var AZURE_SERVICE_NAME = "<%- theme.nav_search.azure_service_name %>";
+var AZURE_INDEX_NAME = "<%- theme.nav_search.azure_index_name %>";
+var AZURE_QUERY_KEY = "<%- theme.nav_search.azure_query_key %>";
+var BAIDU_API_ID = "<%- theme.nav_search.baidu_api_id %>";
+var SEARCH_SERVICE = "<%- theme.nav_search.service %>";
 var ROOT = "<%- config.root %>"||"/";
 if(!ROOT.endsWith('/'))ROOT += '/';
 </script>
--- a/layout/_partial/side.ejs
+++ b/layout/_partial/side.ejs
@ -1,3 +1,3 @@
-<% (theme.widgets||[]).forEach(function(name){ %>
+<% (config.materialx && config.materialx.widgets && (config.materialx.widgets||[]) || (theme.materialx.widgets||[])).forEach(function(name){ %>
  <%- partial('../_widget/'+name) %>
-<% }) %>
+<% }) %>
--- a/layout/_widget/categories.ejs
+++ b/layout/_widget/categories.ejs
@ -4,7 +4,7 @@
    <% if (site.categories.length){ %>
    <ul class="entry">
    <% site.categories.sort('name').each(function(item){ %>
-        <li><a class="flat-box" href="<%= url_for(item.path) %>"><div class='name'><%= item.name %></div><div class='badget'><%= item.posts.length %></div></a></li>
+        <li><a class="flat-box" href="<%= url_for(item.path) %>"><div class='name'><%= item.name %></div><div class='badge'><%= item.posts.length %></div></a></li>
    <% }); %>
    </ul>
    <% } %>
--- a/layout/_widget/contacts.ejs
+++ b/layout/_widget/contacts.ejs
@ -1,13 +1,13 @@
 <section class='m_widget contacts'>
-<div class='header'><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;&nbsp;联系</div>
-<div class='content'>
-    <ul class="entry">
-      <% (config.contacts||[]).forEach(function(item){ %>
-        <li><a class="flat-box" target="_blank" rel="external nofollow noopener noreferrer" href="<%= url_for(item.url) %>">
-          <div class='name'><%= item.name %></div>
-          <div class='badget'><%= item.badget %></div>
-        </a></li>
-      <% }); %>
-    </ul>
-</div>
+    <div class='header'><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;&nbsp;联系</div>
+    <div class='content'>
+        <ul class="entry">
+          <% ((config.materialx && (config.materialx.widgets_contacts||[])) || (theme.materialx.widgets_contacts||[])).forEach(function(item){ %>
+            <li><a class="flat-box" target="_blank" rel="external nofollow noopener noreferrer" href="<%= url_for(item.url) %>">
+              <div class='name'><%= item.name %></div>
+              <div class='badge'><%= item.desc %></div>
+            </a></li>
+          <% }) %>
+        </ul>
+    </div>
 </section>
--- a/layout/_widget/links.ejs
+++ b/layout/_widget/links.ejs
@ -1,17 +1,15 @@
-<% if (config.materialx.links){ %>
-    <section class='m_widget links'>
-        <div class='header'><i class="fa fa-link" aria-hidden="true"></i>&nbsp;&nbsp;友链</div>
-        <div class='content'>
-            <ul class="entry" id="links">
-                <% (config.materialx.links||[]).forEach(function(item){ %>
-                    <li><a class="flat-box" target="_blank" rel="external nofollow noopener noreferrer" href="<%= url_for(item.url) %>">
-                        <div class='name'>
-                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
-                            &nbsp;&nbsp;<%= item.name %>
-                        </div>
-                    </a></li>
-                <% }); %>
-            </ul>
-        </div>
-    </section>
-<% } %>
+<section class='m_widget links'>
+    <div class='header'><i class="fa fa-link" aria-hidden="true"></i>&nbsp;&nbsp;友链</div>
+    <div class='content'>
+        <ul class="entry" id="links">
+            <% ((config.materialx && (config.materialx.widgets_links||[])) || (theme.materialx.widgets_links||[])).forEach(function(item){ %>
+                <li><a class="flat-box" target="_blank" rel="external nofollow noopener noreferrer" href="<%= url_for(item.url) %>">
+                    <div class='name'>
+                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
+                        &nbsp;&nbsp;<%= item.name %>
+                    </div>
+                </a></li>
+            <% }) %>
+        </ul>
+    </div>
+</section>
--- a/layout/_widget/music.ejs
+++ b/layout/_widget/music.ejs
@ -1,8 +1,8 @@
-<% if (config.materialx.musicid){ %>
+<% if (config.materialx && config.materialx.widgets_musicid){ %>
    <section class='m_widget music'>
    <div class='header'><i class="fa fa-music" aria-hidden="true"></i>&nbsp;&nbsp;音乐</div>
    <div class='content'>
-        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=450 src="//music.163.com/outchain/player?type=0&id=<%= config.materialx.musicid %>&auto=0&height=450"></iframe>
+        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=450 src="//music.163.com/outchain/player?type=0&id=<%= config.materialx.widgets_musicid %>&auto=0&height=450"></iframe>
    </div>
    </section>
 <% } %>
--- a/source/less/_widget.less
+++ b/source/less/_widget.less
@ -45,7 +45,7 @@
            &:extend(.txt-ellipsis);
            color: fade(@text-color,70%);
        }
-        .badget{
+        .badge{
            flex:none;
            font-size: @small-font-size;
            color: fade(@text-color, 50%);