jinql
/
halo-theme-fantastic
mirror of https://github.com/jinqilin721/halo-theme-fantastic
1
0
Fork 0
Code Issues Releases Wiki Activity

主题页面优化，图库页面优化

master
jinqilin721 2020-04-24 16:19:10 +08:00
parent d0598babb2
commit 524487a54f
7 changed files with 91 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
layout/common/article.ftl
View File

@ -45,8 +45,8 @@
</div> </div>
<div class="level-right"> <div class="level-right">
<div class="level-item"> <div class="level-item">
<span class="level-item has-text-grey">评论(${post.commentCount!'0'})</span> <span class="level-item has-text-grey"><i class="fa fa-comments" style="font-size: 1em !important;" aria-hidden="true"></i>(${post.commentCount!'0'})</span>
<span class="level-item has-text-grey">浏览(${post.visits!'0'})</span> <span class="level-item has-text-grey"><i class="fa fa-eye" style="font-size: 1em !important;" aria-hidden="true"></i>(${post.visits!'0'})</span>
</div> </div>
</div> </div>
</div> </div>
@ -80,7 +80,7 @@
<div class="level-start"> <div class="level-start">
<#if tags?? && (tags?size gt 0)> <#if tags?? && (tags?size gt 0)>
<div class="level-item"> <div class="level-item">
<span class="is-size-6 has-text-grey has-mr-7">#</span> <span class="is-size-6 has-text-grey has-mr-7"><i class="fa fa-tags" style="font-size: 0.75em !important;" aria-hidden="true"></i></span>
<#list tags as tag> <#list tags as tag>
<a class="has-link-grey -link" style="margin-left: 10px;" href="${tag.fullPath!}">${tag.name!}</a>&nbsp; <a class="has-link-grey -link" style="margin-left: 10px;" href="${tag.fullPath!}">${tag.name!}</a>&nbsp;
</#list> </#list>
@ -89,7 +89,7 @@
</div> </div>
<div class="level-end"> <div class="level-end">
<div class="level-item"> <div class="level-item">
<span class="has-text-grey">最后编辑时间：${post.editTime!?string('yyyy-MM-dd HH:mm:ss')}</span> <span class="has-text-grey">更新时间：${post.editTime!?string('yyyy-MM-dd HH:mm:ss')}</span>
</div> </div>
</div> </div>
</div> </div>
@ -99,7 +99,7 @@
<div class="level-start"> <div class="level-start">
<#if post.tags?? && (post.tags?size gt 0)> <#if post.tags?? && (post.tags?size gt 0)>
<div class="level-item"> <div class="level-item">
<span class="is-size-6 has-text-grey has-mr-7">#</span> <span class="is-size-6 has-text-grey has-mr-7"><i class="fa fa-tags" style="font-size: 0.75em !important;" aria-hidden="true"></i></span>
<#list post.tags as tag> <#list post.tags as tag>
<a class="has-link-grey -link" style="margin-left: 10px;" href="${tag.fullPath!}">${tag.name!}</a>&nbsp; <a class="has-link-grey -link" style="margin-left: 10px;" href="${tag.fullPath!}">${tag.name!}</a>&nbsp;
</#list> </#list>
@ -159,7 +159,7 @@
<span class="level-item">${prevPost.title!}</span> <span class="level-item">${prevPost.title!}</span>
</a> </a>
<#else> <#else>
<a class="level level-item has-link-grey article-nav-prev" href="${context!}/"> <a class="level level-item has-link-grey article-nav-prev" href="${context!}">
<i class="level-item fas fa-chevron-left"></i> <i class="level-item fas fa-chevron-left"></i>
<span class="level-item">没有了</span> <span class="level-item">没有了</span>
</a> </a>
@ -172,7 +172,7 @@
<i class="level-item fas fa-chevron-right"></i> <i class="level-item fas fa-chevron-right"></i>
</a> </a>
<#else> <#else>
<a class="level level-item has-link-grey article-nav-next" href="${context!}/"> <a class="level level-item has-link-grey article-nav-next" href="${context!}">
<span class="level-item">没有了</span> <span class="level-item">没有了</span>
<i class="level-item fas fa-chevron-right"></i> <i class="level-item fas fa-chevron-right"></i>
</a> </a>

8
layout/common/head.ftl
View File

@ -0,0 +1,8 @@
<#if settings.theme_static_base??>
<#if settings.theme_static_base == ''>
<#elseif settings.theme_static_base == '/' || settings.theme_static_base == '.'>
<#assign theme_base = ''>
<#else>
<#assign theme_base = settings.theme_static_base>
</#if>
</#if>

1
layout/layout.ftl
View File

@ -1,4 +1,5 @@
<#macro layout title,canonical> <#macro layout title,canonical>
<#include "common/head.ftl">
<#include "common/navbar.ftl"> <#include "common/navbar.ftl">
<#include "common/widget.ftl"> <#include "common/widget.ftl">
<#include "common/module.ftl"> <#include "common/module.ftl">

84
photos.ftl
View File

@ -1,73 +1,84 @@
<#include "./layout/common/navbar.ftl"> <#include "./layout/common/navbar.ftl">
<#include "./layout/common/head.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>${title!}</title> <title>${options.photos_title!} - ${blog_title!}</title>
<meta name="keywords" content="${meta_keywords!}"/> <meta name="keywords" content="${meta_keywords!}"/>
<meta name="description" content="${meta_description!}"> <meta name="description" content="${meta_description!}"/>
<meta property="og:type" content="website"> <meta property="og:type" content="website"/>
<meta property="og:title" content="${title!}"> <meta property="og:title" content="${options.photos_title!}"/>
<meta property="og:site_name" content="${title!}"> <meta property="og:site_name" content="${options.photos_title!}"/>
<meta property="og:description" content="${meta_description!}"> <meta property="og:description" content="${meta_description!}"/>
<meta property="og:locale" content="zh-CN"> <meta property="og:locale" content="zh-CN"/>
<meta property="og:image" content="${user.avatar!}"> <meta property="og:image" content="${user.avatar!}"/>
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="${title!}"> <meta name="twitter:title" content="${options.photos_title!}"/>
<meta name="twitter:description" content="${meta_description!}"> <meta name="twitter:description" content="${meta_description!}"/>
<meta name="twitter:image" content="${user.avatar!}"> <meta name="twitter:image" content="${user.avatar!}"/>
<link rel="canonical" href="${canonical!}"/> <link rel="canonical" href="${canonical!}"/>
<link rel="alternative" href="${atom_url!}" title="${blog_title!}" type="application/atom+xml"> <link rel="alternative" href="${atom_url!}" title="${blog_title!}" type="application/atom+xml"/>
<@global.head /> <@global.head />
<link rel="stylesheet" href="${settings.cdn_bulma_css!}"> <link rel="stylesheet" href="${settings.cdn_bulma_css!}"/>
<link rel="stylesheet" href="${settings.cdn_fontawesome_css!}"> <link rel="stylesheet" href="${settings.cdn_fontawesome_css!}"/>
<#include "layout/plugin/style.theme.ftl"> <#include "layout/plugin/style.theme.ftl">
<link rel="stylesheet" href="${theme_base!}/source/css/style.css"> <link rel="stylesheet" href="${theme_base!}/source/css/style.css"/>
<link rel="stylesheet" href="${theme_base!}/source/css/bundle.css"> <link rel="stylesheet" href="${theme_base!}/source/css/bundle.css"/>
<link rel="stylesheet" href="${theme_base!}/source/css/back-to-top.css"> <link rel="stylesheet" href="${theme_base!}/source/css/back-to-top.css"/>
<link rel="stylesheet" href="${theme_base!}/source/lib/lg/css/lightgallery.css"> <link rel="stylesheet" href="${theme_base!}/source/lib/lg/css/lightgallery.css"/>
</head> </head>
<body class="is-3-column"> <body class="is-3-column">
<@navbar 'page' /> <@navbar 'page' />
<section class="section photos"> <section class="section photos">
<div class="container">
<@photoTag method="listTeams"> <@photoTag method="listTeams">
<#list teams as item> <#list teams as item>
<h3 class="level title is-3">${item.team}</h3> <h3 class="level title is-3">${item.team!}</h3>
<div class="columns is-multiline" id="view_${item.team}"> <div class="columns is-multiline" id="view_${item.team!}">
<#list item.photos as photo> <#list item.photos?sort_by('takeTime')?reverse as photo>
<div class="column is-one-quarter-desktop is-half-tablet"> <#if photo_index gte options.photos_page_size>
<#break>
</#if>
<div class="column is-one-quarter-desktop is-half-tablet" style="margin-bottom: 40px;">
<div class="card" style="width: 100%"> <div class="card" style="width: 100%">
<div class="card-image"> <div class="card-image">
<figure class="image"> <figure class="image">
<a href="${photo.url}" class="show" > <a href="${photo.url!}" class="show" title="${photo.name!}" >
<img src="${photo.thumbnail}" alt="" > <img src="${photo.thumbnail!}"
data-src="${photo.thumbnail!}"
alt="${photo.takeTime!?string('yyyy.MM.dd')} - ${photo.name!}">
</a> </a>
</figure> </figure>
<#-- <div class="card-content is-overlay is-clipped">--> <#--<div class="card-content is-overlay is-clipped">
<#-- <span class="tag is-info">--> <span class="tag is-info">
<#-- ${photo.name}--> ${photo.name}
<#-- </span>--> </span>
<#-- </div>--> </div>-->
</div> </div>
<#-- <footer class="card-footer">--> <footer class="card-footer" style="background-color: #fff; height: 64px; overflow-y: hidden;">
<#-- <a class="card-footer-item">--> <a class="card-footer-item">
<#-- ${photo.name}--> <#if photo.name?? && photo.name != '' && photo.name?length gt 50 >
<#-- </a>--> ${photo.takeTime!?string('yyyy.MM.dd')} - ${photo.name!?substring(0,50)}
<#-- </footer>--> <#else>
${photo.takeTime!?string('yyyy.MM.dd')} - ${photo.name!}
</#if>
</a>
</footer>
</div> </div>
</div> </div>
</#list> </#list>
</div> </div>
</#list> </#list>
</@photoTag> </@photoTag>
</div>
</section> </section>
<#include "./layout/common/footer.ftl"> <#include "./layout/common/footer.ftl">
<#include "./layout/plugin/back-to-top.ftl"> <#include "./layout/plugin/back-to-top.ftl">
@ -97,7 +108,6 @@
selector: '.show' selector: '.show'
}); });
}) })
</script> </script>
<style> <style>
.card { .card {

9
settings.yaml
View File

@ -16,7 +16,7 @@ sidebar:
name: profile_follow_url name: profile_follow_url
label: 【关注我】按钮地址 label: 【关注我】按钮地址
type: text type: text
placeholder: '默认为博客地址' placeholder: '默认为博客地址，不填写则不显示'
sidebar_profile: sidebar_profile:
name: sidebar_profile name: sidebar_profile
label: 侧边栏个人资料 label: 侧边栏个人资料
@ -105,7 +105,6 @@ sidebar:
label: 级联菜单 label: 级联菜单
- value: false - value: false
label: 列表 label: 列表
sidebar_recentcomment: sidebar_recentcomment:
name: sidebar_recentcomment name: sidebar_recentcomment
label: 侧边栏最近评论 label: 侧边栏最近评论
@ -128,6 +127,12 @@ sidebar:
label: 开启 label: 开启
- value: false - value: false
label: 关闭 label: 关闭
theme_static_base:
name: theme_static_base
label: 主题静态文件URL前缀（静态文件和页面文件可分开布署）
type: text
placeholder: '主题静态文件URL前缀，不知道无需填写'
default: '//s.xinac.net'
post: post:
label: 文章设置 label: 文章设置

9
sheet_links.ftl
View File

@ -1,7 +1,6 @@
<#include "layout/layout.ftl"> <#include "layout/layout.ftl">
<#include "layout/comment/comment.ftl"> <#include "layout/comment/comment.ftl">
<@layout title="${sheet.title!} | ${blog_title!} " canonical="${links_url!}"> <@layout title="${sheet.title!} | ${blog_title!} " canonical="${links_url!}">
<style> <style>
.clearfix:after { .clearfix:after {
visibility: hidden; visibility: hidden;
@ -11,11 +10,9 @@
clear: both; clear: both;
height: 0; height: 0;
} }
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
} }
.menu-list li { .menu-list li {
width: 270px; width: 270px;
max-width: 300px; max-width: 300px;
@ -26,11 +23,8 @@
color: #4a4a4a; color: #4a4a4a;
display: block; display: block;
float: left; float: left;
/* transition: all .3s; */
} }
.media-content p { .media-content p {
/*line-height: 30px;*/
margin: 0; margin: 0;
padding-top: 10px; padding-top: 10px;
} }
@ -41,6 +35,7 @@
} }
.menu-list a:hover { .menu-list a:hover {
text-decoration: underline; text-decoration: underline;
background-color: #fff !important;
} }
</style> </style>
<div class="card widget"> <div class="card widget">
@ -67,7 +62,7 @@
</div> </div>
<div class="media-content"> <div class="media-content">
<p class="link-title">${link.name!}</p> <p class="link-title">${link.name!}</p>
<p class="link-desc"><a href="${link.url!}" target="_blank"> ${link.url!}</a></p> <p class="link-desc"><a href="${link.url!}" target="_blank" title="${link.description!}"> ${link.url!}</a></p>
</div> </div>
</div> </div>
</li> </li>

36
source/js/widget_pin.js
View File

@ -1,17 +1,19 @@
var swiper = new Swiper('.blog-slider', { if (window.Swiper) {
autoplay: { var swiper = new Swiper('.blog-slider', {
delay: 3000, autoplay: {
stopOnLastSlide: false, delay: 3000,
disableOnInteraction: true, stopOnLastSlide: false,
}, disableOnInteraction: true,
spaceBetween: 30, },
effect: 'fade', spaceBetween: 30,
mousewheel: { effect: 'fade',
invert: false, mousewheel: {
}, invert: false,
// autoHeight: true, },
pagination: { // autoHeight: true,
el: '.blog-slider__pagination', pagination: {
clickable: true, el: '.blog-slider__pagination',
} clickable: true,
}); }
});
}