iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update

Browse Source
i18n
xaoxuu 5 years ago
parent 84dd201daf
commit 94e126241d
6 changed files with 151 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      _config.yml
  2. 27
      layout/_cover/search.ejs
  3. 8
      layout/layout.ejs
  4. 4
      source/js/app.js
  5. 255
      source/less/_base.less
  6. 2
      source/less/_header.less

10
_config.yml
Unescape View File

@ -4,9 +4,9 @@ info:
docs: https://xaoxuu.com/wiki/material-x/ docs: https://xaoxuu.com/wiki/material-x/
cdn: # 把对应的那一行注释掉就使用本地的文件 cdn: # 把对应的那一行注释掉就使用本地的文件
css: css:
style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/css/style.css style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.10/css/style.css
js: js:
app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/js/app.js app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.10/js/app.js
search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/js/search.js search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/js/search.js
volantis: https://cdn.jsdelivr.net/gh/xaoxuu/volantis@1/js/volantis.min.js volantis: https://cdn.jsdelivr.net/gh/xaoxuu/volantis@1/js/volantis.min.js
@ -46,8 +46,8 @@ updated_date_format: 'llll' # 文章更新日期的格式
############################### 自定义 ############################### ############################### 自定义 ###############################
# 主页封面 # page的封面
home_cover: cover:
scheme: search # 后期将会提供多种封面方案 scheme: search # 后期将会提供多种封面方案
# height: half # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度 # height: half # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
title: "xaoxuu" title: "xaoxuu"
@ -57,7 +57,7 @@ home_cover:
features: features:
- name: 博文 - name: 博文
icon: fas fa-rss icon: fas fa-rss
url: '#posts' url: /
- name: 项目 - name: 项目
icon: fas fa-code-branch icon: fas fa-code-branch
url: projects/ url: projects/

27
layout/_cover/search.ejs
Unescape View File

@ -1,33 +1,26 @@
<% if (theme.home_cover.logo) { %> <% if (theme.cover.logo) { %>
<img class='logo' src='<%- url_for(theme.home_cover.logo) %>'/> <img class='logo' src='<%- url_for(theme.cover.logo) %>'/>
<% } else { %> <% } else { %>
<h1 class='title'><%- theme.home_cover.title ? theme.home_cover.title : config.title %></h1> <h1 class='title'><%- theme.cover.title ? theme.cover.title : config.title %></h1>
<% } %> <% } %>
<br> <br>
<% if (theme.search.enable === true) { %> <% if (theme.search.enable === true) { %>
<div class="m_search"> <div class="m_search">
<form name="searchform" class="form u-search-form"> <form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- theme.home_cover.search_placeholder %>" /> <input type="text" class="input u-search-input" placeholder="<%- theme.cover.search_placeholder %>" />
<span class="icon"><i class="fas fa-search fa-fw"></i></span> <span class="icon"><i class="fas fa-search fa-fw"></i></span>
</form> </form>
</div> </div>
<% } %> <% } %>
<div class='menu navgation'> <div class='menu navgation'>
<ul class='h-list'> <ul class='h-list'>
<% if (theme.home_cover.features) { %> <% if (theme.cover.features) { %>
<% (theme.home_cover.features || []).forEach(function(value){ %> <% (theme.cover.features || []).forEach(function(value){ %>
<li> <li>
<% if (value.url == '#posts') { %> <a class="nav home" href="<%= url_for(value.url) %>"
<a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>" id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>">
class="posts" > <i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
<i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %> </a>
</a>
<% } else { %>
<a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>"
class="nav home" href="<%= url_for(value.url) %>" >
<i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
</a>
<% } %>
</li> </li>
<%})%> <%})%>
<% } %> <% } %>

8
layout/layout.ejs
Unescape View File

@ -2,10 +2,10 @@
<html> <html>
<%- partial('_partial/head') %> <%- partial('_partial/head') %>
<body> <body>
<% if (!page.prev && theme.home_cover) { %> <% if (!page.prev && theme.cover) { %>
<div class="home-wrapper"> <div class="cover-wrapper">
<div class='home-cover <%- is_home() ? theme.home_cover.height : "half" %>'> <div class='cover <%- is_home() ? theme.cover.height : "half" %>'>
<% if (theme.home_cover.scheme == 'search') { %> <% if (theme.cover.scheme == 'search') { %>
<%- partial('_cover/search') %> <%- partial('_cover/search') %>
<% } %> <% } %>
</div> </div>

4
source/js/app.js
Unescape View File

@ -13,7 +13,7 @@ var customSearch;
function setBackToTop(){ function setBackToTop(){
const $top = $('.s-top', '.l_body'); const $top = $('.s-top', '.l_body');
let pos = document.body.scrollTop; let pos = document.body.scrollTop;
const $header = $('.l_header', '.home-wrapper'); const $header = $('.l_header', '.cover-wrapper');
$(document, window).scroll(() => { $(document, window).scroll(() => {
const scrollTop = $(window).scrollTop(); const scrollTop = $(window).scrollTop();
const del = scrollTop - pos; const del = scrollTop - pos;
@ -229,7 +229,7 @@ var customSearch;
}, 300); }, 300);
// posts // posts
const $postsBtn = $('.menu .posts'); const $postsBtn = $('.menu .active');
const $postsTarget = $('.l_body'); const $postsTarget = $('.l_body');
if ($postsBtn.length && $postsTarget) { if ($postsBtn.length && $postsTarget) {
$postsBtn.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($postsTarget); }); $postsBtn.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($postsTarget); });

255
source/less/_base.less
Unescape View File

@ -47,158 +47,161 @@ fancybox{
justify-content: center; justify-content: center;
} }
.home-cover{ .cover-wrapper{
top: 0; .cover{
left: 0; top: 0;
max-width: 100%; left: 0;
height: ~"calc(100vh - @{gap} - @{height_navbar})"; max-width: 100%;
display: flex; height: ~"calc(100vh - @{gap} - @{height_navbar})";
flex-wrap: nowrap; display: flex;
flex-direction: column; flex-wrap: nowrap;
margin-bottom: 2*@gap; flex-direction: column;
align-items: center; margin-bottom: 2*@gap;
align-self: center; align-items: center;
align-content: center; align-self: center;
padding: @gap; align-content: center;
.title, .logo{ padding: @gap;
font-size: @fontsize_h1*3;
line-height: @fontsize_h1*3.3;
margin-top: ~"calc(28vh - 2*@{gap})";
text-align: center;
font-weight: bold;
}
.logo{
max-height: 150px;
max-width: ~"calc(100% - 4*@{gap})";
}
@media(max-width: @on_phone){
.title, .logo {
font-size: @fontsize_h1*2;
line-height: @fontsize_h1*2.2;
}
}
&.half{
height: ~"calc(60vh - @{gap} - @{height_navbar})";
.title, .logo{ .title, .logo{
margin-top: ~"calc(20vh - 2*@{gap})"; font-size: @fontsize_h1*3;
line-height: @fontsize_h1*3.3;
margin-top: ~"calc(28vh - 2*@{gap})";
text-align: center;
font-weight: bold;
} }
} .logo{
max-height: 150px;
.m_search{ max-width: ~"calc(100% - 4*@{gap})";
margin-top: 2vh;
position: relative;
height: @height_navbar - @gap;
max-width: ~"calc(100% - 1*@{gap})";
width: 1.1*@width_sidebar;
@media(max-width: @on_laptop){
width: 1.2*@width_sidebar_m;
} }
line-height: @height_navbar - @gap; @media(max-width: @on_phone){
vertical-align: middle; .title, .logo {
.form { font-size: @fontsize_h1*2;
position: relative; line-height: @fontsize_h1*2.2;
display: block; }
width: 100%;
} }
.icon,.input{ &.half{
.enable-trans(.1s); height: ~"calc(60vh - @{gap} - @{height_navbar})";
.title, .logo{
margin-top: ~"calc(20vh - 2*@{gap})";
}
} }
.icon {
position: absolute; .m_search{
display:block; margin-top: 2vh;
position: relative;
height: @height_navbar - @gap; height: @height_navbar - @gap;
width: @height_navbar - @gap; max-width: ~"calc(100% - 1*@{gap})";
width: 1.1*@width_sidebar;
@media(max-width: @on_laptop){
width: 1.2*@width_sidebar_m;
}
line-height: @height_navbar - @gap; line-height: @height_navbar - @gap;
top: 0; vertical-align: middle;
left: @gap/2; .form {
font-size: @fontsize_base; position: relative;
} display: block;
.input { width: 100%;
display:block;
color: @color_text_main;
background: lighten(@theme_cardbg, 10%);
font-size: @fontsize_base;
line-height: @fontsize_base*2.2;
margin: 0;
width: 100%;
padding-left: @fontsize_base + @gap;
padding-right: @gap;
padding-top: 2px;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap;
} }
font-family: @fontfamily_base; .icon,.input{
border: none; .enable-trans(.1s);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
border-radius: @height_navbar;
~ .icon{
line-height: @fontsize_base*2.2+4px;
padding-left: 2px;
padding-top: 2px;
color: fade(@color_text_main, 80%);
} }
.set-placeholder({color: fade(@color_text_main, 60%)}); .icon {
&:hover{ position: absolute;
border: 1px dashed @theme_main; display:block;
height: @height_navbar - @gap;
width: @height_navbar - @gap;
line-height: @height_navbar - @gap;
top: 0;
left: @gap/2;
font-size: @fontsize_base;
} }
&:focus { .input {
display:block;
color: @color_text_main;
background: lighten(@theme_cardbg, 10%);
font-size: @fontsize_base;
line-height: @fontsize_base*2.2;
margin: 0;
width: 100%;
padding-left: @fontsize_base + @gap;
padding-right: @gap;
padding-top: 2px;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap;
}
font-family: @fontfamily_base;
border: none;
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
border-radius: @height_navbar;
~ .icon{ ~ .icon{
color: @theme_main; line-height: @fontsize_base*2.2+4px;
padding-left: 2px;
padding-top: 2px;
color: fade(@color_text_main, 80%);
}
.set-placeholder({color: fade(@color_text_main, 60%)});
&:hover{
border: 1px dashed @theme_main;
}
&:focus {
~ .icon{
color: @theme_main;
}
color: @color_text_main;
border: 1px solid @theme_main;
} }
color: @color_text_main;
border: 1px solid @theme_main;
} }
}
} }
&, a{ &, a{
color: @theme_main; color: @theme_main;
} }
.menu{ .menu{
margin-top: 4vh; margin-top: 4vh;
ul { ul {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
li {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: baseline;
padding: 0; justify-content: center;
height: auto; li {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
height: auto;
}
} }
} ul > li > a{
ul > li > a{ font-size: @fontsize_small;
font-size: @fontsize_small; padding: 2px;
padding: 2px; margin: 0 4px;
margin: 0 4px; .enable-trans();
.enable-trans(); color: fade(@color_text_main, 70%);
color: fade(@color_text_main, 70%); border-bottom: 1px solid transparent;
border-bottom: 1px solid transparent; &:hover, &.active{
&:hover, &.active{ color: @theme_main;
color: @theme_main; border-bottom: 1px solid @theme_main;
border-bottom: 1px solid @theme_main; }
} }
} }
} .switcher{
.switcher{ & > li{
& > li{ a{
a{ &:hover {
&:hover { background: fade(@theme_main, 15%);
background: fade(@theme_main, 15%); }
} }
} }
} }
}
}
} }
.z-depth-nav { .z-depth-nav {
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
} }

2
source/less/_header.less
Unescape View File

@ -341,7 +341,7 @@
} }
} }
} }
.home-wrapper{ .cover-wrapper{
.l_header{ .l_header{
.enable-trans(0.5s); .enable-trans(0.5s);
transform: translateY(-1.5*@height_navbar); transform: translateY(-1.5*@height_navbar);

Write Preview
Loading…
Cancel
Save