parent
fb9c67dfae
commit
408c00be7c
14 changed files with 467 additions and 439 deletions
@ -1,13 +1,15 @@ |
|||||||
<% if (config.widgets && config.widgets.length){ %> |
<aside class='l_side'> |
||||||
<% |
<% if (config.widgets && config.widgets.length){ %> |
||||||
let supportWidgets = ['author', 'category', 'list', 'music', 'tagcloud', 'toc', 'plain', 'related_posts']; |
<% |
||||||
%> |
let supportWidgets = ['author', 'category', 'list', 'music', 'tagcloud', 'toc', 'plain', 'related_posts']; |
||||||
<% config.widgets.forEach(function(item){ %> |
%> |
||||||
<% if (item.enable != false){ %> |
<% config.widgets.forEach(function(item){ %> |
||||||
<% let widget_name = item.widget ? item.widget : 'plain'; %> |
<% if (item.enable != false){ %> |
||||||
<% if (supportWidgets.indexOf(widget_name) > -1){ %> |
<% let widget_name = item.widget ? item.widget : 'plain'; %> |
||||||
<%- partial('../_widget/' + item.widget, {item: item}) %> |
<% if (supportWidgets.indexOf(widget_name) > -1){ %> |
||||||
|
<%- partial('../_widget/' + item.widget, {item: item}) %> |
||||||
|
<% } %> |
||||||
<% } %> |
<% } %> |
||||||
<% } %> |
<% }) %> |
||||||
<% }) %> |
<% } %> |
||||||
<% } %> |
</aside> |
||||||
|
@ -1 +1,5 @@ |
|||||||
<%- partial('_partial/archive') %> |
<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %> |
||||||
|
<div class='l_main'> |
||||||
|
<%- partial('_partial/archive') %> |
||||||
|
</div> |
||||||
|
<%- partial('_partial/side') %> |
||||||
|
@ -1 +1,5 @@ |
|||||||
<%- partial('_partial/archive') %> |
<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %> |
||||||
|
<div class='l_main'> |
||||||
|
<%- partial('_partial/archive') %> |
||||||
|
</div> |
||||||
|
<%- partial('_partial/side') %> |
||||||
|
@ -1,47 +1,52 @@ |
|||||||
<article id="<%= page.layout %>" class="post white-box article-type-<%= page.layout %>" itemscope itemprop="blogPost"> |
<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %> |
||||||
<%- partial('_partial/meta',{post:page}) %> |
<div class='l_main'> |
||||||
<section class="article typo l_friends"> |
<article id="<%= page.layout %>" class="post white-box article-type-<%= page.layout %>" itemscope itemprop="blogPost"> |
||||||
<% if (page.links){ %> |
<%- partial('_partial/meta',{post:page}) %> |
||||||
<% (page.links||[]).forEach(function(group){ %> |
<section class="article typo l_friends"> |
||||||
<% if(group.items) { %> |
<% if (page.links){ %> |
||||||
<div class='friends-group'> |
<% (page.links||[]).forEach(function(group){ %> |
||||||
<% if(group.group) { %> |
<% if(group.items) { %> |
||||||
<h2 class='friend-header'> |
<div class='friends-group'> |
||||||
<% if (group.icon) { %> |
<% if(group.group) { %> |
||||||
<i class="<%= group.icon %> fa-fw" aria-hidden="true"></i> |
<h2 class='friend-header'> |
||||||
<%} %> |
<% if (group.icon) { %> |
||||||
<%= group.group %> |
<i class="<%= group.icon %> fa-fw" aria-hidden="true"></i> |
||||||
</h2> |
<%} %> |
||||||
<%} %> |
<%= group.group %> |
||||||
<div class='friend-content'> |
</h2> |
||||||
<% (group.items||[]).forEach(function(item){ %> |
<%} %> |
||||||
<a class='friend-card' style='background:<%- item.backgroundColor %>; color:<%- item.textColor %>' |
<div class='friend-content'> |
||||||
target="_blank" rel="external nofollow noopener noreferrer" href='<%- url_for(item.url) %>'> |
<% (group.items||[]).forEach(function(item){ %> |
||||||
<div class='friend-left'> |
<a class='friend-card' style='background:<%- item.backgroundColor %>; color:<%- item.textColor %>' |
||||||
<img class='avatar' src='<%- theme.loading_img %>' data-echo='<%- url_for(item.avatar ? item.avatar : "https://img.vim-cn.com/a4/87a96e2e01b1180bba1e76e190df5220378c1a.png") %>'/> |
target="_blank" rel="external nofollow noopener noreferrer" href='<%- url_for(item.url) %>'> |
||||||
</div> |
<div class='friend-left'> |
||||||
<div class='friend-right'> |
<img class='avatar' src='<%- theme.loading_img %>' data-echo='<%- url_for(item.avatar ? item.avatar : "https://img.vim-cn.com/a4/87a96e2e01b1180bba1e76e190df5220378c1a.png") %>'/> |
||||||
<p class="friend-name"><%- item.name %></p> |
</div> |
||||||
<% if(item.tags){ %> |
<div class='friend-right'> |
||||||
<div class='friend-tags-wrapper'> |
<p class="friend-name"><%- item.name %></p> |
||||||
<% (item.tags||[]).forEach(function(tag){ %> |
<% if(item.tags){ %> |
||||||
<p class="tags"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><%= tag %></p> |
<div class='friend-tags-wrapper'> |
||||||
<% }) %> |
<% (item.tags||[]).forEach(function(tag){ %> |
||||||
</div> |
<p class="tags"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><%= tag %></p> |
||||||
<% } %> |
<% }) %> |
||||||
</div> |
</div> |
||||||
</a> |
<% } %> |
||||||
<% }) %> |
</div> |
||||||
|
</a> |
||||||
|
<% }) %> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
<%} %> |
||||||
<%} %> |
<% }) %> |
||||||
<% }) %> |
<% } %> |
||||||
<% } %> |
<br><hr> |
||||||
<br><hr> |
<%- page.content %> |
||||||
<%- page.content %> |
</section> |
||||||
</section> |
</article> |
||||||
</article> |
|
||||||
|
|
||||||
<br> |
<br> |
||||||
|
|
||||||
<%- partial('_third-party/comments') %> |
<%- partial('_third-party/comments') %> |
||||||
|
|
||||||
|
</div> |
||||||
|
<%- partial('_partial/side') %> |
||||||
|
@ -1 +1,5 @@ |
|||||||
<%- partial('_partial/article', {post: page, index: false}) %> |
<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %> |
||||||
|
<div class='l_main'> |
||||||
|
<%- partial('_partial/article', {post: page, index: false}) %> |
||||||
|
</div> |
||||||
|
<%- partial('_partial/side') %> |
||||||
|
@ -1 +1,5 @@ |
|||||||
<%- partial('_partial/article', {post: page, index: false}) %> |
<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %> |
||||||
|
<div class='l_main'> |
||||||
|
<%- partial('_partial/article', {post: page, index: false}) %> |
||||||
|
</div> |
||||||
|
<%- partial('_partial/side') %> |
||||||
|
@ -1 +1,5 @@ |
|||||||
<%- partial('_partial/archive') %> |
<%- partial('_partial/header', null, {cache: !config.relative_link, path: path}) %> |
||||||
|
<div class='l_main'> |
||||||
|
<%- partial('_partial/archive') %> |
||||||
|
</div> |
||||||
|
<%- partial('_partial/side') %> |
||||||
|
@ -1,313 +0,0 @@ |
|||||||
.l_side section{ |
|
||||||
z-index: 0; |
|
||||||
&:extend(.z-depth-main); |
|
||||||
background: @theme_cardbg; |
|
||||||
margin-top: @gap; |
|
||||||
font-family: @fontfamily_base; |
|
||||||
font-size: @fontsize_base; |
|
||||||
&:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
border-radius: @border_radius; |
|
||||||
.enable-trans(); |
|
||||||
&:hover { |
|
||||||
box-shadow: @boxshadow_card_raised; |
|
||||||
} |
|
||||||
&:active { |
|
||||||
box-shadow: @boxshadow_card_normal; |
|
||||||
} |
|
||||||
|
|
||||||
width: @width_sidebar; |
|
||||||
@media(max-width: @on_laptop) { |
|
||||||
width: @width_sidebar_m; |
|
||||||
} |
|
||||||
@media(max-width: @on_pad) { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
@media(max-width: @on_phone) { |
|
||||||
width: ~"calc(100% - 2 * @{gap})"; |
|
||||||
margin: @gap @gap 0 @gap; |
|
||||||
} |
|
||||||
max-height: ~"calc(100% - @{height_navbar} - 4 * @{gap})"; |
|
||||||
header{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
border-top-left-radius: @border_radius; |
|
||||||
border-top-right-radius: @border_radius; |
|
||||||
background-color: @color_bg_navbar; |
|
||||||
color: @color_text_in_header; |
|
||||||
font-weight: bold; |
|
||||||
line-height: 1.5em; |
|
||||||
padding: 8px @gap; |
|
||||||
.rightBtn{ |
|
||||||
color: @color_text_in_header; |
|
||||||
&:hover { |
|
||||||
color: darken(@color_text_highlight, 25%); |
|
||||||
&.rotate90{ |
|
||||||
transform: rotate(90deg); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
&.pure{ |
|
||||||
background-color: @theme_cardbg; |
|
||||||
color: @theme_main; |
|
||||||
padding-top: 14px; // 适合白色导航栏背景 |
|
||||||
padding-bottom: 14px; // 适合白色导航栏背景 |
|
||||||
.rightBtn{ |
|
||||||
color: @theme_main; |
|
||||||
&:hover { |
|
||||||
color: darken(@color_text_highlight, 25%); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.content{ |
|
||||||
text-align: justify; |
|
||||||
padding: @gap/2; |
|
||||||
max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})"; |
|
||||||
ul > li{ |
|
||||||
a{ |
|
||||||
color: fade(@color_text_main, 80%); |
|
||||||
padding: 0 @gap; |
|
||||||
line-height: @height_cell; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-content: center; |
|
||||||
border-left: 2px solid transparent; |
|
||||||
.enable-trans(); |
|
||||||
.name{ |
|
||||||
flex:auto; |
|
||||||
&:extend(.txt-ellipsis); |
|
||||||
color: fade(@color_text_main, 80%); |
|
||||||
} |
|
||||||
.badge{ |
|
||||||
flex:none; |
|
||||||
font-weight: normal; |
|
||||||
font-size: @fontsize_small; |
|
||||||
color: fade(@color_text_main, 70%); |
|
||||||
} |
|
||||||
&:hover{ |
|
||||||
border-left: 4px solid @theme_main; |
|
||||||
background: fade(@theme_main, 10%); |
|
||||||
} |
|
||||||
&:active{ |
|
||||||
border-left: 8px solid @theme_main; |
|
||||||
} |
|
||||||
&.child{ |
|
||||||
padding-left: @gap*2; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
&.author{ |
|
||||||
.enable-trans(); |
|
||||||
.content{ |
|
||||||
padding: 0; |
|
||||||
div.avatar{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
img{ |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
width: @width_sidebar; |
|
||||||
height: @width_sidebar; |
|
||||||
border-top-left-radius: @border_radius; |
|
||||||
border-top-right-radius: @border_radius; |
|
||||||
@media(max-width: @on_laptop) { |
|
||||||
width: @width_sidebar_m; |
|
||||||
height: @width_sidebar_m; |
|
||||||
} |
|
||||||
@media(max-width: @on_pad){ |
|
||||||
width: 96px; |
|
||||||
height: 96px; |
|
||||||
border-radius: 100%; |
|
||||||
margin-top: @gap/2; |
|
||||||
padding: @gap/2; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
h2{ |
|
||||||
text-align: center; |
|
||||||
font-weight: bold; |
|
||||||
margin: @gap/2; |
|
||||||
@media(max-width: @on_pad){ |
|
||||||
margin: @gap/2; |
|
||||||
} |
|
||||||
} |
|
||||||
p{ |
|
||||||
font-size: @fontsize_base; |
|
||||||
font-weight: bold; |
|
||||||
text-align: center; |
|
||||||
margin: @gap/2 @gap/2 0 @gap/2; |
|
||||||
empty-cells: hide; |
|
||||||
} |
|
||||||
.social-wrapper{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
flex-wrap: wrap; |
|
||||||
padding: 4px @gap/2; |
|
||||||
a{ |
|
||||||
color: fade(@color_text_main, 70%); |
|
||||||
.enable-trans(); |
|
||||||
&:hover{ |
|
||||||
color: @color_text_highlight; |
|
||||||
} |
|
||||||
&.social { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
margin: 4px; |
|
||||||
border-radius: 100px; |
|
||||||
&:hover { |
|
||||||
background: fade(@theme_main, 10%); |
|
||||||
color: @theme_main; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@media(max-width: @on_pad){ |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@media(max-width: @on_pad){ |
|
||||||
box-shadow: none; |
|
||||||
background: @theme_background; |
|
||||||
margin-top: 2*@gap; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.plain{ |
|
||||||
.content{ |
|
||||||
font-size: @fontsize_small; |
|
||||||
font-weight: bold; |
|
||||||
word-break: break-all; |
|
||||||
padding: @gap/2 @gap; |
|
||||||
line-height: @fontsize_small + 8px; |
|
||||||
&.pure{ |
|
||||||
padding: 0 @gap @gap @gap; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
a{ |
|
||||||
color: @color_text_link; |
|
||||||
.enable-trans(); |
|
||||||
&:hover { |
|
||||||
color: @color_text_highlight; |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
&:active { |
|
||||||
color: darken(@color_text_highlight, 25%); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.list{ |
|
||||||
.content{ |
|
||||||
padding: @gap/2 0; |
|
||||||
&.pure{ |
|
||||||
padding-top: 0; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
a{ |
|
||||||
font-size: @fontsize_small; |
|
||||||
font-weight: bold; |
|
||||||
&:hover{ |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
i{ |
|
||||||
color: fade(@color_text_main,70%); |
|
||||||
line-height: @height_cell; |
|
||||||
margin-right: 3px; |
|
||||||
} |
|
||||||
img{ |
|
||||||
display: inline; |
|
||||||
vertical-align: middle; |
|
||||||
height: 18px; |
|
||||||
width: 18px; |
|
||||||
margin-bottom: 4px; |
|
||||||
&#round{ |
|
||||||
border-radius: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.category{ |
|
||||||
.content{ |
|
||||||
padding: @gap/2 0; |
|
||||||
font-size: @fontsize_small; |
|
||||||
font-weight: bold; |
|
||||||
&.pure{ |
|
||||||
padding-top: 0; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.tagcloud{ |
|
||||||
.content{ |
|
||||||
text-align: justify; |
|
||||||
padding: @gap/2 @gap; |
|
||||||
&.pure{ |
|
||||||
padding: 0 @gap @gap @gap; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
a{ |
|
||||||
display:inline-block; |
|
||||||
.enable-trans(.1s); |
|
||||||
line-height: 1.6em; |
|
||||||
&:hover{ |
|
||||||
color: @color_text_highlight !important; //to cover inline style. |
|
||||||
text-decoration: underline |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.music{ |
|
||||||
header{ |
|
||||||
&.pure{ |
|
||||||
padding-bottom: @gap/4; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
} |
|
||||||
.content{ |
|
||||||
padding: @gap/2+4px; |
|
||||||
padding-top: @gap/2; |
|
||||||
&.pure{ |
|
||||||
padding-top: @gap/4; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
.aplayer{ |
|
||||||
border-radius: 4px; |
|
||||||
color: #666; |
|
||||||
font-family: @fontfamily_base; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.related_posts{ |
|
||||||
.content{ |
|
||||||
padding: @gap/2 0; |
|
||||||
font-size: @fontsize_small; |
|
||||||
font-weight: bold; |
|
||||||
&.pure{ |
|
||||||
padding-top: 0; // 适合白色导航栏背景 |
|
||||||
} |
|
||||||
h3{ |
|
||||||
font-size: @fontsize_small; |
|
||||||
font-weight: bold; |
|
||||||
margin: 0; |
|
||||||
a{ |
|
||||||
// line-height: @fontsize_small*1.7; |
|
||||||
line-height: inherit; |
|
||||||
padding-top: 4px; |
|
||||||
padding-bottom: 4px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
Loading…
Reference in new issue