可选阴影和毛玻璃

_config.yml

@@ -14,7 +14,17 @@ info:
       commentTyping: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@20.2/js/commentTyping.js
 
 
+############################### 服务开关 ###############################
+scrollreveal: true  # 页面滚动显示动画
+nodewaves: true     # 按钮点击效果
+busuanzi: true      # 访问量统计
+# fastclick: true
+commentTyping: true # 文本框打字机特效
+# wordcount: true   # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
+
+
 ############################### 主题样式 ###############################
+# 样式
 style:
   # 卡片阴影效果
   shadow:
@@ -24,25 +34,13 @@ style:
     # card: true
   # 毛玻璃效果 具体效果调整在： source/less/_color.less
   blur:
-    nav: true
+    navbar: true
     widget: true
     body: true
 # 建议：
 #   有背景图：开启毛玻璃，关闭卡片阴影
 #   无背景图：关闭毛玻璃，开启卡片阴影
 
-
-############################### 服务开关 ###############################
-scrollreveal: true  # 页面滚动显示动画
-nodewaves: true     # 按钮点击效果
-busuanzi: true      # 访问量统计
-# fastclick: true
-commentTyping: true # 文本框打字机特效
-# wordcount: true   # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
-
-
-
-############################### 自定义 ###############################
 # 幻灯片背景
 backstretch:
   position: background  # cover: 封面背景   background: 整个网页背景
@@ -55,13 +53,15 @@ backstretch:
     - https://i.loli.net/2020/02/08/RP7JpGvWaCYfuB6.jpg
 
 
+############################### 自定义 ###############################
 # page的封面
 cover:
   scheme: search    # 后期将会提供多种封面布局方案
   height: half      # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
   title: Live Demo
   # logo: assets/logo.png    # logo和title只显示一个，若同时设置，则只显示logo
-  # search_placeholder: '搜索'
+  search: 'for Hexo 4.2+'
+  # color: '#FFF' # 菜单文字颜色
   # 主页封面菜单
   features:
     - name: 博文
@@ -137,6 +137,7 @@ navbar:
         icon: fas fa-info-circle
         url: about/
         rel: nofollow
+  # search: 搜索一下   # 搜索框文字
 
 
 

layout/_cover/search.ejs

@@ -6,8 +6,8 @@
 <% 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="<%- theme.cover.search_placeholder %>" />
       <i class="icon fas fa-search fa-fw"></i>
+      <input type="text" class="input u-search-input" placeholder="<%- theme.cover && theme.cover.search %>" />
     </form>
   </div>
 <% } %>
@@ -16,7 +16,8 @@
     <% if (theme.cover.features) { %>
       <% (theme.cover.features || []).forEach(function(value){ %>
         <li>
-          <a class="nav home" href="<%= url_for(value.url) %>"
+          <a class="nav home" style="color: <%- theme.cover && theme.cover.color %>"
+            href="<%= url_for(value.url) %>"
             <% if (value.rel) { %>
               rel="<%- value.rel %>"
             <% } %>

layout/_partial/article.ejs

@@ -1,7 +1,7 @@
 <% var sections = page.body ? page.body : theme.layout.on_page.body; %>
 <% sections.forEach(function(widget_id){ %>
   <% if (widget_id == 'article') { %>
-    <article id="<%= post.layout %>" class="post white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.body ? 'body-blur' : '' %> article-type-<%= post.layout %>" itemscope itemprop="blogPost">
+    <article id="<%= post.layout %>" class="post white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.body ? 'body-blur' : '' %> article-type-<%= post.layout %>" itemscope itemprop="blogPost">
       <%- partial('meta', {post: post, position: 'header'}) %>
       <section class="article typo">
         <div class="article-entry" itemprop="articleBody">

layout/_partial/header.ejs

@@ -1,4 +1,4 @@
-<header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%- theme.style.blur.nav ? 'nav-blur' : '' %>">
+<header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%- theme.style.blur && theme.style.blur.navbar ? 'nav-blur' : '' %>">
   <div id="loading-bar-wrapper">
     <div id="loading-bar"></div>
   </div>
@@ -41,7 +41,7 @@
       <div class="m_search">
         <form name="searchform" class="form u-search-form">
           <i class="icon fas fa-search fa-fw"></i>
-          <input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" />
+          <input type="text" class="input u-search-input" placeholder="<%- theme.navbar && theme.navbar.search %>" />
         </form>
       </div>
 
@@ -64,7 +64,7 @@
 		</div>
 	</div>
 </header>
-	<aside class="menu-phone">
+	<aside class="menu-phone white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %>">
     <header>
 		<nav class="menu navgation">
       <ul>

layout/_partial/post.ejs

@@ -1,4 +1,4 @@
-<article class="post <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.body ? 'body-blur' : '' %> reveal <%= (post.title) ? "" : "no-title" %>">
+<article class="post white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.body ? 'body-blur' : '' %> reveal <%= (post.title) ? "" : "no-title" %>">
   <%- partial('meta',{post:post, position:'header'}) %>
   <section class="article typo">
     <div class="article-entry" itemprop="articleBody">

layout/_third-party/comments.ejs

@@ -21,7 +21,7 @@
 %>
 
 <% if (enableDisqus || enableLivere || enableGitalk || enableValine) { %>
-  <article class="post white-box comments <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.body ? 'body-blur' : '' %>">
+  <article class="post white-box comments <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.body ? 'body-blur' : '' %>">
     <section class="article typo">
       <h4><i class="fas fa-comments fa-fw" aria-hidden="true"></i>&nbsp;<%- __('post.comments') %></h4>
       <% if (enableDisqus) { %>

layout/_widget/blogger.ejs

@@ -1,4 +1,4 @@
-<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <div class='content'>
     <% if(item.avatar) { %>
       <div class='avatar'>

layout/_widget/category.ejs

@@ -1,5 +1,5 @@
 <% if (site.categories.length){ %>
-  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <ul class="entry">

layout/_widget/copyright.ejs

@@ -1,4 +1,4 @@
-<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <div class='content'>
     <% if (item.blockquote == true) { %>
       <blockquote>

layout/_widget/donate.ejs

@@ -1,4 +1,4 @@
-<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <% if (item.fancybox == true) { %>

layout/_widget/grid.ejs

@@ -1,4 +1,4 @@
-<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <ul class="grid navgation">

layout/_widget/list.ejs

@@ -1,4 +1,4 @@
-<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <ul class="entry">

layout/_widget/music.ejs

@@ -1,5 +1,5 @@
 <% if (theme.aplayer.enable == true) { %>
-  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <%- partial('../_third-party/aplayer', {post: null, where: 'widget'}) %>

layout/_widget/related_posts.ejs

@@ -1,5 +1,5 @@
 <% if(page.layout == 'post' && page.content && page.path != undefined){ %>
-  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
     <div class="content">
       <%- popular_posts( { maxCount: 10 , ulClass: 'popular-posts' , PPMixingRate: 0.2 } , page ) %>

layout/_widget/tagcloud.ejs

@@ -1,5 +1,5 @@
 <% if (site.tags.length){ %>
-  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
+  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <%- tagcloud(site.tags, {

layout/_widget/text.ejs

@@ -1,4 +1,4 @@
-<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class?item.class:'text' %>'>
+<section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class?item.class:'text' %>'>
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <% (item.content||[]).forEach(function(row){ %>

layout/_widget/toc.ejs

@@ -1,5 +1,5 @@
 <% if(page.content && page.toc != false && toc(page.content).length > 0){ %>
-  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.widget ? 'widget-blur' : '' %> toc-wrapper'>
+  <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> toc-wrapper'>
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <%- toc(page.content, {list_number: item.list_number, min_depth: item.min_depth, max_depth: item.max_depth}) %>

layout/links.ejs

@@ -1,5 +1,5 @@
 <div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
-  <article id="<%= page.layout %>" class="post white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur.body ? 'body-blur' : '' %> article-type-<%= page.layout %>" itemscope itemprop="blogPost">
+  <article id="<%= page.layout %>" class="post white-box <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.body ? 'body-blur' : '' %> article-type-<%= page.layout %>" itemscope itemprop="blogPost">
     <%- partial('_partial/meta',{post:page, position:'header'}) %>
       <section class="article typo l_friends">
         <% if (page.links){ %>

source/less/_base.less

@@ -152,7 +152,7 @@ fancybox{
       height: ~"calc(60vh - @{gap} - @{height_navbar} + 6*@{gap})";
       margin-bottom: ~"calc(-6*@{gap})";
       .title, .logo{
-        margin-top: ~"calc(22vh - 4*@{gap})";
+        margin-top: ~"calc(24vh - 4*@{gap})";
       }
       @media(max-width: @on_phone){
         height: ~"calc(45vh - @{gap} - @{height_navbar} + 6*@{gap})";
@@ -499,7 +499,9 @@ ul.h-list {
     }
   }
 }
-
+.white-box{
+  background: @theme_cardbg;
+}
 .reveal {
   // visibility: hidden;
 }

source/less/_header.less

@@ -270,7 +270,6 @@
   right: 0;
   z-index:9999 + 1;
   line-height: 2 * @gap;
-  background: white;
   border-right: 0;
   box-shadow: @boxshadow_card_raised;
   border-radius: @border_radius;