update theme config

6 years ago · cdd834d513
parent 34e0db3d75
commit cdd834d513
14 changed files with 124 additions and 106 deletions
--- a/_config.yml
+++ b/_config.yml
@ -1,6 +1,41 @@
+#####################################
+##      Material X                 ##
+##      version: 1.0 beta1         ##
+##      updated: 2018-11-16        ##
+#####################################
+
+# >> 主题配置写法示例 ---------------------------------------------------------------------
+# ⚠️ 注意：这里的内容需要复制到主目录到config中才有效，写在这里是为了提供参考
+
+# 友链的写法示例
+links:
+- name: xaoxuu's blog
+  avatar: https://xaoxuu.com/assets/img/avatar.jpg
+  url: https://blog.xaoxuu.com
+
+# 页脚社交信息的写法示例
+social:
+  - icon: fas fa-envelope
+    url: mailto:me@xaoxuu.com
+  - icon: fab fa-github
+    url: https://github.com/xaoxuu
+  - icon: fas fa-music
+    url: https://music.163.com/#/user/home?id=63035382
+
+# 博主信息的写法示例
+avatar: https://xaoxuu.com/assets/img/avatar.jpg
+title: 博客名称
+motto: 这是我的座右铭
+
+
 # >> 主题配置 ---------------------------------------------------------------------
+# ✅ 这里的内容直接在下面进行修改
+
 # 字体 在这里选好你需要的字体：https://fonts.google.com，然后在_defines.less中修改font_family。
-google_fonts: 'Ubuntu|Ubuntu+Mono'
+google_fonts: 'Ubuntu|Ubuntu+Mono' # 多个字体中间用英文竖线隔开
+
+# style: material    # 导航栏和标题栏背景是主题色
+style: pure        # 导航栏和标题栏背景是白色

 # 导航栏
 nav_menu:
@ -23,39 +58,40 @@ nav_menu:

 # 右边的小窗口，不想显示哪一项的注释掉对应的即可
 widgets:
-  # 博主信息，显示个人头像、格言、社交信息等
+  # 博主信息区，是否显示个人头像、格言、社交信息等
  author:
    enable: true
-    avatar: https://xaoxuu.com/assets/img/avatar.jpg # 头像，如果config中已经设置avatar了，这里可以不用写
-    title: # 博客名、头衔等等，居中显示
-    motto: # 格言座右铭等等
-    social: true # 是否显示社交信息（内容同页脚的社交信息）
+    avatar: true # 是否显示头像，如果是，需要在主目录的config中写avatar的URL
+    title: false # 是否显示博客名、头衔等等。如果是，需要在主目录的config中写title
+    motto: false # 是否显示格言座右铭等等。如果是，需要在主目录的config中写motto
+    social: true # 是否显示社交信息（内容同页脚的社交信息）如果是，需要在主目录的config中写social，支持icon和URL
  # 显示文章分类
-  categories: true
+  categories:
+    enable: true
+    icon: fas fa-folder-open
+    title: "分类"
  # 显示文章标签
-  tagcloud: true
+  tagcloud:
+    enable: true
+    icon: fas fa-tags
+    title: "标签"
  # 显示网易云歌单
-  musicid: 746319661 # 歌单id
-  # 显示友链
+  music:
+    enable: true
+    icon: fas fa-headphones-alt
+    title: "音乐"
+    playlist_id: 746319661 # 歌单id
+  # 显示友链，友链的内容写在主目录的config中
  links:
-  - name: xaoxuu's blog
-    avatar: https://xaoxuu.com/assets/img/avatar.jpg
-    url: https://blog.xaoxuu.com
+    enable: true
+    icon: fas fa-handshake
+    title: "友链"
+    mailto: "me@xaoxuu.com" # 右边显示➕ ，点击给这个地址发送邮件添加友链
  # 显示目录（在文章中设置toc:false可以隐藏单篇文章的目录）
-  toc: true
-
-# 页脚社交信息
-social:
-  - icon: fas fa-envelope
-    url: mailto:me@xaoxuu.com
-  - icon: fab fa-github
-    url: https://github.com/xaoxuu
-  - icon: fab fa-instagram
-    url:
-  - icon: fab fa-twitter
-    url:
-  - icon: fas fa-music
-    url: https://music.163.com/#/user/home?id=63035382
+  toc:
+    enable: true
+    icon: fas fa-list
+    title: "目录"


 # 推荐文章
@ -70,7 +106,7 @@ recommended_posts:
  fixedNumber: false


-# Search 确保_config中只有一个search，否则会冲突。
+# Search
 search:
  enable: true
  service: hexo
@ -91,4 +127,3 @@ search:
 # Less
 less:
  compress: true
-# >> 主题配置 ---------------------------------------------------------------------
--- a/layout/_partial/archive.ejs
+++ b/layout/_partial/archive.ejs
@ -13,22 +13,6 @@
 <% } %>

 <section class="post-list">
-    <% if(!config.nav_menu){ %>
-        <div class='post-wrapper'>
-            <article class="post revealno-title">
-                <section class="meta">
-                    <h2 class="title" style="color:#EF503A">
-                        <span class="fas fa-exclamation-triangle"></span>
-                        还剩最后一步就成功了
-                    </h2>
-                    <p>
-                        请按照下面的指示进行操作：
-                    </p>
-                </section>
-                <iframe frameborder="no" width=100% height=600 src="https://xaoxuu.com/wiki/material-x/#/?id=主题配置"></iframe>
-            </article>
-        </div>
-    <% } %>
    <% page.posts.each(function(post){ %>
        <div class='post-wrapper'>
            <%- partial('post', {post: post}) %>
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@ -108,11 +108,11 @@
 <br>

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

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

--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@ -26,8 +26,8 @@

  <link rel="shortcut icon" href="<%= config.shortcut_icon %>" />
  <link rel="icon" href="<%= config.favicon %>" />
-  <% if (config.google_fonts){ %>
-    <link href="https://fonts.googleapis.com/css?family=<%= config.google_fonts %>" rel="stylesheet">
+  <% if (theme.google_fonts){ %>
+    <link href="https://fonts.googleapis.com/css?family=<%= theme.google_fonts %>" rel="stylesheet">
  <% } else { %>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <% } %>
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@ -1,11 +1,11 @@
-<header class="l_header <%= config.style %>">
+<header class="l_header <%= theme.style %>">
 	<div class='wrapper'>
 		<div class="nav-main container container--flex">
 			<a class="logo flat-box" href='<%= url_for("/") %>' ><%- config.title %></a>
 				<div class='menu'>
 					<ul class='h-list'>
-            <% if (config.nav_menu) { %>
-    					<% (config.nav_menu || []).forEach(function(value){ %>
+            <% if (theme.nav_menu) { %>
+    					<% (theme.nav_menu || []).forEach(function(value){ %>
    						<li>
    							<a class='nav-<%=value.slug%> flat-box' href='<%=url_for(value.url)%>'>
    								<i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%>
@ -17,7 +17,7 @@
 					<div class='underline'></div>
 				</div>

-			<% if (config.search.enable === true) { %>
+			<% if (theme.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" />
@ -26,7 +26,7 @@
 				</div>
 			<% } %>
 			<ul class='switcher h-list'>
-				<% if (config.search.enable === true) { %>
+				<% if (theme.search.enable === true) { %>
 					<li class='s-search'><a class="fas fa-search fa-fw" href='javascript:void(0)'></span></a></li>
 				<% } %>
 				<li class='s-menu'><a class="fas fa-bars fa-fw" href='javascript:void(0)'></a></li>
@ -46,8 +46,8 @@
 	<aside class="menu-phone">
 		<nav>
      <ul>
-          <% if (config.nav_menu) { %>
-              <% (config.nav_menu || []).forEach(function(value){ %>
+          <% if (theme.nav_menu) { %>
+              <% (theme.nav_menu || []).forEach(function(value){ %>
                  <li>
                      <a class='nav-<%=value.slug%> flat-box nav flat-box' href='<%=url_for(value.url)%>'>
                      <i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%></a>
--- a/layout/_partial/loading.ejs
+++ b/layout/_partial/loading.ejs
@ -1,3 +1,3 @@
 <div id="loading-bar-wrapper">
-  <div id="loading-bar" class="<%= config.style %>"></div>
+  <div id="loading-bar" class="<%= theme.style %>"></div>
 </div>
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@ -6,18 +6,18 @@


 <%- js('js/jquery.fitvids.js') %>
-<% if (config.search && config.search.enable) { %>
+<% if (theme.search && theme.search.enable) { %>
    <script>
-        var GOOGLE_CUSTOM_SEARCH_API_KEY = "<%- config.search.google_api_key %>";
-        var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "<%- config.search.google_engine_id %>";
-        var ALGOLIA_API_KEY = "<%- config.search.algolia_api_key %>";
-        var ALGOLIA_APP_ID = "<%- config.search.algolia_app_id %>";
-        var ALGOLIA_INDEX_NAME = "<%- config.search.algolia_index_name %>";
-        var AZURE_SERVICE_NAME = "<%- config.search.azure_service_name %>";
-        var AZURE_INDEX_NAME = "<%- config.search.azure_index_name %>";
-        var AZURE_QUERY_KEY = "<%- config.search.azure_query_key %>";
-        var BAIDU_API_ID = "<%- config.search.baidu_api_id %>";
-        var SEARCH_SERVICE = "<%- config.search.service%>" || "hexo";
+        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%>" || "hexo";
        var ROOT = "<%- config.root %>"||"/";
        if(!ROOT.endsWith('/'))ROOT += '/';
    </script>
--- a/layout/_partial/side.ejs
+++ b/layout/_partial/side.ejs
@ -1,20 +1,20 @@
-<% if (config.widgets){ %>
-    <% if (config.widgets.author){ %>
+<% if (theme.widgets){ %>
+    <% if (theme.widgets.author.enable){ %>
        <%- partial('../_widget/author') %>
    <% } %>
-    <% if (config.widgets.categories){ %>
+    <% if (theme.widgets.categories.enable){ %>
        <%- partial('../_widget/categories') %>
    <% } %>
-    <% if (config.widgets.tagcloud){ %>
+    <% if (theme.widgets.tagcloud.enable){ %>
        <%- partial('../_widget/tagcloud') %>
    <% } %>
-    <% if (config.widgets.toc){ %>
+    <% if (theme.widgets.toc.enable){ %>
        <%- partial('../_widget/toc') %>
    <% } %>
-    <% if (config.widgets.musicid){ %>
+    <% if (theme.widgets.music.enable){ %>
        <%- partial('../_widget/music') %>
    <% } %>
-    <% if (config.widgets.links){ %>
+    <% if (theme.widgets.links.enable){ %>
        <%- partial('../_widget/links') %>
    <% } %>
 <% } %>
--- a/layout/_widget/author.ejs
+++ b/layout/_widget/author.ejs
@ -1,21 +1,21 @@
-<% if(config.widgets.author.enable != false) { %>
+<% if(theme.widgets.author.enable != false) { %>
    <section class='m_widget author'>
-        <% if(config.widgets.author.avatar || config.avatar) { %>
+        <% if(theme.widgets.author.avatar == true && config.avatar.length) { %>
            <div class='header'>
-                <img class='avatar' src='<%= url_for(config.widgets.author.avatar || config.avatar) %>'/>
+                <img class='avatar' src='<%= url_for(config.avatar) %>'/>
            </div>
        <%} %>
-        <% if (config.widgets.author.title || config.widgets.author.motto){ %>
+        <% if (theme.widgets.author.title == true || theme.widgets.author.motto == true){ %>
            <div class='content'>
-                <% if (config.widgets.author.title){ %>
-                    <h2><%= config.widgets.author.title %></h2>
+                <% if (theme.widgets.author.title == true){ %>
+                    <h2><%= config.title %></h2>
                <% } %>
-                <% if (config.widgets.author.motto){ %>
-                    <p><%= config.widgets.author.motto %></p>
+                <% if (theme.widgets.author.motto){ %>
+                    <p><%= config.motto %></p>
                <% } %>
            </div>
        <% } %>
-        <% if (config.widgets.author.social){ %>
+        <% if (theme.widgets.author.social == true && config.social.length){ %>
            <div class="social-wrapper">
              <% (config.social||[]).forEach(function(value){ %>
                <% if (value.url && value.icon) { %>
--- a/layout/_widget/categories.ejs
+++ b/layout/_widget/categories.ejs
@ -1,8 +1,8 @@
 <section class='m_widget categories'>
-    <header class='header <%= config.style %>'>
-        <div><i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;分类</div>
+    <header class='header <%= theme.style %>'>
+        <div><i class="<%= theme.widgets.categories.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.categories.title %></div>
    </header>
-    <div class='content <%= config.style %>'>
+    <div class='content <%= theme.style %>'>
        <% if (site.categories.length){ %>
            <ul class="entry">
                <% site.categories.sort('name').each(function(item){ %>
--- a/layout/_widget/links.ejs
+++ b/layout/_widget/links.ejs
@ -1,14 +1,14 @@
 <section class='m_widget links'>
-    <header class='header <%= config.style %>'>
-        <div><i class="fas fa-handshake fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;友链</div>
-        <% if(config.email) { %>
-            <a class="rightBtn" title="联系博主添加友链" target="_blank" rel="external nofollow noopener noreferrer" href="mailto:<%= config.email %>?subject=交换友链&body=你好，我想和你交换友链，我已经将【<%= config.title %>】添加到我的博客的友链中。我的博客链接是："><i class="fas fa-plus fa-fw"></i></a>
+    <header class='header <%= theme.style %>'>
+        <div><i class="<%= theme.widgets.links.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.links.title %></div>
+        <% if(config.title && theme.widgets.links.mailto) { %>
+            <a class="rightBtn" title="联系博主添加友链" target="_blank" rel="external nofollow noopener noreferrer" href="mailto:<%= theme.widgets.links.mailto %>?subject=交换友链&body=你好，我想和你交换友链，我已经将【<%= config.title %>】添加到我的博客的友链中。我的博客链接是："><i class="fas fa-plus fa-fw"></i></a>
        <%} %>
    </header>
-    <div class='content <%= config.style %>'>
+    <div class='content <%= theme.style %>'>
        <ul class="entry" id="links">
-            <% (config.widgets.links||[]).forEach(function(item){ %>
-                <li><a class="flat-box" target="_blank" rel="external nofollow noopener noreferrer" href="<%= url_for(item.url) %>">
+            <% (config.links||[]).forEach(function(item){ %>
+                <li><a class="flat-box" title="<%= url_for(item.url) %>" target="_blank" rel="external nofollow noopener noreferrer" href="<%= url_for(item.url) %>">
                    <div class='name'>
                        <% if(item.avatar) { %>
                            <img src="<%= item.avatar %>">
@ -20,6 +20,5 @@
                </a></li>
            <% }) %>
        </ul>
-
    </div>
 </section>
--- a/layout/_widget/music.ejs
+++ b/layout/_widget/music.ejs
@ -1,9 +1,9 @@
 <section class='m_widget music'>
-    <header class='header <%= config.style %>'>
-        <div><i class="fas fa-headphones-alt fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;音乐</div>
-        <a class="rightBtn" title="打开博主的网易云音乐主页" target="_blank" rel="external nofollow noopener noreferrer" href="https://music.163.com/#/playlist?id=<%= config.widgets.musicid %>"><i class="fas fa-external-link-square-alt fa-fw"></i></a>
+    <header class='header <%= theme.style %>'>
+        <div><i class="<%= theme.widgets.music.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.music.title %></div>
+        <a class="rightBtn" title="打开博主的网易云音乐主页" target="_blank" rel="external nofollow noopener noreferrer" href="https://music.163.com/#/playlist?id=<%= theme.widgets.music.playlist_id %>"><i class="fas fa-external-link-square-alt fa-fw"></i></a>
    </header>
-    <div class='content <%= config.style %>'>
-        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=450 src="//music.163.com/outchain/player?type=0&id=<%= config.widgets.musicid %>&auto=0&height=450"></iframe>
+    <div class='content <%= theme.style %>'>
+        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=450 src="//music.163.com/outchain/player?type=0&id=<%= theme.widgets.music.playlist_id %>&auto=0&height=450"></iframe>
    </div>
 </section>
--- a/layout/_widget/tagcloud.ejs
+++ b/layout/_widget/tagcloud.ejs
@ -1,9 +1,9 @@
 <% if (site.tags.length){ %>
    <section class='m_widget tagcloud'>
-        <header class="header <%= config.style %>">
-            <div><i class="fas fa-tags fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;标签</div>
+        <header class="header <%= theme.style %>">
+            <div><i class="<%= theme.widgets.tagcloud.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.tagcloud.title %></div>
        </header>
-        <div class='content <%= config.style %>'>
+        <div class='content <%= theme.style %>'>
            <%- tagcloud(site.tags, {
                min_font: 14,
                max_font: 24,
--- a/layout/_widget/toc.ejs
+++ b/layout/_widget/toc.ejs
@ -1,10 +1,10 @@
 <% if(page.content && page.toc!==false && toc(page.content).length > 0){ %>
    <section class='m_widget toc-wrapper'>
-        <header class="header <%= config.style %>">
-            <div><i class="fas fa-list fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;目录</div>
+        <header class="header <%= theme.style %>">
+            <div><i class="<%= theme.widgets.toc.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.toc.title %></div>
            <div class='wrapper'><a class="s-toc rightBtn" title="固定到顶部" target="_blank" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div>
        </header>
-        <div class='content <%= config.style %>'>
+        <div class='content <%= theme.style %>'>
            <%- toc(page.content, {list_number: false}) %>
        </div>
    </section>