lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新建分支，开发 ils-x 主题样式

This commit is contained in:
XPoet 2020-04-01 10:14:18 +08:00
parent 87ba77fdc4
commit 1873feb5e8
16 changed files with 577 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -41,6 +41,4 @@ testem.log
# System Files
.DS_Store
Thumbs.db
_config-test.yml
Thumbs.db

26
layout/_partial/footer.ejs Normal file
View File

@ -0,0 +1,26 @@
<footer class="footer">
<div class="info-container">
<div class="copyright-info info-item">
&copy; <%= date(new Date(), 'YYYY') %> <a href="/"><%= config.author %></a>
</div>
<div class="theme-info info-item">
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %>. <%- __('theme_for') %> <a
href="https://github.com/XPoet/hexo-theme-ils" target="_blank"><%= theme.theme_name %> v<%= theme.theme_version %></a>
</div>
<% if (theme.busuanzi_count.enable) { %>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="website-count info-item">
<% if (theme.busuanzi_count.site_uv) { %>
<span id="busuanzi_container_site_uv" style="display: none">
<%- __('site_uv') %><span id="busuanzi_value_site_uv"></span>
</span>
<% } %>
<% if (theme.busuanzi_count.site_pv) { %>
<span id="busuanzi_container_site_pv" style="display: none">
<%- __('site_pv') %><span id="busuanzi_value_site_pv"></span>
</span>
<% } %>
</div>
<% } %>
</div>
</footer>

33
layout/_partial/head.ejs Normal file
View File

@ -0,0 +1,33 @@
<head>
<meta charset="utf-8">
<%
let title = page.title;
if (is_archive()) {
title = __('archive');
if (is_month()) {
title += ': ' + page.year + '/' + page.month;
} else if (is_year()) {
title += ': ' + page.year;
}
} else if (is_category()) {
title = __('category') + ': ' + page.category;
} else if (is_tag()) {
title = __('tag') + ': ' + page.tag;
} else if (page.title === 'about') {
title = __('about');
}
%>
<title>
<% if (title){ %><%= title %> | <% } %><%= config.title %>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<% if (theme.rss){ %>
<link rel="alternate" href="<%= url_for(theme.rss) %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<%- favicon_tag(theme.favicon) %>
<% } %>
<%- css('css/style') %>
<%- export_config() %>
</head>

45
layout/_partial/header.ejs Normal file
View File

@ -0,0 +1,45 @@
<header class="header-wrapper">
<div class="header-content">
<a class="logo vertical-center" href="/">
<%= config.title %>
</a>
<ul class="menu-list vertical-center">
<li class="">
<a href="">HOME</a>
</li>
<li class="">
<a href="/">ARCHIVE</a>
</li>
<li class="">
<a href="/">ABOUT</a>
</li>
<li class="">
<a href=""><i class="fa fa-search"></i></a>
</li>
</ul>
<div class="menu-bar vertical-center">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="header-drawer">
<ul class="drawer-menu-list">
<li class="drawer-menu-item drawer-menu-active">
<a href="">HOME</a>
</li>
<li class="drawer-menu-item">
<a href="/">ARCHIVE</a>
</li>
<li class="drawer-menu-item">
<a href="/">ABOUT</a>
</li>
</ul>
</div>
<div class="window-mask"></div>
</header>

73
layout/_partial/page-main.ejs Normal file
View File

@ -0,0 +1,73 @@
<main class="page-main-container">
<div class="main-content">
<!-- 左侧边栏-->
<div class="left-sidebar">
<!-- 文章列表 -->
<ul class="active-list">
<% for(let i = 0; i < 8; i++) { %>
<li class="active-item">
<h2 class="title">
<a href="/">
这个世界很苦，但你要很甜
</a>
</h2>
<p class="summary">
在薄情的世界里深情的活着。 01 昨天，许久没找我聊天的外甥女，突然发个大哭的表情过来说，小姨，我要活不下去了。
我知道在上高二的她，能让她大悲大喜的事情，除了考试成绩还是考...
</p>
<div class="meta-info">
<span class="date meta-info-item">
<i class="fa fa-calendar"></i> 2020-03-31 08:55:00
</span>
<span class="tags meta-info-item">
<i class="fa fa-tags"></i>TS
</span>
<span class="views meta-info-item">
<i class="fa fa-eye"></i>1234
</span>
</div>
</li>
<% } %>
</ul>
</div>
<!-- 右侧边栏 -->
<!--<div class="right-sidebar">
&lt;!&ndash; 友情链接 &ndash;&gt;
<div class="friend-link">
<div class="friend-link-title">
<span>友情链接</span>
<a class="page-change" href=""><i class="fa fa-refresh"></i> 换一批</a>
</div>
<ul class="friend-link-list">
<% for(let i = 0; i < 5; i++){ %>
<li class="friend-link-item">
<div class="avatar-box">
<%- image_tag(theme.avatar, {class: 'avatar'}) %>
</div>
<a class="go-friend-link" target="_blank" href="">+前往探索</a>
<a class="friend-name" href="">X诗人</a>
<p class="friend-intro">代码如诗，代码如诗</p>
</li>
<% } %>
</ul>
<div class="view-more">
查看更多
</div>
</div>
</div>-->
</div>
</main>

1
layout/_partial/scripts.ejs Normal file
View File

@ -0,0 +1 @@
<%- js(['js/main.js', "js/common.js"]) %>

10
layout/layout.ejs
View File

@ -1,14 +1,8 @@
<!DOCTYPE html>
<html lang="<%= config.language %>">
<%- partial('common/head') %>
<%- partial('_partial/head') %>
<body>
<%- body %>
<div class="search-popup-container">
<%- partial('common/local-search') %>
</div>
<%- partial('common/scripts') %>
<% if (theme.local_search.enable) { %>
<%- next_js('local-search.js') %>
<% } %>
<%- partial('_partial/scripts') %>
</body>
</html>

13
layout/page.ejs
View File

@ -1,8 +1,11 @@
<div class="page-container">
<div class="page-left animated">
<%- partial('common/left-side') %>
<div class="page-template">
<div class="page-top">
<%- partial('_partial/header') %>
</div>
<div class="page-right">
<%- partial('right-side') %>
<div class="page-middle">
<%- partial('_partial/page-main') %>
</div>
<div class="page-bottom">
<%- partial('_partial/footer') %>
</div>
</div>

7
source/css/layout/_partial/common.styl Normal file
View File

@ -0,0 +1,7 @@
:root {
--primary-color: #f45a6f;
--text-color: #2c3e50;
--second-text-color: #525e6b;
--normal-text-color: #616161;
--third-text-color: #9ca3ad;
}

12
source/css/layout/_partial/footer.styl Normal file
View File

@ -0,0 +1,12 @@
.footer {
.info-container {
font-size: 12px;
padding-bottom 10px
text-align center
}
.info-item {
margin 1px 0
}
}

157
source/css/layout/_partial/header.styl Normal file
View File

@ -0,0 +1,157 @@
.header-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
.header-content {
width: 80%;
height: 100%;
position: relative;
transition: transform 0.5s ease;
z-index: 999;
.vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.logo {
left: 0;
font-size: 28px;
font-weight: bold;
color: #555;
}
.menu-list {
right: 0;
li {
float: left;
margin-left: 20px;
font-size: 14px;
}
}
.menu-bar {
right: 0;
font-size: 20px;
display: none;
cursor: pointer;
}
}
.header-drawer {
width: 100%;
padding: 100px 0 20px 0;
position: absolute;
top: 0;
left: 0;
transform: scaleY(0);
transform-origin: top;
background: white;
transition: all 0.5s ease;
z-index: 998;
.drawer-menu-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
list-style-type: none;
.drawer-menu-item {
display: block;
margin: 8px auto;
padding: 0 30px;
border-radius: 22px;
text-align: center;
line-height: 42px;
font-size: 14px;
color: #9ca3ad;
transition: all 0.5s ease;
}
.drawer-menu-active {
background: #f45a6f;
color: white;
}
}
}
.window-mask {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease;
}
}
.header-drawer-show {
.menu-bar {
background: rgba(0, 0, 0, 0);
&::before {
background: #2c3e50;
transform: translateY(6px) rotate(45deg);
}
&::after {
background: #2c3e50;
transform: translateY(-6px) rotate(-45deg);
}
}
.header-drawer {
transform: scaleY(1);
}
.window-mask {
visibility: visible;
opacity: 1;
}
}
.header-wrapper-shrink {
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
.header-drawer {
padding: 60px 0 20px 0;
}
}
@media screen and (max-width: 760px) {
.menu-list {
display: none;
}
.menu-bar {
display: block !important;
}
}

124
source/css/layout/_partial/page-main.styl Normal file
View File

@ -0,0 +1,124 @@
.page-main-container {
width: 100%;
height: 100%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
.main-content {
width: 80%;
height: 100%;
position: relative;
.left-sidebar {
float: left;
width: 70%;
.active-list {
.active-item {
padding-bottom: 30px;
margin-top: 10px;
border-bottom: 1px solid #eee;
.meta-info {
font-size: 12px;
.meta-info-item {
margin-right: 5px;
}
}
}
}
}
.right-sidebar {
float: right;
width: 30%;
.friend-link {
text-align: center;
border: 1px solid #eeeeee;
.friend-link-title {
text-align: left;
.page-change {
float: right;
display: inline-block;
font-size: 14px;
color: #969696;
}
}
.friend-link-list {
margin: 0 0 20px;
text-align: left;
.friend-link-item {
margin-top: 15px;
.avatar-box {
float: left;
width: 48px;
height: 48px;
margin-right: 10px;
img.avatar {
width: 100%;
height: 100%;
border-radius: 2px;
}
}
.go-friend-link {
float: right;
margin-top: 2px;
padding: 0;
font-size: 13px;
color: #42c02e;
}
.friend-name {
padding-top: 2px;
margin-right: 60px;
font-size: 14px;
display: block;
}
p.friend-intro {
margin-top: 2px;
font-size: 12px;
color: #969696;
}
}
}
.view-more {
left: 0;
width: 100%;
font-size: 13px;
color: #787878;
background-color: #f7f7f7;
border: 1px solid #dcdcdc;
border-radius: 4px;
}
}
}
}
}

31
source/css/layout/page.styl Normal file
View File

@ -0,0 +1,31 @@
$page-top-height = 100px;
$page-top-shrink-height = 60px;
.page-template {
padding-top: $page-top-height;
.page-top {
position: fixed;
top: 0;
width: 100%;
height: $page-top-height;
z-index: 999;
transition: all 0.5s ease;
}
.page-middle {
width: 100%;
}
.page-bottom {
width: 100%;
}
}
.page-top-shrink {
padding-top: $page-top-shrink-height
.page-top {
height: $page-top-shrink-height
}
}

3
source/css/layout/variables.styl
View File

@ -23,7 +23,8 @@ $logo-description-color = #666
$logo-description-font-size = #666
// 默认字体样式
$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial", 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light', 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif
// 默认字体大小
$default-font-size = 14px

44
source/css/style.styl
View File

@ -1,20 +1,26 @@
@import "libs/font-awesome.min.css"
//@import "layout/common/animated.styl"
//@import "layout/index.styl"
//@import "layout/right-side.styl"
//@import "layout/common/left-side.styl"
//@import "layout/common/footer.styl"
//@import "layout/common/nav.styl"
//@import "layout/home-post.styl"
//@import "layout/archive-post.styl"
//@import "layout/article-post.styl"
//@import "layout/common/article-meta-info.styl"
//@import "layout/category-post.styl"
//@import "layout/tag-post.styl"
//@import "layout/common/site-info.styl"
//@import "layout/common/valine.styl"
//@import "layout/common/local-search.styl"
//@import "highlight"
//@import "layout/variables.styl"
//@import "markdown.styl"
@import "layout/basic.styl"
@import "layout/common/animated.styl"
@import "layout/index.styl"
@import "layout/right-side.styl"
@import "layout/common/left-side.styl"
@import "layout/common/footer.styl"
@import "layout/common/nav.styl"
@import "layout/home-post.styl"
@import "layout/archive-post.styl"
@import "layout/article-post.styl"
@import "layout/common/article-meta-info.styl"
@import "layout/category-post.styl"
@import "layout/tag-post.styl"
@import "layout/common/site-info.styl"
@import "layout/common/valine.styl"
@import "layout/common/local-search.styl"
@import "highlight"
@import "layout/variables.styl"
@import "markdown.styl"
@import "layout/page.styl"
@import "libs/font-awesome.min.css"
@import "layout/_partial/header.styl"
@import "layout/_partial/page-main.styl"
@import "layout/_partial/footer.styl"

30
source/js/common.js Normal file
View File

@ -0,0 +1,30 @@
let isHeaderShrink = false;
let header = document.querySelector('.header-wrapper');
let pageTemplateContainer = document.querySelector('.page-template');
let menuBar = document.querySelector('.menu-bar');
let windowMask = document.querySelector('.window-mask');
window.addEventListener('scroll', function (e) {
var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
if (!isHeaderShrink && scrollTop > 10) {
isHeaderShrink = true;
header.classList.add('header-wrapper-shrink');
pageTemplateContainer.classList.add('page-top-shrink');
} else if (isHeaderShrink && scrollTop <= 10) {
isHeaderShrink = false;
header.classList.remove('header-wrapper-shrink');
pageTemplateContainer.classList.remove('page-top-shrink');
}
});
menuBar.addEventListener('click', function (e) {
header.classList.toggle('header-drawer-show');
});
windowMask.addEventListener('click', function (e) {
header.classList.toggle('header-drawer-show');
});