🚀新增首页布局和文章目录
This commit is contained in:
79E
parent
57c6d44dfb
commit
4320f2244d
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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`：缩略图（你不填就用默认的了）
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ keyword: hexo主题,hexo扁平化主题,Quiet主题
|
|||
is_article_img: true
|
||||
# 网站描述
|
||||
web_description: 描述
|
||||
# 首页文章布局 默认 'card' 可选择 'block-card'
|
||||
home_layout: card
|
||||
# 导航名称
|
||||
menus_title:
|
||||
home: HOME
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ if (page.title) {
|
|||
%>
|
||||
<% page.tags.data.forEach((item, index) => {
|
||||
text += item.name + ','
|
||||
}) %>
|
||||
}) %>
|
||||
<meta name="keywords" content="<%- text %>">
|
||||
<meta name="description" content="<%- page.excerpt %>">
|
||||
<% }else{ %>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,68 @@
|
|||
<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">
|
||||
<% page.posts.each(function (post,i) { %>
|
||||
<div class="feed-display">
|
||||
<a href="<%- url_for(post.path) %>">
|
||||
<h2 class="feed-title">
|
||||
<%= post.title %>
|
||||
</h2>
|
||||
<% if(theme.home_layout === 'block-card'){ %>
|
||||
<div class="post-block" id="content">
|
||||
<% page.posts.each(function (post,i) { %>
|
||||
<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">
|
||||
<% } %>
|
||||
</a>
|
||||
<div class="feed-meat">
|
||||
<div class="meat-info">
|
||||
<div class="info-auth">
|
||||
<a href="<%- post.categories.data[0] && post.categories.data[0].path %>">
|
||||
<% }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' %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-data">
|
||||
<%- date(post.date, "YYYY-MM-DD" ) %>
|
||||
</span>
|
||||
<span class="post-tag">
|
||||
<%- date(post.date, "YYYY-MM-DD" ) %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="meat-type"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meat-type"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
</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="post-card-title">
|
||||
<%= post.title %>
|
||||
</h2>
|
||||
<% if(post.cover){ %>
|
||||
<img src="<%= post.cover %>" alt="Quiet">
|
||||
<% }else{ %>
|
||||
<img src="<%- theme.default_cover %>" alt="Quiet">
|
||||
<% } %>
|
||||
</a>
|
||||
<div class="post-card-meat">
|
||||
<div class="meat-info">
|
||||
<div class="info-auth">
|
||||
<a href="<%- post.categories.data[0] && post.categories.data[0].path %>">
|
||||
<%- post.categories.data[0] ? post.categories.data[0].name : theme.author ? theme.author : 'Quiet' %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-data">
|
||||
<%- date(post.date, "YYYY-MM-DD" ) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meat-type"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="change-page">
|
||||
<% if(page.prev !==0){ %>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
<div class="post-content" id="content">
|
||||
|
||||
<div id="article" class="post-content-info">
|
||||
<%- page.content %>
|
||||
<% 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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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,15 +94,145 @@
|
|||
color: @textColorTheme;
|
||||
}
|
||||
}
|
||||
.meat-type {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 10px;
|
||||
background: url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
margin-top: 10px;
|
||||
background: url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.change-page {
|
||||
|
|
@ -176,11 +307,7 @@
|
|||
@media screen and (min-width:600px) {
|
||||
.home{
|
||||
.main {
|
||||
.feed {
|
||||
&-display {
|
||||
flex-basis: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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; //盒子中内容竖直排列
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue