🚀新增首页布局和文章目录

README-EN.md

@@ -75,7 +75,11 @@ prismjs:
   line_number: true
   tab_replace: ''
 ```
-
+#### 🏠 Homepage layout
+```
+# The default layout of the home page article is'card', and'block-card' can be selected
+home_layout: card
+```
 #### 🔧Tags page
 
 Go to the `source` folder in the root directory to create a `tags` folder and create a new `index.md` file 
@@ -173,6 +177,7 @@ tags:
   - you
   - use
 excerpt: A simple and generous flat theme for Hexo - Quiet 
+toc: false
 date: 2020-11-03 20:33:36
 cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
 ```
@@ -187,6 +192,8 @@ cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
 
 `excerpt`: A short description of the article
 
+`toc`：Whether to display the article directory (the default value is false)
+
 `date`：Creation date
 
 `cover`：Thumbnail (you can leave this empty to use a random default cover) 

README.md

@@ -75,6 +75,11 @@ prismjs:
   line_number: true
   tab_replace: ''
 ```
+#### 🏠首页布局
+```
+# 首页文章布局 默认 'card' 可选择 'block-card'
+home_layout: card
+```
 
 #### 🔧标签页
 
@@ -172,6 +177,7 @@ tags:
   - 主题
   - 静态主题
 excerpt: 采用简约大方的扁平化Hexo-Quiet主题
+toc: false
 date: 2020-11-03 20:33:36
 cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
 ```
@@ -186,6 +192,8 @@ cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
 
 `excerpt`：描述
 
+`toc`：是否显示文章目录（默认值false）
+
 `date`：创建日期
 
 `cover`：缩略图（你不填就用默认的了）

_config.yml

@@ -10,6 +10,8 @@ keyword: hexo主题,hexo扁平化主题,Quiet主题
 is_article_img: true  
 # 网站描述
 web_description: 描述
+# 首页文章布局 默认 'card' 可选择 'block-card'
+home_layout: card
 # 导航名称
 menus_title:
   home: HOME

layout/_partial/home.ejs

@@ -1,11 +1,41 @@
 <div class="home">
 	<%- partial('_widget/header_body',{message:theme.headers.home.message,icon:theme.headers.home.icon}) %>
 	<div class="main">
-		<div class="feed" id="content">
+		<% if(theme.home_layout === 'block-card'){ %>
+			<div class="post-block" id="content">
 				<% page.posts.each(function (post,i) { %>
-				<div class="feed-display">
+					<a href="<%- url_for(post.path) %>" class="post-block-content">
+						<% if(post.cover){ %>
+							<img src="<%= post.cover %>" alt="Quiet">
+						<% }else{ %>
+							<img src="<%- theme.default_cover %>" alt="Quiet">
+						<% } %>
+						<div class="post-block-content-info">
+							<h2><%= post.title %></h2>
+							<span class="post-block-content-info-excerpt">
+								<%= post.excerpt %>
+							</span>
+							<div class="post-block-content-info-exhibition">
+								<div class="post-block-content-info-exhibition-tags">
+									<span class="post-tag">
+										<%- post.categories.data[0] ? post.categories.data[0].name : theme.author ? theme.author : 'Quiet' %>
+									</span>
+									<span class="post-tag">
+										<%- date(post.date, "YYYY-MM-DD" ) %>
+									</span>
+								</div>
+								<div class="meat-type"></div>
+							</div>
+						</div>
+					</a>
+				<% }) %>
+			</div>
+		<% }else{ %>
+			<div class="post-card" id="content">
+				<% page.posts.each(function (post,i) { %>
+					<div class="post-card-display">
 						<a href="<%- url_for(post.path) %>">
-						<h2 class="feed-title">
+							<h2 class="post-card-title">
 								<%= post.title %>
 							</h2>
 							<% if(post.cover){ %>
@@ -14,7 +44,7 @@
 								<img src="<%- theme.default_cover %>" alt="Quiet">
 							<% } %>
 						</a>
-					<div class="feed-meat">
+						<div class="post-card-meat">
 							<div class="meat-info">
 								<div class="info-auth">
 										<a href="<%- post.categories.data[0] && post.categories.data[0].path %>">
@@ -30,6 +60,9 @@
 					</div>
 				<% }) %>
 			</div>
+		<% } %>
+		
+	
 	</div>
 	<div class="change-page">
 		<% if(page.prev !==0){ %>

layout/_partial/post_centent.ejs

@@ -1,5 +1,13 @@
 <div class="post-content" id="content">
+  
   <div id="article" class="post-content-info">
+    <% if( page.toc ){ %>
+      <div id="post-toc">
+        <span class="post-toc-title">文章目录</span>
+        <%- toc(page.content,{list_number:false}) %>
+      </div>
+    <% } %>
+
     <%- page.content %>
   </div>
   <div id="<%- page.comments ? 'gitalk-container' : ''%>"></div>

source/css/index.less

@@ -2,6 +2,7 @@
 @import "./public/header_background";
 @import "./public/content";
 @import "./public/article_cente";
+@import "./public/mixins";
 
 @import "./plugin/fancybox.css";
 @import "./plugin/gitalk.css";

source/css/pages/home.less

@@ -9,7 +9,7 @@
 		flex-basis: auto;
 		flex-direction: column;
 		margin-top: 0px;
-		.feed {
+		.post-card {
 			display: flex;
 			max-width: 100%;
 			padding: 0 calc((100% - 1200px)/2) 40px;
@@ -17,6 +17,7 @@
 			justify-content: center;
 			align-items: stretch;
 			&-display {
+				flex-basis: 360px;
 				display: flex;
 				flex-grow: 1;
 				flex-shrink: 1;
@@ -43,7 +44,7 @@
 					flex-direction: column;
 					flex-grow: 1;
 					flex-shrink: 1;
-					.feed-title {
+					.post-card-title {
 						padding: 30px 24px;
 						display: flex;
 						flex-grow: 1;
@@ -93,6 +94,139 @@
 						color: @textColorTheme;
 					}
 				}
+			}
+		}
+		.post-block{
+			padding: 0 calc((100% - 1160px)/2);
+			margin-bottom: 50px;
+			&-content{
+				margin: 20px 0;
+				text-decoration: none;
+				display: flex;
+				padding: 50px;
+				border-radius: 10px;
+				background-color: #fff;
+				box-shadow: 0 20px 40px 0 rgba(50,50,50,0.08);
+				position: relative;
+				top: 0px;
+				transition: all .5s ease-in-out;
+				-moz-transition: all .5s;
+				-webkit-transition: all .5s;
+				-o-transition: all .5s;
+				&:hover {
+					cursor: pointer;
+					top: -15px;
+				}
+				img{
+					width: 456px;
+					height: 258px;
+					background: @headerBackgroundColor;
+					object-fit: cover;
+					border-radius: 15px;
+				}
+				&-info{
+					flex: 1;
+					padding: 0 40px;
+					display: flex;
+					flex-direction: column;
+					// justify-content: space-between;
+					h2{
+						color: @textColorTheme;
+						font-size: 22px;
+						font-weight: 500;
+						line-height: 38px;
+						.text-line();
+						&:hover {
+							color: #000;
+						}
+					}
+					&-excerpt{
+						margin: 20px 0;
+						font-size: 16px;
+						line-height: 30px;
+						.text-line(3);
+						color: #999;
+						letter-spacing:2px;
+					}
+					&-exhibition{
+						margin-top: auto;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						&-tags{
+							display: flex;
+							align-items: center;
+							a{
+								display: inline-block;
+							}
+						}
+						.post-tag{
+							color: #898FA0;
+							margin-right: 16px;
+						}
+					}
+				}
+			}
+			@media screen and (max-width:1300px) {
+				&-content{
+					margin: 20px 100px;
+					img{
+						width: 380px;
+						height: 214px;
+						background: @headerBackgroundColor;
+						object-fit: cover;
+						border-radius: 15px;
+					}
+					&-info{
+						&-excerpt{
+							.text-line(2);
+						}
+					}
+				}
+			}
+			@media screen and (max-width:1000px) {
+				&-content{
+					margin: 20px 100px;
+					flex-direction: column;
+					align-items: center;
+					img{
+						width:100%;
+						height: 300px;
+						background: @headerBackgroundColor;
+						object-fit: cover;
+						border-radius: 15px;
+					}
+					&-info{
+						width: 100%;
+						padding-top: 30px;
+						&-excerpt{
+							margin: 10px 0;
+							.text-line(2);
+						}
+					}
+				}
+			}
+			@media screen and (max-width:800px) {
+				&-content{
+					margin: 20px 50px;
+					padding: 30px;
+				}
+			}
+			@media screen and (max-width:600px) {
+				&-content{
+					margin: 20px;
+					padding: 20px;
+					img{
+						height: 260px;
+					}
+					&-info{
+						width: 100%;
+						padding-top: 20px;
+					}
+				}
+			}
+		}
+		
 		.meat-type {
 			width: 32px;
 			height: 32px;
@@ -100,9 +234,6 @@
 			background: url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg') no-repeat;
 		}
 	}
-		}
-	
-	}
 	
 	.change-page {
 		height: 40px;
@@ -176,11 +307,7 @@
 @media screen and (min-width:600px) {
 	.home{
 		.main {
-			.feed {
+
-				&-display {
-					flex-basis: 360px;
-				}	
-			} 
 		}
 	}
 }

source/css/pages/post.less

@@ -1,4 +1,25 @@
 .post{
+    #post-toc{
+        .post-toc-title{
+            font-size: 20px;
+        }
+        ol{
+            color: red;
+            list-style-type:none;
+            a{
+                display: inline;
+            }
+            .toc-link{
+                display: inline;
+            }
+            .toc-text{
+                color: #006af7;
+            }
+            li{
+                list-style-type:none;
+            }
+        }        
+    }
     &-header-background{
         position: relative;
         display: flex;

source/css/public/article_cente.less

@@ -58,10 +58,12 @@
 		text-align: center;
 	}
 	pre {
+		max-width: 722px;
 		font-size: .85em;
 		line-height: 1.5em;
 		code {
 			padding: 20px;
+			margin: 20px 0;
 		}
 	}
 	p {

source/css/public/mixins.less

@@ -0,0 +1,10 @@
+
+.text-line(@number:2){
+    text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;				//溢出内容隐藏
+	text-overflow: ellipsis;		//文本溢出部分用省略号表示
+	display: -webkit-box;			//特别显示模式
+	-webkit-line-clamp: @number;			//行数
+	line-clamp: @number;					
+	-webkit-box-orient: vertical;	//盒子中内容竖直排列
+}