i18n
xaoxuu 5 years ago
parent 70045a5266
commit dfe3e05243
  1. 12
      _config.yml
  2. 2
      layout/_cover/search.ejs
  3. 4
      layout/_partial/header.ejs
  4. 2
      layout/archive.ejs
  5. 2
      layout/category.ejs
  6. 2
      layout/index.ejs
  7. 2
      layout/links.ejs
  8. 2
      layout/list.ejs
  9. 3
      layout/page.ejs
  10. 3
      layout/post.ejs
  11. 1
      source/less/_article.less
  12. 56
      source/less/_base.less
  13. 96
      source/less/_header.less
  14. 11
      source/less/_layout.less
  15. 11
      source/less/_main.less
  16. 7
      source/less/_side.less
  17. 6
      source/less/_toc.less

@ -104,6 +104,10 @@ menu_mobile:
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
@ -137,10 +141,6 @@ sidebar:
- name: 开源项目
icon: fas fa-code-branch
url: projects/
- name: Wiki文档
icon: fas fa-book
url: wiki/
rel: nofollow
- name: 歌单分享
icon: fas fa-compact-disc
url: music/
@ -149,6 +149,10 @@ sidebar:
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/

@ -8,7 +8,7 @@
<div class="m_search">
<form name="searchform" class="form u-search-form">
<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>
<i class="icon fas fa-search fa-fw"></i>
</form>
</div>
<% } %>

@ -1,4 +1,4 @@
<header class="l_header <%= theme.style %>">
<header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%= theme.style %>">
<div id="loading-bar-wrapper">
<div id="loading-bar" class="<%= theme.style %>"></div>
</div>
@ -37,7 +37,7 @@
<div class="m_search">
<form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" />
<span class="icon"><i class="fas fa-search fa-fw"></i></span>
<i class="icon fas fa-search fa-fw"></i>
</form>
</div>
<% } %>

@ -1,4 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (page.year || page.month) { %>
<%- partial('_partial/archive') %>
<% } else { %>

@ -1,4 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (site.posts && site.posts.length > 0) { %>
<% if (page.index) { %>
<section class="post-list">

@ -1,4 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? 'no_sidebar' : '' %>'>
<%- partial('_partial/archive') %>
</div>
<%- partial('_partial/side') %>

@ -1,4 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<article id="<%= page.layout %>" class="post white-box article-type-<%= page.layout %>" itemscope itemprop="blogPost">
<%- partial('_partial/meta',{post:page, position:'header'}) %>
<section class="article typo l_friends">

@ -1,4 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (site.posts && site.posts.length > 0) { %>
<section class="post-list">
<% site.posts.sort(page.sort ? page.sort : "-date").each(function(p){ %>

@ -1,5 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<%- partial('_partial/article', {post: page, index: false}) %>
</div>
<%- partial('_partial/side') %>

@ -1,5 +1,4 @@
<div class='l_main'>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<%- partial('_partial/article', {post: page, index: false}) %>
</div>
<%- partial('_partial/side') %>

@ -67,6 +67,7 @@
justify-content: center;
}
&.pure{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;

@ -79,6 +79,8 @@ fancybox{
}
}
.m_search{
@iconW: 32px;
@iconMargin: 4px;
margin-top: 2vh;
position: relative;
height: @height_navbar - @gap;
@ -95,55 +97,49 @@ fancybox{
width: 100%;
}
.icon,.input{
.enable-trans(.1s);
.enable-trans(.3s);
}
.icon {
position: absolute;
display:block;
height: @height_navbar - @gap;
width: @height_navbar - @gap;
line-height: @height_navbar - @gap;
line-height: @searchbar_height_cover;
height: @searchbar_height_cover;
width: @iconW;
top: 0;
left: @gap/2;
left: @iconMargin+1px;
font-size: @fontsize_base;
color: fade(@color_text_main, 60%);
}
.input {
display:block;
color: @color_text_main;
background: lighten(@theme_cardbg, 10%);
display: block;
font-size: @fontsize_base;
line-height: @fontsize_base*2.2;
margin: 0;
line-height: @fontsize_base;
height: @searchbar_height_cover;
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;
color: @color_text_main;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
padding-left: @iconW + @iconMargin;
@media(max-width: @on_phone){
padding-left: @iconW + @iconMargin;
}
border-radius: @height_navbar;
~ .icon{
line-height: @fontsize_base*2.2+4px;
padding-left: 2px;
background: lighten(@theme_cardbg, 10%);
border: 1px dashed transparent;
.set-placeholder({
padding-top: 2px;
color: fade(@color_text_main, 80%);
}
.set-placeholder({color: fade(@color_text_main, 60%)});
color: fade(@color_text_main, 60%);
});
&:hover{
border: 1px dashed @theme_main;
~.icon{
color: @theme_main;
}
}
&:focus {
~ .icon{
~.icon{
color: @theme_main;
}
color: @color_text_main;
border: 1px solid @theme_main;
}
}

@ -1,8 +1,9 @@
.l_header {
@iconW: 32px;
@iconMargin: 4px;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
font-size: @fontsize_base;
@ -18,7 +19,12 @@
margin: auto;
.enable-trans();
}
&.no_sidebar{
.wrapper{
max-width: @on_pad;
margin: auto;
}
}
.wrapper.sub{
.enable-trans();
transform: translateY(-@height_navbar);
@ -123,7 +129,7 @@
margin: 2px;
@height: @height_navbar - @gap;
@media(max-width: @on_phone){
width: @height;
margin: 0;
height: @height;
}
a{
@ -138,7 +144,7 @@
background: fade(@theme_cardbg, 30%);
}
@media(max-width: @on_phone){
width: @height;
width: @iconW;
height: @height;
}
}
@ -154,69 +160,62 @@
}
.m_search {
position: relative;
height: @height_navbar - @gap;
display: flex;
width: @width_sidebar;
@media(max-width: @on_laptop){
@media(max-width: @on_desktop){
width: @width_sidebar_m;
}
line-height: @height_navbar - @gap;
margin-top: @gap/2;
margin-bottom: @gap/2;
vertical-align: middle;
.form {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.icon,.input{
.enable-trans(.1s);
.enable-trans(.3s);
}
.icon {
position: absolute;
display:block;
height: @height_navbar - @gap;
width: @height_navbar - @gap;
line-height: @height_navbar - @gap;
display: block;
line-height: @height_searchbar;
height: @height_searchbar;
width: @iconW;
top: 0;
left: @gap/2;
left: @iconMargin+1px;
font-size: @fontsize_base;
color: fade(@color_text_in_header, 60%);
}
.input {
display:block;
display: block;
font-size: @fontsize_base;
line-height: @height_navbar - @gap;
margin: 0;
line-height: @fontsize_base;
height: @height_searchbar;
width: 100%;
color: fade(@color_text_in_header, 60%);
padding-left: @fontsize_base + @gap - 2px;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
padding-left: @iconW + @iconMargin;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap - 2px;
padding-left: @iconW + @iconMargin;
}
height: @height_navbar - @gap;
line-height: @height_navbar - @gap;
font-family: @fontfamily_base;
border: none;
border-radius: @border_radius_searchbar;
background: fade(@theme_cardbg, 15%);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
~ .icon{
.set-placeholder({
padding-top: 2px;
color: fade(@color_text_in_header, 60%);
}
.set-placeholder({color: fade(@color_text_in_header, 60%)});
});
&:hover{
border: 1px dashed fade(@color_text_in_header, 60%);
color: @color_text_in_header;
border: 1px solid fade(@color_text_in_header, 60%);
}
&:focus {
~ .icon{
~.icon{
color: @color_text_in_header;
}
color: @color_text_in_header;
border: 1px solid fade(@color_text_in_header, 60%);
// .set-placeholder({color: @black});
border: 1px solid @color_text_in_header;
}
}
}
@ -226,6 +225,12 @@
color: @theme_main;
}
box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
// box-shadow: none;
// background: transparent;
// .wrapper{
// background: @theme_cardbg;
// box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
// }
.menu{
ul > li > a{
.enable-trans();
@ -254,23 +259,28 @@
}
}
.m_search {
.icon{
color: fade(@color_text_main, 60%);
}
.input {
color: @color_text_main;
background: @theme_background;
~ .icon{
.set-placeholder({
color: fade(@color_text_main, 60%);
}
.set-placeholder({color: fade(@color_text_main, 60%)});
});
&:hover{
border: 1px dashed fade(@theme_main, 60%);
~.icon{
color: fade(@theme_main, 80%);
}
border: 1px solid fade(@theme_main, 60%);
}
&:focus {
~ .icon{
~.icon{
color: @theme_main;
}
color: @color_text_main;
background: fade(@theme_main, 15%);
border: 1px solid fade(@theme_main, 60%);
border: 1px solid @theme_main;
}
}
}
@ -289,7 +299,7 @@
opacity:0;
}
.m_search{
width: 100% - 1.5*@gap;
width: ~"calc(100vw - 2*@{gap} - 2*@{iconW})";
}
}
}

@ -1,5 +1,5 @@
// start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@gap: 20px;
@gap: 16px;
// end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -9,7 +9,7 @@
@on_laptop: 1024px; // 1024 + 285
@on_desktop: 1200px;
// container
@width_container: 1200px;
@width_container: 1080px;
@on_modal_threshold: 680px;
// 侧边栏宽度
@width_sidebar: 285px;
@ -17,6 +17,9 @@
// 搜索框的宽度,建议和侧边栏宽度保持一致
@width_searchbar: @width_sidebar;
@width_searchbar_m: @width_sidebar_m;
// 搜索框的高度,建议不要超出导航栏的高度
@height_searchbar: 40px;
@searchbar_height_cover: 44px;
// 一个cell的高度
@height_cell: 36px;
// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -24,7 +27,7 @@
// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 导航栏高度
@height_navbar: 54px;
@height_navbar: 64px;
@fontsize_logo: @fontsize_base * 1.2;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;
@ -38,7 +41,7 @@
@border_radius_line: 4px; // 线的宽度和滚动条的宽度
@border_radius_code_block: 4px; // 引用、代码块的圆角
@border_radius_searchbar: 4px; // 搜索框的圆角半径,可以根据心情随时调整风格
@border_radius_searchbar: 8px; // 搜索框的圆角半径,可以根据心情随时调整风格
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

@ -1,12 +1,21 @@
.l_main {
width: ~"calc(100% - 1 * @{width_sidebar})";
@media(max-width: @on_laptop) {
@media(max-width: @on_desktop) {
width: ~"calc(100% - 1 * @{width_sidebar_m})";
}
@media(max-width: @on_pad) {
width: 100%;
}
padding-right: @gap;
&.no_sidebar{
width: 100%;
padding-right: 0;
max-width: @on_pad;
margin: auto;
~.l_side{
display: none;
}
}
float: left;
.post-list {
position: relative;

@ -4,7 +4,7 @@
position: relative;
display: flex;
flex-direction: column;
@media(max-width: @on_laptop) {
@media(max-width: @on_desktop) {
width: @width_sidebar_m;
}
@media(max-width: @on_pad) {
@ -34,7 +34,7 @@
}
width: @width_sidebar;
@media(max-width: @on_laptop) {
@media(max-width: @on_desktop) {
width: @width_sidebar_m;
}
@media(max-width: @on_pad) {
@ -138,7 +138,7 @@
height: @width_sidebar;
border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius;
@media(max-width: @on_laptop) {
@media(max-width: @on_desktop) {
width: @width_sidebar_m;
height: @width_sidebar_m;
}
@ -194,6 +194,7 @@
}
@media(max-width: @on_pad){
justify-content: center;
display: none;
}
}
}

@ -3,7 +3,7 @@
overflow: hidden;
border-radius: @border_radius;
position: sticky;
top: @height_navbar + 1*@gap;
top: @height_navbar;
.enable-trans();
header{
position: sticky;
@ -43,10 +43,10 @@
}
}
.enable-trans();
@media(max-width: @on_phone){
@media(max-width: @on_pad){
position: fixed;
max-height: 1000px;
// width: ~"calc(100% - 2 * @{gap})";
width: ~"calc(100% - 2 * @{gap})";
top: @height_navbar;
box-shadow: @boxshadow_card_raised;
visibility: hidden;

Loading…
Cancel
Save