❤️🔥新增评论 重构样式
This commit is contained in:
乔越
parent
9c87c286b7
commit
4e7dc42a15
|
|
@ -0,0 +1,24 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
config.json
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
86
README-EN.md
86
README-EN.md
|
|
@ -1,9 +1,10 @@
|
|||
<div align="center">
|
||||
<a href="https://github.com/qiaobug/hexo-theme-quiet/" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://www.79bk.cn/image/logo.png" alt="quiet logo" width="100">
|
||||
<img src="https://cdn.jsdelivr.net/gh/duogongneng/OneMyBlogImg@master/20220426122600.png" alt="quiet logo" width="100">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 align="center">A simple and flat hexo theme</h3>
|
||||
|
||||
<div align="center">
|
||||
|
|
@ -25,13 +26,11 @@
|
|||
|
||||
### Samples
|
||||
|
||||
- [Qiao Yue's Blog](https://www.79bk.cn/)
|
||||
- [Joey Blog](https://79e.cc/)
|
||||
- [Taire's Blog](https://blog.taire.de)
|
||||
|
||||
（If you are using the Quiet theme, you're welcome to display your blog. Just add your blog in the `README.md` file and submit a PR. If you like this theme and want to bookmark it, please click on Star! Thank you~~ ）
|
||||
|
||||
### 🚁Getting started
|
||||
[中文版 ](https://github.com/QiaoBug/hexo-theme-quiet/blob/master/README.md)
|
||||
[中文文档 ](https://github.com/QiaoBug/hexo-theme-quiet/blob/master/README.md)
|
||||
|
||||
Download the theme:
|
||||
|
||||
|
|
@ -54,6 +53,9 @@ index_generator:
|
|||
path: ''
|
||||
per_page: 9
|
||||
order_by: -date
|
||||
// There's a 10 below. Modify to 9.
|
||||
per_page: 9
|
||||
pagination_dir: page
|
||||
```
|
||||
|
||||
Set the following item to be the same as mine to display the code highlighting of the article
|
||||
|
|
@ -83,7 +85,6 @@ Go to the `source` folder in the root directory to create a `tags` folder and cr
|
|||
title: tags
|
||||
date: 2020-09-19 16:19:22
|
||||
layout: "tags"
|
||||
author: 79bk.cn
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -100,7 +101,7 @@ portrait: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgIMG_7327.jpeg'
|
|||
describe: 'Hi, this is me! I am real human and I like breathing very much'
|
||||
type: "about"
|
||||
layout: "about"
|
||||
author: 79bk.cn
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -112,6 +113,8 @@ author: 79bk.cn
|
|||
|
||||
`describe` ：Introduction (briefly describe yourself)
|
||||
|
||||
`comments`: Whether to open comments
|
||||
|
||||
Other attributes do not need to be modified
|
||||
|
||||
**Content**
|
||||
|
|
@ -130,7 +133,7 @@ title: Links
|
|||
date: 2020-09-19
|
||||
type: "links"
|
||||
layout: "links"
|
||||
author: 79bk.cn
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -158,7 +161,10 @@ You need to add an header when publishing an article:
|
|||
|
||||
```
|
||||
title: A simple and flat Hexo static theme blog-Quiet
|
||||
comments: false
|
||||
categories: Projects
|
||||
aubot: Cange-Q
|
||||
aubot_link: 'https://github.com/79E/hexo-theme-quiet'
|
||||
tags:
|
||||
- Hexo
|
||||
- Quiet
|
||||
|
|
@ -185,6 +191,12 @@ cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
|
|||
|
||||
`cover`：Thumbnail (you can leave this empty to use a random default cover)
|
||||
|
||||
`comments`: Whether to open comments
|
||||
|
||||
`aubot`：The author name is not set and defaults to the name in the configuration file
|
||||
|
||||
`aubot_link`: the address to jump to by clicking on the author's name in the article page Default jump to the about me page
|
||||
|
||||
### 🏆Theme configuration
|
||||
|
||||
Enter the `_config.yml` configuration file of the `Quiet` file inside the `themes` folder in the theme root directory.
|
||||
|
|
@ -195,7 +207,63 @@ You can set the title of the website and change the Logo icons in it
|
|||
|
||||
There is a `linksList` in this configuration file, we can follow the example to add your friendship link
|
||||
|
||||
### 📝 License
|
||||
### 💌Comment Configuration
|
||||
|
||||
The following is used here `gitalk ` A commenting plugin based on Github Issue and Preact
|
||||
|
||||
We just need to configure `gitalk` in the `_config.yml` configuration file inside the `Quiet ` theme file
|
||||
|
||||
First, you need to select a public github repository (already exists or create a new github repository) for storing comments.
|
||||
|
||||
Then you need to create **GitHub Application**, if not [click here to apply](https://github.com/settings/applications/new), `Authorization callback URL` fill in the domain name of the page currently using the plugin.
|
||||
|
||||
**options：**
|
||||
|
||||
- **clientID** `String`
|
||||
|
||||
**Required**. GitHub Application Client ID.
|
||||
|
||||
- **clientSecret** `String`
|
||||
|
||||
**Required**. GitHub Application Client Secret.
|
||||
|
||||
- **repo** `String`
|
||||
|
||||
**Required**. GitHub repository.
|
||||
|
||||
- **owner** `String`
|
||||
|
||||
**Required**. GitHub repository owner. Can be personal user or organization.
|
||||
|
||||
- **admin** `Array`
|
||||
|
||||
**Required**. GitHub repository owner and collaborators. (Users who having write access to this repository)
|
||||
|
||||
*Tip: Only on the article page and the friend page, the About Me page has a comment function.*
|
||||
|
||||
### 📈Baidu Statistics
|
||||
|
||||
We need to configure Baidu statistics to generate the key that can
|
||||
|
||||
### 🔎 Question
|
||||
|
||||
- **css styles are not loaded**
|
||||
|
||||
This theme uses `less ` for `css` processing so it relies on `hexo-renderer-less` to recompile after installation
|
||||
|
||||
```
|
||||
npm i hexo-renderer-less
|
||||
```
|
||||
|
||||
- **ejs as a template language**
|
||||
|
||||
```
|
||||
npm i hexo-renderer-ejs
|
||||
```
|
||||
|
||||
|
||||
|
||||
### License
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
83
README.md
83
README.md
|
|
@ -1,9 +1,10 @@
|
|||
<div align="center">
|
||||
<a href="https://github.com/qiaobug/hexo-theme-quiet/" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://www.79bk.cn/image/logo.png" alt="quiet logo" width="100">
|
||||
<img src="https://cdn.jsdelivr.net/gh/duogongneng/OneMyBlogImg@master/20220426122600.png" alt="quiet logo" width="100">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 align="center">一款简约扁平化的 Hexo 主题</h3>
|
||||
|
||||
<div align="center">
|
||||
|
|
@ -25,13 +26,11 @@
|
|||
|
||||
### ⛱预览Dome
|
||||
|
||||
- [乔越博客](https://www.79bk.cn/)
|
||||
- [喬一博客](https://79e.cc/)
|
||||
- [Taire's Blog](https://blog.taire.de)
|
||||
|
||||
（如果您正在使用 Quiet 主题，欢迎展示您的博客哦，只需在 `README.md` 文件中加入您的博客，提交 PR 即可。如果你喜欢这个主题想要收藏下请点下 Star 谢谢～～）
|
||||
|
||||
### 🚁快速使用
|
||||
[English Version](https://github.com/QiaoBug/hexo-theme-quiet/blob/master/README-EN.md)
|
||||
[English Documents](https://github.com/QiaoBug/hexo-theme-quiet/blob/master/README-EN.md)
|
||||
|
||||
我们首先下载主题
|
||||
|
||||
|
|
@ -54,6 +53,9 @@ index_generator:
|
|||
path: ''
|
||||
per_page: 9
|
||||
order_by: -date
|
||||
// 下面还有个 10 的 修改为 9
|
||||
per_page: 9
|
||||
pagination_dir: page
|
||||
```
|
||||
|
||||
将下面此项设置为跟我一样即可显示文章的代码高亮
|
||||
|
|
@ -83,7 +85,6 @@ prismjs:
|
|||
title: tags
|
||||
date: 2020-09-19 16:19:22
|
||||
layout: "tags"
|
||||
author: 79bk.cn
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -100,7 +101,7 @@ portrait: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgIMG_7327.jpeg'
|
|||
describe: '一个阳光快乐的BOY,在正合适的年龄里希望遇见正好的你。'
|
||||
type: "about"
|
||||
layout: "about"
|
||||
author: 79bk.cn
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -112,6 +113,8 @@ author: 79bk.cn
|
|||
|
||||
`describe` ：简介（简短的描述下你自己）
|
||||
|
||||
`comments`: 是否开启评论
|
||||
|
||||
其他的不需要修改
|
||||
|
||||
**内容**
|
||||
|
|
@ -130,7 +133,7 @@ title: 友情链接
|
|||
date: 2020-09-19
|
||||
type: "links"
|
||||
layout: "links"
|
||||
author: 79bk.cn
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -150,7 +153,6 @@ title: 文章分类
|
|||
date: 2020-11-02
|
||||
type: categories
|
||||
layout: categories
|
||||
author: 79bk.cn
|
||||
---
|
||||
```
|
||||
|
||||
|
|
@ -160,7 +162,10 @@ author: 79bk.cn
|
|||
|
||||
```
|
||||
title: 一个简约扁平化的Hexo静态主题博客-Quiet
|
||||
comments: false
|
||||
categories: 项目案例
|
||||
aubot: Cange-Q
|
||||
aubot_link: 'https://github.com/79E/hexo-theme-quiet'
|
||||
tags:
|
||||
- Hexo
|
||||
- Quiet
|
||||
|
|
@ -185,6 +190,12 @@ cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
|
|||
|
||||
`cover`：缩略图（你不填就用默认的了）
|
||||
|
||||
`comments`: 是否开启评论
|
||||
|
||||
`aubot`：作者名称 不设置默认为配置文件里面的名称
|
||||
|
||||
`aubot_link`：在文章页面点击作者名称跳转的地址 默认跳转到关于我的页面
|
||||
|
||||
### 🏆主题配置
|
||||
|
||||
我们进入主题根目录下的`themes`文件夹下的`Quiet`文件里面的`_config.yml`配置文件
|
||||
|
|
@ -195,6 +206,60 @@ cover: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgQuietView.png'
|
|||
|
||||
在此配置文件中有个 `linksList` 我们可以仿照着去添加你的友情链接
|
||||
|
||||
### 💌评论配置
|
||||
|
||||
这里采用的是 `gitalk` 一个基于 Github Issue 和 Preact 开发的评论插件
|
||||
|
||||
我们只需要在 `Quiet `主题文件里面的`_config.yml`配置文件的 `gitalk` 进行配置
|
||||
|
||||
首先，您需要选择一个公共github存储库（已存在或创建一个新的github存储库）用于存储评论，
|
||||
|
||||
然后需要创建 **GitHub Application**，如果没有 [点击这里申请](https://github.com/settings/applications/new)，`Authorization callback URL` 填写当前使用插件页面的域名。
|
||||
|
||||
**配置项：**
|
||||
|
||||
- **clientID** `String`
|
||||
|
||||
**必须**. GitHub Application Client ID.
|
||||
|
||||
- **clientSecret** `String`
|
||||
|
||||
**必须**. GitHub Application Client Secret.
|
||||
|
||||
- **repo** `String`
|
||||
|
||||
**必须**. GitHub repository.
|
||||
|
||||
- **owner** `String`
|
||||
|
||||
**必须**. GitHub repository 所有者，可以是个人或者组织。
|
||||
|
||||
- **admin** `Array`
|
||||
|
||||
**必须**. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
|
||||
|
||||
*提示：只有在文章页面和友情链接页面，关于我的页面有评论功能。*
|
||||
|
||||
### 📈百度统计
|
||||
|
||||
我们需要配置好 百度统计 生成key 即可
|
||||
|
||||
### 🔎问题
|
||||
|
||||
- **css 样式没有加载出来**
|
||||
|
||||
本主题使用 `less ` 对 `css` 进行处理 所以依赖 `hexo-renderer-less` 安装后重新编译即可
|
||||
|
||||
```
|
||||
npm i hexo-renderer-less
|
||||
```
|
||||
|
||||
- **ejs 作为 模版语言**
|
||||
|
||||
```
|
||||
npm i hexo-renderer-ejs
|
||||
```
|
||||
|
||||
### 📝 License
|
||||
|
||||
|
||||
|
|
|
|||
70
_config.yml
70
_config.yml
|
|
@ -2,13 +2,12 @@
|
|||
title: Hexo主题-Quiet主题-Hexo扁平化主题安装
|
||||
# 网站标题后缀
|
||||
suffix: Quiet
|
||||
# 作者名称(会显示在首页文章下面)
|
||||
author: CHANGEQ
|
||||
# 首页简介（显示在首页顶部Logo的那句话）
|
||||
home_describe: A COLLEGE STUDENT WITH IDEALS AND BELIEFS.
|
||||
# 作者名称
|
||||
author: Joey
|
||||
# 网站关键字
|
||||
keyword: hexo主题,hexo扁平化主题,Quiet主题
|
||||
is_article_img: false #false是否开启文章背景图显示(随机图片)
|
||||
#false是否开启文章背景图显示(随机图片)
|
||||
is_article_img: true
|
||||
# 网站描述
|
||||
web_description: 描述
|
||||
# 导航名称
|
||||
|
|
@ -32,20 +31,42 @@ menus:
|
|||
logo: /image/logo.png
|
||||
# 网页标签上那个小图标 一定要用本地存储
|
||||
icon: /image/favicon.ico
|
||||
# 每个页面上面的图表
|
||||
topIcon:
|
||||
homeIcon: "/image/logo.png"
|
||||
archivesIcon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-remixicon.svg"
|
||||
tagIcon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgtags.svg"
|
||||
linksIcon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imga20r7-cftji.svg"
|
||||
categoriesIcon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgblogmyCategory.svg"
|
||||
|
||||
# 标签页显示多少个标签
|
||||
tagsNum: 1000
|
||||
# 每个页面的展示的图标和一句话
|
||||
headers:
|
||||
home: {
|
||||
message: "首页这里应该有一句话，你想想写点什么？",
|
||||
icon: "/image/logo.png"
|
||||
}
|
||||
archives: {
|
||||
# 这里会替换掉两个变量{ year 年，number 总数 } 当然也可以不写这两个变量
|
||||
message: "居然用了 year 年一共才写了 number 篇文章!",
|
||||
icon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-remixicon.svg"
|
||||
}
|
||||
tags: {
|
||||
message: "这里是一些展示的标签",
|
||||
icon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgtags.svg"
|
||||
}
|
||||
links: {
|
||||
message: "我和我的小伙伴们",
|
||||
icon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imga20r7-cftji.svg"
|
||||
}
|
||||
categories: {
|
||||
message: "文章分类",
|
||||
icon: "https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgblogmyCategory.svg"
|
||||
}
|
||||
|
||||
# 网页访问统计
|
||||
web_analytics:
|
||||
enable: false #需要改为true
|
||||
baidu: 4b5fe1472f22fa # （替换）百度统计的 Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串
|
||||
baidu: 4b5fe1472f22fadsfs # （替换）百度统计的 Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串
|
||||
# 评论
|
||||
gitalk:
|
||||
clientID: 02b3c # （需要替换）GitHub Application Client ID.
|
||||
clientSecret: adfc7b4 #（需要替换）GitHub Application Client Secret.
|
||||
repo: gimment #（需要替换）GitHub repository.
|
||||
owner: duneng #（需要替换）GitHub repository 所有者，可以是个人或者组织。
|
||||
admin: ['duneng'] #（需要替换）GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
|
||||
|
||||
# 底部显示的图标（github 或者其他）
|
||||
bottomIcon:
|
||||
#可以多个
|
||||
|
|
@ -55,23 +76,16 @@ bottomIcon:
|
|||
#图标
|
||||
iconLink: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imggithub.png',
|
||||
#跳转链接
|
||||
toUrl: 'https://github.com/qiaobug'
|
||||
toUrl: 'https://github.com/79E/hexo-theme-quiet'
|
||||
}
|
||||
# 友情链接
|
||||
linksList:
|
||||
- {
|
||||
title: '乔越博客',
|
||||
title: 'Quiet',
|
||||
intro: '收藏回忆与分享技术的地方',
|
||||
link: 'https://www.79bk.cn/',
|
||||
link: 'https://github.com/79E/hexo-theme-quiet',
|
||||
image: 'https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgIMG_7327.jpeg'
|
||||
}
|
||||
# 文字内点击图片放大相关配置
|
||||
picture:
|
||||
# 蒙版的颜色也就是 打开图片背景 显示的颜色
|
||||
colour: '#333'
|
||||
# 透明度
|
||||
opacity: 0.5
|
||||
# 图片角度 就是显示图片的角度
|
||||
imgRadius: "10px"
|
||||
|
||||
#默认的cover (默认缩略图) 在没有填写（这里可以替换（可以是api也可以是固定的图））
|
||||
default_cover: https://api.ixiaowai.cn/gqapi/gqapi.php
|
||||
default_cover: http://eett.cc/pictures?type=pc&category=fengjing
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<%- css('css/food.css') %>
|
||||
|
||||
<div class="footer">
|
||||
<div class="Copyright">
|
||||
©<%= new Date().getFullYear() %> By <%- theme.author %>. 主题：<a
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<%- partial('_widget/gotop') %>
|
||||
<%- partial('_widget/analytics') %>
|
||||
<%- partial('_widget/comment') %>
|
||||
<script>
|
||||
console.log('\n %c Hexo-Quiet 主题 %c https://github.com/QiaoBug/hexo-theme-quiet \n', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;')
|
||||
</script>
|
||||
|
|
@ -9,6 +9,7 @@ if (page.title) {
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link rel="shortcut icon" type="image/x-icon" href="<%- theme.icon %>">
|
||||
<%- css('css/index.css') %>
|
||||
<% if(page.tags && page.tags.data.length) {
|
||||
let text = ''
|
||||
%>
|
||||
|
|
@ -22,4 +23,9 @@ if (page.title) {
|
|||
<meta name="description" content="<%- theme.web_description %>">
|
||||
<% } %>
|
||||
<%- js('js/jquery.min.js') %>
|
||||
<%- partial('_widget/analytics') %>
|
||||
<%- js('js/index.js') %>
|
||||
<%- js('js/fancybox.umd.js') %>
|
||||
<%- js('js/fancybox-images.js') %>
|
||||
<%- js('js/gitalk.min.js') %>
|
||||
<%- js('js/hljs.min.js') %>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<%- css('css/header.css') %>
|
||||
|
||||
<div class="header">
|
||||
<div class="header-top">
|
||||
<div class="header-top" id="header-top">
|
||||
<div class="h-left">
|
||||
<a href="<%= theme.menus.home %>">
|
||||
<img src="<%- theme.logo %>" alt="Quiet">
|
||||
|
|
@ -36,6 +36,3 @@
|
|||
</div>
|
||||
</div>
|
||||
<%- partial('_widget/sidebar') %>
|
||||
<script>
|
||||
$(function () { $(window).scroll(function () { if ($(document).scrollTop() > 100) { $(".header-top").removeClass("header-move2"); $('.header-top').addClass('header-move1') } else { $(".header-top").removeClass("header-move1"); $('.header-top').addClass('header-move2') } }) });
|
||||
</script>
|
||||
|
|
@ -1,63 +1,55 @@
|
|||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<span>
|
||||
<img class="site-logo" src="<%- theme.topIcon.homeIcon %>" alt="Q">
|
||||
</span>
|
||||
<h2>
|
||||
<%- theme.home_describe %>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="feed">
|
||||
<% page.posts.each(function (post,i) { %>
|
||||
<div class="feed-display">
|
||||
<a href="<%- url_for(post.path) %>">
|
||||
<h2 class="feed-title">
|
||||
<%= post.title %>
|
||||
</h2>
|
||||
<% if(post.cover){ %>
|
||||
<img src="<%= post.cover %>" alt="Quiet">
|
||||
<% }else{ %>
|
||||
<img src="<%- theme.default_cover %>" alt="Quiet">
|
||||
<% } %>
|
||||
</a>
|
||||
<div class="feed-meat">
|
||||
<div class="meat-info">
|
||||
<div class="info-auth">
|
||||
<a href="">
|
||||
<%- theme.author %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-data">
|
||||
<%- date(post.date, "YYYY-MM-DD" ) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meat-type"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-page">
|
||||
<% if(page.prev !==0){ %>
|
||||
<div class="p-page">
|
||||
<a href="<%- url_for(page.prev_link) %>">
|
||||
<div class="previous">
|
||||
上一页
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% if(page.next !==0){ %>
|
||||
<div class="n-page">
|
||||
<a href="<%- url_for(page.next_link) %>">
|
||||
<div class="next">
|
||||
下一页
|
||||
</div>
|
||||
<div class="home">
|
||||
<%- partial('_widget/header_body',{message:theme.headers.home.message,icon:theme.headers.home.icon}) %>
|
||||
<div class="main">
|
||||
<div class="feed" id="content">
|
||||
<% page.posts.each(function (post,i) { %>
|
||||
<div class="feed-display">
|
||||
<a href="<%- url_for(post.path) %>">
|
||||
<h2 class="feed-title">
|
||||
<%= post.title %>
|
||||
</h2>
|
||||
<% if(post.cover){ %>
|
||||
<img src="<%= post.cover %>" alt="Quiet">
|
||||
<% }else{ %>
|
||||
<img src="<%- theme.default_cover %>" alt="Quiet">
|
||||
<% } %>
|
||||
</a>
|
||||
<div class="feed-meat">
|
||||
<div class="meat-info">
|
||||
<div class="info-auth">
|
||||
<a href="<%- post.categories.data[0] && post.categories.data[0].path %>">
|
||||
<%- post.categories.data[0] ? post.categories.data[0].name : theme.author ? theme.author : 'Quiet' %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info-data">
|
||||
<%- date(post.date, "YYYY-MM-DD" ) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meat-type"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<script>$(function () { $('.feed').addClass('move'); })</script>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-page">
|
||||
<% if(page.prev !==0){ %>
|
||||
<div class="p-page">
|
||||
<a href="<%- url_for(page.prev_link) %>">
|
||||
<div class="previous">
|
||||
上一页
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% if(page.next !==0){ %>
|
||||
<div class="n-page">
|
||||
<a href="<%- url_for(page.next_link) %>">
|
||||
<div class="next">
|
||||
下一页
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,13 +1,46 @@
|
|||
<div class="article-content">
|
||||
<div id="article" class="content">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
<div class="post-content" id="content">
|
||||
<div id="article" class="post-content-info">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
<div id="<%- page.comments ? 'gitalk-container' : ''%>"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
Fancybox.bind('[data-fancybox="fancybox-gallery-img"]', {
|
||||
dragToClose: true,
|
||||
Toolbar: true,
|
||||
closeButton: "top",
|
||||
Image: {
|
||||
zoom: true,
|
||||
},
|
||||
on: {
|
||||
initCarousel: (fancybox) => {
|
||||
const slide = fancybox.Carousel.slides[fancybox.Carousel.page];
|
||||
fancybox.$container.style.setProperty(
|
||||
"--bg-image",
|
||||
`url("${slide.$thumb.src}")`
|
||||
);
|
||||
},
|
||||
"Carousel.change": (fancybox, carousel, to, from) => {
|
||||
const slide = carousel.slides[to];
|
||||
fancybox.$container.style.setProperty(
|
||||
"--bg-image",
|
||||
`url("${slide.$thumb.src}")`
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#noneimg img {
|
||||
display: none;
|
||||
z-index: 109;
|
||||
width: 600px !important;
|
||||
z-index: 9999;
|
||||
/* width: 600px !important; */
|
||||
min-width: 0%;
|
||||
max-width: 90%;
|
||||
max-height: 80%;
|
||||
border-radius: 0px;
|
||||
position: fixed;
|
||||
box-shadow: 0 0 0px #c3c3c300 !important;
|
||||
|
|
@ -20,10 +53,7 @@
|
|||
|
||||
@media screen and (max-width:600px) {
|
||||
#noneimg img {
|
||||
width: 88%
|
||||
max-width: 88%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function () { $('#article').click(function (e) { if (e.target.tagName == "IMG") { if ($('#nonediv').length == 0) { let MImg = `<div id='noneimg'><img src='${e.target.currentSrc}'></div>`; let MDiv = "<div id='nonediv' style='cursor: pointer;display: none; position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: <%= theme.picture.colour %>;opacity:<%= theme.picture.opacity %>;z-index: 108;'></div>"; $('#article').append(MDiv); $('#article').append(MImg); $("#nonediv").fadeIn("slow"); $("#noneimg img").fadeIn("slow") } } else { if ($('#nonediv').length !== 0) { $("#noneimg ").fadeOut("slow"); $("#nonediv").fadeOut("slow"); setTimeout(function () { $('#nonediv').remove(); $('#noneimg').remove() }, 500) } } }); $('.article-content').addClass('content-move') });
|
||||
</script>
|
||||
|
|
@ -1,32 +1,40 @@
|
|||
<div class="header-bg <%- theme.is_article_img?'bg-content-img':'' %>">
|
||||
<div class="bg-content">
|
||||
<ul class="tag">
|
||||
<div class="post-header-background <%- theme.is_article_img?'post-header-img':'post-header-color' %>"
|
||||
style="background: url('<%- theme.is_article_img ? theme.default_cover : null %>')"
|
||||
>
|
||||
<div class="post-header-background-content">
|
||||
<ul class="post-header-tag">
|
||||
<% if(page.tags && page.tags.data.length) { %>
|
||||
<% page.tags.data.forEach((item, index) => { %>
|
||||
<li><a href="/tags/<%- item.name %>"><%= item.name %></a></li>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
<h1><%- page.title %></h1>
|
||||
<div class="article-info">
|
||||
<div class="article-author">
|
||||
<div class="post-header-info">
|
||||
<div class="post-header-info-author">
|
||||
<% if(theme.is_article_img) { %>
|
||||
<svg t="1604839279282" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2901" width="20" height="20">
|
||||
<path
|
||||
d="M513 956.3c-247.7 0-448-200.3-448-448S265.3 66.2 513 66.2s448 200.3 448 448-200.3 442.1-448 442.1z m0-830.9c-212.2 0-388.8 170.7-388.8 388.8C124.2 726.3 294.9 903 513 903c212.2 0 388.8-170.7 388.8-388.8S725.2 125.4 513 125.4z m0 430.2c-94.2 0-170.7-76.5-170.7-170.7S418.8 207.8 513 207.8s170.7 76.5 170.7 170.7S607.2 555.6 513 555.6z m0-289.1c-64.6 0-112 52.8-112 112s47.4 117.9 112 117.9 112-52.8 112-112-47.4-117.9-112-117.9z m0 689.8c-135.7 0-259-58.7-341.9-158.9l-11.8-17.8 11.8-17.8c76.5-117.9 206.2-188.5 347.8-188.5 135.7 0 265 64.6 341.9 182.6l11.8 17.8-11.8 17.8C778 897.1 648.7 956.3 513 956.3zM230.3 773.2C300.9 849.7 406.9 897 513 897c112 0 218.1-47.4 288.6-129.8-70.5-88.2-170.7-135.6-282.7-135.6s-218.1 53.3-288.6 141.6z"
|
||||
p-id="2902" fill="#ffffff"></path>
|
||||
</svg>
|
||||
<% }else{ %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<g>
|
||||
<path fill="#12183A"
|
||||
d="M6.187 15.265A6.47 6.47 0 0 0 10 16.5a6.47 6.47 0 0 0 3.813-1.235A4.99 4.99 0 0 0 10 13.5a4.99 4.99 0 0 0-3.813 1.765zM5.082 14.25A6.485 6.485 0 0 1 10 12c1.965 0 3.726.872 4.918 2.25a6.5 6.5 0 1 0-9.836 0zM10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<svg t="1604839279282" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2901" width="20" height="20">
|
||||
<path
|
||||
d="M513 956.3c-247.7 0-448-200.3-448-448S265.3 66.2 513 66.2s448 200.3 448 448-200.3 442.1-448 442.1z m0-830.9c-212.2 0-388.8 170.7-388.8 388.8C124.2 726.3 294.9 903 513 903c212.2 0 388.8-170.7 388.8-388.8S725.2 125.4 513 125.4z m0 430.2c-94.2 0-170.7-76.5-170.7-170.7S418.8 207.8 513 207.8s170.7 76.5 170.7 170.7S607.2 555.6 513 555.6z m0-289.1c-64.6 0-112 52.8-112 112s47.4 117.9 112 117.9 112-52.8 112-112-47.4-117.9-112-117.9z m0 689.8c-135.7 0-259-58.7-341.9-158.9l-11.8-17.8 11.8-17.8c76.5-117.9 206.2-188.5 347.8-188.5 135.7 0 265 64.6 341.9 182.6l11.8 17.8-11.8 17.8C778 897.1 648.7 956.3 513 956.3zM230.3 773.2C300.9 849.7 406.9 897 513 897c112 0 218.1-47.4 288.6-129.8-70.5-88.2-170.7-135.6-282.7-135.6s-218.1 53.3-288.6 141.6z"
|
||||
p-id="2902" fill="#ffffff"></path>
|
||||
</svg>
|
||||
<% }else{ %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<g>
|
||||
<path fill="#12183A"
|
||||
d="M6.187 15.265A6.47 6.47 0 0 0 10 16.5a6.47 6.47 0 0 0 3.813-1.235A4.99 4.99 0 0 0 10 13.5a4.99 4.99 0 0 0-3.813 1.765zM5.082 14.25A6.485 6.485 0 0 1 10 12c1.965 0 3.726.872 4.918 2.25a6.5 6.5 0 1 0-9.836 0zM10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<% } %>
|
||||
<span> <a href=""><%- theme.author %></a></span>
|
||||
<span class="post-header-info-author-text"> <a href="<%- page.aubot_link ? page.aubot_link : '../../about' %>"><%- page.aubot ? page.aubot : theme.author %></a></span>
|
||||
<div class="post-header-info-author-categories">
|
||||
<% page.categories.data.map((cat)=>{ %>
|
||||
<a href="../../<%- cat.path %>" target="_blank" ><%- cat.name %></a>
|
||||
<% }) %>
|
||||
</div>
|
||||
<p><%- date(page.date, "YYYY-MM-DD HH:mm:ss") %></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="Last-Next">
|
||||
<div class="post-paging">
|
||||
<% if(page.prev) {%>
|
||||
<a href="<%- url_for(page.prev.path) %>">
|
||||
<div class="last">
|
||||
<div class="post-paging-last">
|
||||
<span>上一篇</span>
|
||||
<p><%= page.prev.title %></p>
|
||||
</div>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<% if(page.next) {%>
|
||||
<a href="<%- url_for(page.next.path) %>">
|
||||
<div class="next">
|
||||
<div class="post-paging-next">
|
||||
<span>下一篇</span>
|
||||
<p><%= page.next.title %></p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<% if(theme.gitalk.clientID && theme.gitalk.clientSecret) { %>
|
||||
<!-- Gitalk -->
|
||||
<script>
|
||||
const data = '{"clientID":"<%= theme.gitalk.clientID %>","clientSecret":"<%= theme.gitalk.clientSecret %>","repo":"<%= theme.gitalk.repo %>","owner":"<%= theme.gitalk.owner %>","admin":"<%= theme.gitalk.admin %>"}'
|
||||
const gitalk = new Gitalk({
|
||||
...JSON.parse( data),
|
||||
id:location.pathname,
|
||||
distractionFreeMode:false
|
||||
})
|
||||
gitalk.render('gitalk-container')
|
||||
</script>
|
||||
<% } %>
|
||||
|
|
@ -1,20 +1,21 @@
|
|||
<%- js('js/jquery.min.js') %>
|
||||
<%- js('js/gotop.js') %>
|
||||
|
||||
<style type="text/css">
|
||||
@media screen and (min-width: 600px) {
|
||||
.goTop>span {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
background: rgba(18, 24, 58, 0.06);
|
||||
text-align: center;
|
||||
transition: border .5s;
|
||||
border: 1px solid rgba(18, 24, 58, 0.06);
|
||||
|
||||
transition: border .5s;
|
||||
-moz-transition: border .5s;
|
||||
/* Firefox 4 */
|
||||
-webkit-transition: border .5s;
|
||||
|
|
@ -35,9 +36,8 @@
|
|||
}
|
||||
|
||||
.goTop>span>svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 17.5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -59,5 +59,17 @@
|
|||
</span>
|
||||
</div>
|
||||
<script>
|
||||
$('#js-go_top').gotoTop({ offset: 500, speed: 300, animationShow: { 'transform': 'translate(0,0)', 'transition': 'transform .5s ease-in-out' }, animationHide: { 'transform': 'translate(100px,0)', 'transition': 'transform .5s ease-in-out' } });
|
||||
$( '#js-go_top' )
|
||||
.gotoTop( {
|
||||
offset: 500,
|
||||
speed: 300,
|
||||
animationShow: {
|
||||
'transform': 'translate(0,0)',
|
||||
'transition': 'transform .5s ease-in-out'
|
||||
},
|
||||
animationHide: {
|
||||
'transform': 'translate(100px,0)',
|
||||
'transition': 'transform .5s ease-in-out'
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<div class="grouping">
|
||||
<% keys.forEach(function(item){ %>
|
||||
<p>
|
||||
<%= item %>
|
||||
</p>
|
||||
<% data[item].map(function(post){ %>
|
||||
<a href="<%- config.root %><%- post.path %>">
|
||||
<span><%- (post.title || "Untitled").replace(/[<>&"]/g,function(c){
|
||||
return {'<':'<','>':'>','&':'&','"':'"'}[c];
|
||||
}) %></span>
|
||||
<time><%= post.date.format('MM-DD') %></time>
|
||||
</a>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="header-body-background">
|
||||
<div class="header-body-background-content">
|
||||
<span>
|
||||
<img src="<%- icon %>" alt="Quiet">
|
||||
</span>
|
||||
|
||||
<h2><%- message %></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -17,10 +17,21 @@
|
|||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class='shelter'
|
||||
style='cursor: pointer;display: none; position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: <%= theme.picture.colour %>;opacity:<%= theme.picture.opacity %>;z-index: 108;'>
|
||||
<div class='shelter'>
|
||||
</div>
|
||||
<style>
|
||||
.shelter{
|
||||
background-color: #333;
|
||||
opacity:0.5;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1998;
|
||||
}
|
||||
.sidebar {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
|
@ -29,7 +40,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
z-index: 1999;
|
||||
text-align: center;
|
||||
box-shadow: -6px 0 20px rgba(98, 94, 94, .815)
|
||||
}
|
||||
|
|
@ -107,5 +118,25 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
$(function () { $('.h-right-close>svg').click(function () { $('.sidebar').animate({ width: "66%" }, 500); $('.shelter').fadeIn("slow") }); $('.shelter').click(function (e) { $('.sidebar').animate({ width: "0" }, 500); $('.shelter').fadeOut("slow") }) })
|
||||
$( function () {
|
||||
$( '.h-right-close>svg' )
|
||||
.click( function () {
|
||||
$( '.sidebar' )
|
||||
.animate( {
|
||||
width: "66%"
|
||||
}, 500 );
|
||||
$( '.shelter' )
|
||||
.fadeIn( "slow" )
|
||||
} );
|
||||
$( '.shelter' )
|
||||
.click( function ( e ) {
|
||||
$( '.sidebar' )
|
||||
.animate( {
|
||||
width: "0"
|
||||
}, 500 );
|
||||
$( '.shelter' )
|
||||
.fadeOut( "slow" )
|
||||
} )
|
||||
} )
|
||||
|
||||
</script>
|
||||
|
|
@ -1,22 +1,18 @@
|
|||
<%- css('css/about.css') %>
|
||||
<%- partial('_partial/header',{name:'about'}) %>
|
||||
<%- css('css/atom-one-dark.css') %>
|
||||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<img src="<%= page.portrait %>" alt="Q">
|
||||
<h1> <%- page.aubot %>
|
||||
<span><%- page.describe %></span>
|
||||
</h1>
|
||||
<div class="about">
|
||||
<div class="about-header-background">
|
||||
<div class="about-header-background-content">
|
||||
<img src="<%= page.portrait %>" alt="Q">
|
||||
<h1> <%- page.aubot %>
|
||||
<span><%- page.describe %></span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-content" id="content" >
|
||||
<div id="article" class="about-content-info">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
<div id="<%- page.comments ? 'gitalk-container' : ''%>"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-content">
|
||||
<%- css('css/page_cente.css') %>
|
||||
<div id="article" class="content">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () { $('.article-content').addClass('content-move') })
|
||||
</script>
|
||||
|
|
@ -1,54 +1,55 @@
|
|||
<%
|
||||
if(is_archive()){
|
||||
page.title = __('文章归档')
|
||||
}
|
||||
%>
|
||||
<%- css('css/archive.css') %>
|
||||
<%- partial('_partial/header',{name:'archive'}) %>
|
||||
<%
|
||||
var years = {};
|
||||
var PageNum = 0;
|
||||
var PageYear = 0;
|
||||
site.posts.sort('date').reverse().forEach(function(post){
|
||||
var year = post.date.year()
|
||||
if(years[year]===undefined){
|
||||
years[year] = [];
|
||||
PageYear += 1;
|
||||
}
|
||||
years[year].push(post);
|
||||
PageNum += 1;
|
||||
});
|
||||
%>
|
||||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<span>
|
||||
<img src="<%- theme.topIcon.archivesIcon %>" alt="Q">
|
||||
</span>
|
||||
|
||||
<h2>居然用了 <%- PageYear %> 年一共才写了 <%- PageNum %> 篇文章!</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content">
|
||||
<div id="article" class="content">
|
||||
<% Object.keys(years).reverse().forEach(function(year){ %>
|
||||
<p>
|
||||
<%= year %>
|
||||
</p>
|
||||
<% years[year].map(function(post){ %>
|
||||
<a href="<%- config.root %><%- post.path %>">
|
||||
<span><%- (post.title || "Untitled").replace(/[<>&"]/g,function(c){
|
||||
return {'<':'<','>':'>','&':'&','"':'"'}[c];
|
||||
}) %></span>
|
||||
<time><%= post.date.format('MM-DD') %></time>
|
||||
</a>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% if(is_archive()){ %>
|
||||
<% page.title = __('文章归档') %>
|
||||
<%- partial('_partial/header',{name:'archive'}) %>
|
||||
<%
|
||||
var years = {};
|
||||
var PageNum = 0;
|
||||
var PageYear = 0;
|
||||
site.posts.sort('date').reverse().forEach(function(post){
|
||||
var year = post.date.year()
|
||||
if(years[year]===undefined){
|
||||
years[year] = [];
|
||||
PageYear += 1;
|
||||
}
|
||||
years[year].push(post);
|
||||
PageNum += 1;
|
||||
});
|
||||
%>
|
||||
<% }else if(is_category()){ %>
|
||||
<% page.title = __("文章分类：" + page.category) %>
|
||||
<%- partial('_partial/header',{name:'categories'}) %>
|
||||
<%
|
||||
var years = {};
|
||||
site.posts.sort('date').reverse().forEach(function(post){
|
||||
const categorys = post.categories;
|
||||
if(categorys.length < 1) return
|
||||
categorys.data.map((cat)=>{
|
||||
if(page.category === cat.name){
|
||||
var year = post.date.year()
|
||||
if(years[year]===undefined){
|
||||
years[year] = [];
|
||||
}
|
||||
years[year].push(post);
|
||||
}
|
||||
})
|
||||
});
|
||||
%>
|
||||
<% } %>
|
||||
|
||||
|
||||
<div class="archive">
|
||||
<% if(is_archive()){ %>
|
||||
<%- partial('_widget/header_body',{message:theme.headers.archives.message.replace('year', PageYear).replace('number', PageNum),icon:theme.headers.archives.icon}) %>
|
||||
<% }else if(is_category()){%>
|
||||
<%- partial('_widget/header_body',{message:"文章分类："+page.category,icon:theme.headers.categories.icon}) %>
|
||||
<% } %>
|
||||
<div class="archive-content" id="content">
|
||||
<div class="archive-content-data">
|
||||
<%- partial('_widget/grouping',{data:years,keys:Object.keys(years).reverse()}) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(function () { $('.article-content').addClass('content-move'); })
|
||||
</script>
|
||||
|
|
@ -1,34 +1,23 @@
|
|||
<%- partial('_partial/header',{name:'categories'}) %>
|
||||
<%- css('css/categories.css') %>
|
||||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<span>
|
||||
<img src="<%- theme.topIcon.categoriesIcon %>" alt="Q">
|
||||
</span>
|
||||
<h2>文章分类</h2>
|
||||
|
||||
<div class="categories">
|
||||
<%- partial('_widget/header_body',{message:theme.headers.categories.message,icon:theme.headers.categories.icon}) %>
|
||||
<div class="categories-content" id="content">
|
||||
<div class="categories-content-data">
|
||||
<div class="categories-class">
|
||||
<% site.categories.map(function(category,index){ %>
|
||||
<a class="categories-class-card" href="<%- url_for(category.path) %>"
|
||||
style="background-image: url('<%- theme.default_cover %>&id=<%- parseInt(Math.random()*(10000-1)+1) %>');"
|
||||
>
|
||||
<span class="categories-class-card-title"><%= category.name %></span>
|
||||
<div class="categories-class-card-number">
|
||||
<span>
|
||||
<span class="categories-length"><%= category.length %></span> 篇
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content">
|
||||
<div id="article" class="content">
|
||||
<ul class="onclickul">
|
||||
<% site.categories.map(function(category){ %>
|
||||
<li>
|
||||
<div class="link"><%= category.name %>
|
||||
<svg t="1602294178324" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4803" width="200" height="200">
|
||||
<path
|
||||
d="M454.188 785.022c-145.192-150.177-290.378-300.353-435.422-450.526-59.842-61.836 37.327-154.021 97.313-91.899 129.23 133.647 258.318 267.296 387.548 400.868 133.646-134.287 267.436-268.574 401.083-402.934 60.84-61.123 158.011 31.060 97.244 91.971-150.105 150.89-300.279 301.703-450.454 452.521-24.933 24.934-72.666 25.575-97.311 0z"
|
||||
p-id="4804" fill="#3C4858"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<ul class="submenu">
|
||||
<% category.posts.map(function(post){ %>
|
||||
<li><a href="<%- config.root %><%- post.path %>"> <%- post.title %></a></li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script>$(function () { $('.article-content').addClass('content-move'); var Accordion = function (el, multiple) { this.el = el || {}; this.multiple = multiple || false; var links = this.el.find('.link'); links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown) }; Accordion.prototype.dropdown = function (e) { var $el = e.data.el; $this = $(this); $next = $this.next(); $svg = $this.children()[0]; $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open') } }; var accordion = new Accordion($('.onclickul'), false) });</script>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
<%- css('css/home.css') %>
|
||||
<%- partial('_partial/header',{name:'home'}) %>
|
||||
<%- partial('_partial/home') %>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<%- partial('_partial/head') %>
|
||||
</head>
|
||||
|
|
@ -9,5 +8,5 @@
|
|||
<%- body %>
|
||||
<%- partial('_partial/foot') %>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,43 +1,32 @@
|
|||
<%- css('css/links.css') %>
|
||||
<%- partial('_partial/header',{name:'links'}) %>
|
||||
<%- css('css/atom-one-dark.css') %>
|
||||
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<span>
|
||||
<img src="<%- theme.topIcon.linksIcon %>" alt="Q">
|
||||
</span>
|
||||
<h2>
|
||||
<%- page.title %>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-content">
|
||||
<div class="content">
|
||||
<% for(const each of theme.linksList || []) { %>
|
||||
<div class="oneLink">
|
||||
<a href="<%- each.link %>">
|
||||
<div class="lcen">
|
||||
<div class="UserLinkImg">
|
||||
<img src="<%- each.image %>" alt="Quiet">
|
||||
</div>
|
||||
<div class="LinkRight">
|
||||
<h1>
|
||||
<%- each.title %>
|
||||
</h1>
|
||||
<span>
|
||||
<%- each.intro %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<%- partial('_partial/header',{name:'links'}) %>
|
||||
<div class="links">
|
||||
<%- partial('_widget/header_body',{message:theme.headers.links.message,icon:theme.headers.links.icon}) %>
|
||||
<div class="links-content" id="content">
|
||||
<div class="links-content-data">
|
||||
<% for(const each of theme.linksList || []) { %>
|
||||
<div class="links-content-data-item">
|
||||
<a href="<%- each.link %>">
|
||||
<div class="card">
|
||||
<div class="user-link-image">
|
||||
<img src="<%- each.image %>" alt="Quiet">
|
||||
</div>
|
||||
<div class="user-link-info">
|
||||
<h1>
|
||||
<%- each.title %>
|
||||
</h1>
|
||||
<span>
|
||||
<%- each.intro %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<%- css('css/page_cente.css') %>
|
||||
<div id="article" class="info">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>$(function () { $('.links-content').addClass('content-move'); })</script>
|
||||
<% } %>
|
||||
<div id="article" class="links-content-data-info">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
</div>
|
||||
<div id="<%- page.comments ? 'gitalk-container' : ''%>"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<%- css('css/page.css') %>
|
||||
<%- css('css/page_cente.css') %>
|
||||
<%- css('css/atom-one-dark.css') %>
|
||||
<%- partial('_partial/header',{name:'post'}) %>
|
||||
<%- partial('_partial/post_head') %>
|
||||
<%- partial('_partial/post_centent') %>
|
||||
<%- partial('_partial/post_pn') %>
|
||||
<div class="post">
|
||||
<%- partial('_partial/post_head') %>
|
||||
<%- partial('_partial/post_centent') %>
|
||||
<%- partial('_partial/post_paging') %>
|
||||
</div>
|
||||
|
|
@ -1,31 +1,27 @@
|
|||
<%- css('css/tag.css') %>
|
||||
|
||||
<%- partial('_partial/header',{name:'tags'}) %>
|
||||
<%
|
||||
var date_cursor = 'xxx'
|
||||
let date_cursor = 'xxx'
|
||||
page.title = "标签:" + page.tag
|
||||
%>
|
||||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<span>
|
||||
<img src="<%- theme.topIcon.tagIcon %>" alt="Q">
|
||||
</span>
|
||||
<h2> <%- page.tag %> </h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content">
|
||||
<div id="article" class="content">
|
||||
<div class="list-group">
|
||||
<% page.posts.each(function (post) { %>
|
||||
<% if(date(post.date, "YYYY") != date_cursor) { %>
|
||||
<% date_cursor = date(post.date, "YYYY") %>
|
||||
<p class="h5"><%= date_cursor %></p>
|
||||
<% } %>
|
||||
<a href="<%- url_for(post.path) %>" class="list-group-item list-group-item-action">
|
||||
<span class="archive-post-title"><%= post.title %></span>
|
||||
<time style="float: right;"><%- date(post.date, "MM-DD") %></time>
|
||||
</a>
|
||||
<% }) %>
|
||||
|
||||
<%
|
||||
let years = {};
|
||||
page.posts.each(function (post) {
|
||||
if(date(post.date, "YYYY") != date_cursor) {
|
||||
date_cursor = date(post.date, "YYYY")
|
||||
if(years[date_cursor] === undefined){
|
||||
years[date_cursor] = []
|
||||
}
|
||||
}
|
||||
years[date_cursor].push(post);
|
||||
})
|
||||
%>
|
||||
<div class="tag">
|
||||
<%- partial('_widget/header_body',{message:"文章标签："+page.tag,icon:theme.headers.tags.icon}) %>
|
||||
<div class="tag-content" id="content">
|
||||
<div class="tag-content-data">
|
||||
<%- partial('_widget/grouping',{data:years,keys:Object.keys(years).reverse()}) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>$(function () { $('.article-content').addClass('content-move') });</script>
|
||||
|
|
@ -1,38 +1,18 @@
|
|||
<%- css('css/tags.css') %>
|
||||
|
||||
<%- partial('_partial/header',{name:'tags'}) %>
|
||||
<%
|
||||
page.title = "标签"
|
||||
%>
|
||||
<div class="header-bg">
|
||||
<div class="bg-content">
|
||||
<span>
|
||||
<img src="<%- theme.topIcon.tagIcon %>" alt="Q">
|
||||
</span>
|
||||
<h2>
|
||||
<%- page.title %>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags-content">
|
||||
<div id="tags" class="content">
|
||||
<div class="tags-list">
|
||||
<div class="tags">
|
||||
<%- partial('_widget/header_body',{message:theme.headers.tags.message,icon:theme.headers.tags.icon}) %>
|
||||
<div class="tags-content" id="content">
|
||||
<div class="tags-content-data">
|
||||
<h2><%- site.tags.length %> Tags In Total</h2>
|
||||
<% site.tags.map(function(tag,i){ %>
|
||||
<%
|
||||
function getRandomColor() {
|
||||
return '#' +
|
||||
(function(color) {
|
||||
return(color += '0123401234abcabc' [Math.floor(Math.random() * 16)]) &&
|
||||
(color.length == 6) ? color : arguments.callee(color);
|
||||
})('');
|
||||
}
|
||||
%>
|
||||
<% if(i< theme.tagsNum ) {%>
|
||||
<a href="<%= tag.name %>" class="<%= tag.name %>" value="<%= tag.name %>">
|
||||
<span style='color: <%= getRandomColor() %>'><%= tag.name %> <i><%= tag.length %></i> </span>
|
||||
</a>
|
||||
<%}%>
|
||||
<% }) %>
|
||||
<a href="<%- url_for(tag.path) %>" class="tag-<%= tag.name %>" value="<%= tag.name %>">
|
||||
<span># <%= tag.name %> <i><%= tag.length %></i> </span>
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>$(function () { $('.tags-content').addClass('content-move'); })</script>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "hexo-theme-quiet",
|
||||
"version": "1.1.0",
|
||||
"description": "🔥A simple, easy to read flat hexo theme. ",
|
||||
"main": "package.json",
|
||||
"scripts": {
|
||||
"test": "echo test"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/79E/hexo-theme-quiet.git"
|
||||
},
|
||||
"keywords": [
|
||||
"hexo",
|
||||
"theme",
|
||||
"quiet"
|
||||
],
|
||||
"author": "Joey (https://github.com/79E/)",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/79E/hexo-theme-quiet/issues"
|
||||
},
|
||||
"homepage": "https://79e.cc",
|
||||
"devDependencies": {
|
||||
"hexo": "^6.0.0",
|
||||
"hexo-renderer-ejs": "^2.0.0",
|
||||
"hexo-renderer-less": "^4.0.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1 +0,0 @@
|
|||
.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;margin:0 auto;}.header-bg .bg-content h1{display:flex;margin-top:40px;font-size:30px;font-weight:500;color:#12183a;flex:1;flex-direction:column;}.header-bg .bg-content h1 span{display:flex;font-size:15px;margin-top:10px;color:#898F9F;}.header-bg .bg-content img{display:flex;flex:0;width:88px;height:88px;border-radius:50%;margin-top:30px;margin-right:30px;}@media screen and (min-width:600px){.article-content .content{display:flex;width:100%;max-width:800px;padding:64px 40px;font-size:18px;flex-direction:column;}.article-content{display:flex;max-width:1160px;margin:0 auto;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}}@media screen and (max-width:600px){.article-content{display:flex;max-width:1160px;margin:0 auto;padding:64px 16px;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column;}}.article-content img{display:flex;width:100%;height:100%;}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out;}.article-content .content p{font-size:1.55rem;margin-bottom:20px;font-weight:500;line-height:1.2;margin-top:20px;}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;flex-direction:column;margin:0 auto;align-items:center;text-align:center;}.header-bg .bg-content h2{margin:32px 0 24px;font-size:27px;font-weight:normal;color:#12183a;}.header-bg .bg-content span{display:inline-block;width:56px;height:56px;position:relative;top:5px;}.header-bg .bg-content span img{width:56px;height:56px;}@media screen and (min-width:600px){.article-content .content{display:flex;width:100%;max-width:800px;padding:64px 40px;font-size:18px;flex-direction:column;}.article-content{display:flex;max-width:1160px;margin:0 auto;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}}@media screen and (max-width:600px){.article-content{display:flex;max-width:1160px;margin:0 auto;padding:64px 16px;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column;}}.article-content img{display:flex;width:100%;height:100%;}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out;}.article-content .content p{font-size:1.55rem;margin-bottom:20px;font-weight:500;line-height:1.2;margin-top:20px;}.article-content .content a{display:flex;text-decoration:none;color:#3C4858;font-size:17px;padding:20px;}.article-content .content a span{flex-grow:1;}.article-content .content a time{white-space:nowrap;}.article-content .content a:hover{background:#F8F9FB;color:#4CA5CE;border-radius:6px;}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;flex-direction:column;margin:0 auto;align-items:center;text-align:center;}.header-bg .bg-content h2{margin:32px 0 24px;font-size:27px;font-weight:normal;color:#12183a;}.header-bg .bg-content span{display:inline-block;width:54px;height:54px;position:relative;top:5px;}.header-bg .bg-content span img{width:54px;height:54px;}@media screen and (min-width:600px){.article-content .content{display:flex;width:100%;max-width:800px;padding:64px 40px;font-size:18px;flex-direction:column;}.article-content{display:flex;max-width:1160px;margin:0 auto;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}}@media screen and (max-width:600px){.article-content{display:flex;max-width:1160px;margin:0 auto;padding:64px 16px;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column;}}.article-content img{display:flex;width:100%;height:100%;}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out;}.article-content .content p{font-size:1.55rem;margin-bottom:20px;font-weight:500;line-height:1.2;margin-top:20px;}.article-content .content a{display:flex;text-decoration:none;color:#3C4858;font-size:17px;padding:20px;}.article-content .content a span{flex-grow:1;}.article-content .content a time{white-space:nowrap;}.article-content .content a:hover{background:#F8F9FB;color:#4CA5CE;border-radius:6px;}.article-content .content ul{list-style-type:none;color:#3C4858;}.link{display:flex;padding-bottom:20px;padding-top:20px;font-size:1.2em;}.link>svg{width:1em;height:1em;align-items:flex-end;margin-left:auto;color:#3C4858;transition:all .5s ease-in;}.submenu{display:none;}.onclickul li.open svg{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all .5s ease-in;}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.footer{display:flex;padding:0 calc((100% - 1160px)/ 2);height:80px}.footer .Copyright{display:flex;margin-left:18px;color:#898fa0;font-size:14px;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1}.footer .contact{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1}.footer .contact a{display:flex;margin-left:10px;margin-right:10px;width:30px;height:30px;color:#898fa0;justify-content:center;align-items:center}.footer .contact a img{width:100%;height:100%}@media screen and (max-width:600px){.footer{padding:2em;flex-direction:column-reverse}.footer .Copyright{margin:auto}.footer .contact{margin:auto;flex-wrap:wrap}.footer .contact a{margin-bottom:10px}}
|
||||
|
|
@ -1 +0,0 @@
|
|||
*{margin:0;padding:0;}.header{position:fixed;width:100%;z-index:199;}.header-top{display:flex;height:100px;background:rgba(255,255,255,0.98);z-index:99;padding:0 calc((100% - 1160px)/2);}.header-move1{height:72px;transition:height .8s ease-in-out;box-shadow:0 10px 40px 0 rgba(50,50,50,0.08);}.header-move2{height:100px;transition:height .8s ease-in-out;}.header .header-top .h-left{display:flex;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1;}.header .header-top .h-left a{margin-left:18px;width:36px;height:36px;background-size:100% 100%;display:flex;justify-content:center;align-items:center;}.header .header-top .h-left a img{width:36px;height:36px;}.header .header-top .h-right{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;}@media screen and (min-width:600px){.header .header-top .h-right-close{display:none;}}@media screen and (max-width:600px){.header .header-top .h-right{display:none;}.header .header-top .h-right-close{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;margin-right:1em;}.header .header-top .h-right-close svg{cursor:pointer;width:2em;height:2em;}}.header .header-top .h-right ul{display:flex;align-items:center;font-size:16px;font-weight:400;text-transform:uppercase;list-style:none;}.header .header-top .h-right ul li{padding:0 18px;white-space:nowrap}.header .header-top .h-right ul li a{color:#898fa0;text-decoration:none;}.header .header-top .h-right ul li a:hover{color:#12183A;}.header .header-top .h-right ul li .dot{display:inline-block;width:5px;height:5px;border-radius:50%;position:relative;top:-12px;left:2px;}.header .header-top .h-right .select a{color:#12183A;}.header .header-top .h-right .select .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#006AFF;position:relative;top:-12px;left:2px;}
|
||||
|
|
@ -1 +0,0 @@
|
|||
*{margin:0;padding:0;}.header-bg{width:100%;height:466px;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;}.header-bg .bg-content span{display:flex;height:152px;font-size:36px;line-height:48px;color:#12183A;align-items:center;}.header-bg .bg-content span img{width:56px;height:56px;}.header-bg .bg-content h2{display:flex;margin-top:4px;font-size:16px;font-weight:normal;line-height:22px;letter-spacing:2px;text-transform:uppercase;text-align:center;color:#12183A;}.main{display:flex;flex-grow:1;flex-basis:auto;flex-direction:column;margin-top:0px;}.main .feed{display:flex;max-width:100%;padding:0 calc((100% - 1200px)/2) 40px;flex-wrap:wrap;justify-content:center;align-items:stretch;}.move{margin-top:-84px;transition:margin-top .8s ease-in-out;}@media screen and (min-width:600px){.main .feed .feed-display{display:flex;flex-grow:1;flex-shrink:1;flex-basis:360px;position:relative;min-height:420px;margin:20px;background-color:#FFF;border-radius:10px;overflow:hidden;box-shadow:0 20px 40px 0 rgba(50,50,50,0.08);flex-direction:column;position:relative;top:0px;transition:ease-in-out;-moz-transition:top .5s;-webkit-transition:top .5s;-o-transition:top .5s;}}@media screen and (max-width:600px){.main .feed .feed-display{display:flex;flex-grow:1;flex-shrink:1;position:relative;min-height:420px;margin:20px;background-color:#FFF;border-radius:10px;overflow:hidden;box-shadow:0 20px 40px 0 rgba(50,50,50,0.08);flex-direction:column;position:relative;top:0px;transition:ease-in-out;-moz-transition:top .5s;-webkit-transition:top .5s;-o-transition:top .5s;}}.main .feed .feed-display:hover{cursor:pointer;top:-15px;}.main .feed .feed-display a{text-decoration:none;display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;}.main .feed .feed-display a .feed-title{padding:30px 24px;display:flex;flex-grow:1;font-size:20px;font-weight:500;line-height:36px;color:#12183a;}.main .feed .feed-display a img{width:100%;height:200px;margin-bottom:30px;background:linear-gradient(to top,#f1f5fb,#f9fcff);object-fit:cover;}.feed-meat{display:flex;padding:8px 24px 24px 16px;justify-content:space-between;}.feed-meat .meat-info{display:flex;flex-direction:column;}.feed-meat .meat-info .info-auth{display:flex;z-index:3;align-content:flex-start;align-items:center;}.feed-meat .meat-info .info-auth a{left:-8px;padding:2px 8px;font-size:14px;line-height:20px;color:#898FA0;background:transparent;border-radius:12px;text-decoration:none;outline:0;cursor:pointer;}.feed-meat .meat-info .info-data{margin:8px 0 0 8px;font-size:12px;line-height:18px;color:#12183A;}.feed-meat .meat-type{width:32px;height:32px;margin-top:10px;background:url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg')no-repeat;}.change-page{height:40px;display:flex;padding:0 calc((100% - 1160px)/2);margin-bottom:20px;color:#12183ab7;}.change-page .p-page{display:flex;flex-basis:0;justify-content:flex-start;align-items:center;flex-grow:1;}.change-page .p-page a{color:#12183ab7;text-decoration:none;}.change-page .p-page a .previous{width:120px;height:40px;text-align:center;line-height:40px;border-radius:10px;color:#898FA0;margin-left:18px;box-shadow:0 20px 40px 0 rgba(50,50,50,0.1);transition:ease-in-out;-moz-transition:margin-top .5s;-webkit-transition:margin-top .5s;-o-transition:margin-top .5s;}.change-page .n-page{display:flex;flex-basis:0;justify-content:flex-end;align-items:center;flex-grow:1;}.change-page .n-page a{color:#12183ab7;text-decoration:none;}.change-page .n-page a .next{width:120px;height:40px;text-align:center;line-height:40px;border-radius:10px;margin-right:18px;color:#898FA0;box-shadow:0 20px 40px 0 rgba(50,50,50,0.1);transition:ease-in-out;-moz-transition:margin-top .5s;-webkit-transition:margin-top .5s;-o-transition:margin-top .5s;}.change-page .n-page a .next:hover{margin-top:-15px;cursor:pointer;}.change-page .p-page a .previous:hover{margin-top:-15px;cursor:pointer;}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
@import "./public/color";
|
||||
@import "./public/header_background";
|
||||
@import "./public/content";
|
||||
@import "./public/article_cente";
|
||||
|
||||
@import "./plugin/fancybox.css";
|
||||
@import "./plugin/gitalk.css";
|
||||
|
||||
@import "./widget/food";
|
||||
@import "./widget/header";
|
||||
@import "./widget/header_body";
|
||||
@import "./widget/grouping";
|
||||
|
||||
@import "./highlight/atom-one-dark";
|
||||
|
||||
@import "./pages/about";
|
||||
@import "./pages/archive";
|
||||
@import "./pages/categories";
|
||||
@import "./pages/home";
|
||||
@import "./pages/links";
|
||||
@import "./pages/post";
|
||||
@import "./pages/tag";
|
||||
@import "./pages/tags";
|
||||
|
||||
|
||||
.content-move{
|
||||
.content-move-style();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;flex-direction:column;margin:0 auto;align-items:center;}.header-bg .bg-content h2{margin:32px 0 24px;font-size:27px;font-weight:normal;color:#12183a;}.header-bg .bg-content span{display:inline-block;width:56px;height:56px;position:relative;top:3px;}.header-bg .bg-content span img{width:56px;height:56px;}@media screen and (min-width:600px){.links-content .content{display:flex;max-width:900px;padding:64px 40px;font-size:18px;justify-content:space-between;flex-wrap:wrap;}.links-content{display:flex;max-width:1160px;margin:0 auto;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}}@media screen and (max-width:600px){.links-content{display:flex;max-width:1160px;margin:0 auto;padding:64px 16px;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}.links-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column;}}.links-content img{display:flex;width:100%;height:100%;}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out;}.oneLink{display:flex;padding:20px;margin-right:10px;border-radius:10px;margin-bottom:50px;background:#ffffff;position:relative;top:0;transition:ease-in-out;-moz-transition:all .4s;-webkit-transition:all .4s;-o-transition:all .4s;}.oneLink:hover{background:#F8F9FB;top:-10px;box-shadow:0 10px 10px 0 rgba(50,50,50,0.1);}.oneLink a{width:100%;height:100%;text-decoration:none;color:#333333;}.oneLink .lcen{display:flex;}.oneLink .lcen .UserLinkImg{display:flex;width:48px;height:48px;}.oneLink .lcen .UserLinkImg img{border-radius:50%;}.LinkRight{display:flex;flex-direction:column;min-width:166px;padding-left:10px;padding-top:6px;}.LinkRight h1{max-width:170px;color:#3C4858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:16px;}.LinkRight span{max-width:170px;color:#718096;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}.info{width:100%;margin-top:20px;}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.header-bg{position:relative;display:flex;width:100%;background:linear-gradient(0deg,#f1f5fb,#f9fcff);flex-shrink:0}.bg-content-img{height:100%;background:url(https://api.ixiaowai.cn/gqapi/gqapi.php);background-size:cover}.bg-content-img .bg-content h1{z-index:2;color:#fff!important}.bg-content-img .bg-content .article-info .article-author .icon,.bg-content-img .bg-content .article-info .article-author p,.bg-content-img .bg-content .article-info .article-author span a{position:relative;z-index:4!important;color:#fff!important}.bg-content-img .bg-content .tag li{z-index:4!important;background:#fff!important;color:#fff}.bg-content-img:before{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:url(../image/pattern.png);background-repeat:repeat;content:""}.header-bg .bg-content{display:flex;margin:0 auto;padding:196px 40px 160px;flex-basis:721px;flex-direction:column}.header-bg .bg-content .tag{display:flex;list-style:none;flex-wrap:wrap}.header-bg .bg-content .tag li{display:flex;margin-top:20px;margin-right:16px;padding:4px 12px;border-radius:15px;background:rgba(18,24,58,.06);line-height:20px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:ease-in-out;flex-grow:0}.header-bg .bg-content .tag li:hover{background:#bec8d3}.header-bg .bg-content .tag li a{color:#12183a;text-decoration:none;font-weight:600;font-size:12px}.header-bg .bg-content h1{margin:32px 0 24px;color:#12183a;font-weight:500;font-size:30px;line-height:1.6}.header-bg .bg-content .article-info,.header-bg .bg-content .article-info .article-author{display:flex}.header-bg .bg-content .article-info .article-author span{margin-left:8px;color:#12183a;font-weight:500;font-size:15px}.header-bg .bg-content .article-info .article-author span a{color:#12183a;text-decoration:none;-webkit-transition:color .5s;-moz-transition:color .5s;-o-transition:color .5s;transition:ease-in-out}.header-bg .bg-content .article-info .article-author span a:hover{color:#006af7}.header-bg .bg-content .article-info .article-author p{margin-left:30px;color:#12183a;font-size:14px}.article-content img{display:flex;width:100%;height:100%}@media screen and (min-width:600px){.article-content .content{display:flex;padding:64px 40px;max-width:800px;font-size:18px;flex-direction:column}.article-content{position:relative;z-index:2;display:flex;margin:0 auto;max-width:1160px;border-radius:10px;background:#fff;flex-direction:column;align-items:center}}@media screen and (max-width:600px){.article-content{display:flex;margin:0 auto;padding:64px 16px;max-width:1160px;border-radius:10px;background:#fff;flex-direction:column;align-items:center}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column}}.content-move{position:relative;z-index:100;margin-top:-64px;transition:margin-top .8s ease-in-out}.Last-Next{display:flex;margin:0 auto 2em;max-width:980px;background:hsla(0,0%,100%,.8)}.Last-Next a{color:#12183a;text-decoration:none}.Last-Next a,.Last-Next a .last{display:flex;flex-grow:1;flex-basis:0}.Last-Next a .last{height:150px;border-radius:10px;background-size:100% 100%;opacity:.4;cursor:pointer;transition:all .5s ease-in-out;align-content:flex-start;justify-content:center;flex-direction:column}.Last-Next a .last:hover{margin-top:-10px;box-shadow:0 10px 40px 0 rgba(50,50,50,.1);opacity:.7}.Last-Next a .last span,p{margin-right:10px;margin-left:10px;font-size:90%;line-height:1.6}.Last-Next a .last p{font-size:16px}.Last-Next a .next{display:flex;height:150px;border-radius:10px;background-size:100% 100%;opacity:.4;cursor:pointer;transition:all .5s ease-in-out;align-content:flex-end;flex-grow:1;justify-content:center;flex-direction:column;align-items:flex-end;flex-basis:0}.Last-Next a .next:hover{margin-top:-10px;box-shadow:0 10px 40px 0 rgba(50,50,50,.1);opacity:.7}.Last-Next a .next span,p{margin-right:10px;margin-left:10px;font-size:90%;line-height:1.6}.Last-Next a .next p{font-size:16px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
#article h1{font-size:32px;font-weight:900;padding-bottom:10px;border-bottom:2px solid #e06c75;}#article h1,#article h2{line-height:40px;margin:20px 0 15px;}#article h2{font-size:25px;border-left:3px solid #73b1e0;padding-left:10px;}#article h3{font-size:20px;margin:15px 0 10px;}#article h4{font-size:19px;margin:15px 0 10px;}#article a{color:#e06c75;text-decoration:none;}#article a:hover{border-bottom:1px solid;}#article h1 a:hover{border-bottom:0;}#article code{border-radius:3px;}#article code li{list-style:none;}#article img{max-width:80%;height:auto;border-radius:5px;box-shadow:0 0 3px #c3c3c3;cursor:pointer;margin:0 auto;}#article pre{font-size:.85em;line-height:1.5em;}#article pre code{padding:20px;}#article p{margin-top:6px;line-height:1.5em;font-size:.95em;letter-spacing:.7px;}#article ol{padding:10px 30px;}#article ol li{margin-left:15px;padding:7px;}#article table{width:100%;border:0;border-collapse:collapse;border-spacing:0;line-height:1.2em;border-radius:8px;box-shadow:0 0 2px #d4d4d4;word-wrap:break-word;table-layout:fixed;margin:20px 0 15px;}#article thead{text-indent:1em;}#article thead tr{height:3em;}#article table th{background:#73b1e0;font-weight:800;font-size:18px;text-align:left;line-height:35px;color:#fff;}#article tbody tr{line-height:2.5em;}#article table tr:nth-child(odd){background:hsla(0,0%,96.5%,.51);}#article table td:hover,#article table tr:hover{background:#e8e9ea;cursor:pointer;}#article table tr:first-child th:first-child{border-top-left-radius:3px;}#article table tr:first-child th:last-child{border-top-right-radius:3px;}#article table tr:last-child td:first-child{border-bottom-left-radius:3px;}#article table tr:last-child td:last-child{border-bottom-right-radius:3px;}#article ul{margin:5px 0;}#article ul li{list-style:none;margin:10px 16px;}#article ul li:before{content:"\2022";color:#006aff;float:left;margin-right:10px;line-height:31px;font-size:18px;font-weight:500;}#article blockquote{background:#fafafa;border-left:5px solid #e0e2e5;color:#aaa;margin-top:10px;margin-bottom:10px;font-weight:400;text-indent:1em;font-size:1em;padding:10px;}#article p code,#article ul li code{background:#F3F4F4;color:#f47466;font-size:1em;margin:0 3px;padding:0 10px;}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
.about{
|
||||
&-header-background{
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(to top, #f1f5fb, #f9fcff);
|
||||
&-content{
|
||||
display: flex;
|
||||
flex-basis: 721px;
|
||||
padding: 196px 40px 160px;
|
||||
margin: 0 auto;
|
||||
h1 {
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #12183a;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
span {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
color: #898F9F;
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: flex;
|
||||
flex: 0;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
margin-top: 30px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
.content-style();
|
||||
&-info {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 60px 150px;
|
||||
transition: all 0.4s ease-in-out;
|
||||
p {
|
||||
font-size: 1.55rem;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.about{
|
||||
&-content {
|
||||
&-info {
|
||||
padding: 40px 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.about{
|
||||
&-content {
|
||||
&-info {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.archive{
|
||||
&-content{
|
||||
.content-style();
|
||||
&-data{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
.categories{
|
||||
&-content{
|
||||
.content-style();
|
||||
&-data {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
max-width: 800px;
|
||||
padding: 64px 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-class {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
&-card{
|
||||
margin: 10px;
|
||||
flex: 1;
|
||||
flex-basis: 300px;
|
||||
height: 100px;
|
||||
padding: 20px 30px 4px 30px;
|
||||
border-radius: 10px;
|
||||
background-size: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: all .4s ease-in-out;
|
||||
text-decoration:none;
|
||||
&:hover{
|
||||
top:-10px;
|
||||
box-shadow: 4px 6px 14px #ddd;
|
||||
}
|
||||
&-title{
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-number{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.categories-length{
|
||||
position: relative;
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
font-style:oblique;
|
||||
font-weight: bold;
|
||||
}
|
||||
span{
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
font-style:oblique;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../image/pattern.png);
|
||||
background-repeat: repeat;
|
||||
content: ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.article-content {
|
||||
padding: 64px 16px;
|
||||
.content {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.home{
|
||||
.main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
margin-top: 0px;
|
||||
.feed {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
padding: 0 calc((100% - 1200px)/2) 40px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
&-display {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
position: relative;
|
||||
min-height: 420px;
|
||||
margin: 20px;
|
||||
background-color: #FFF;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px 0 rgba(50,50,50,0.08);
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
transition: ease-in-out;
|
||||
-moz-transition: top .5s;
|
||||
-webkit-transition: top .5s;
|
||||
-o-transition: top .5s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
top: -15px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
.feed-title {
|
||||
padding: 30px 24px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
color: @textColorTheme;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 30px;
|
||||
background: @headerBackgroundColor;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-meat {
|
||||
display: flex;
|
||||
padding: 8px 24px 24px 16px;
|
||||
justify-content: space-between;
|
||||
.meat-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.info-auth {
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
align-content: flex-start;
|
||||
align-items: center;
|
||||
a {
|
||||
left: -8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #898FA0;
|
||||
background: transparent;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.info-data {
|
||||
margin: 8px 0 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: @textColorTheme;
|
||||
}
|
||||
}
|
||||
.meat-type {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 10px;
|
||||
background: url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.change-page {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
padding: 0 calc((100% - 1160px)/2);
|
||||
margin-bottom: 20px;
|
||||
color: @textColorTheme;
|
||||
.p-page {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
a {
|
||||
color: @textColorTheme;
|
||||
text-decoration: none;
|
||||
.previous {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-radius: 10px;
|
||||
color: #898FA0;
|
||||
margin-left: 18px;
|
||||
box-shadow: 0 20px 40px 0 rgba(50,50,50,0.1);
|
||||
transition: ease-in-out;
|
||||
-moz-transition: margin-top .5s;
|
||||
-webkit-transition: margin-top .5s;
|
||||
-o-transition: margin-top .5s;
|
||||
}
|
||||
.previous:hover {
|
||||
margin-top: -15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-page {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
a {
|
||||
color: @textColorTheme;
|
||||
text-decoration: none;
|
||||
.next {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-radius: 10px;
|
||||
margin-right: 18px;
|
||||
color: #898FA0;
|
||||
box-shadow: 0 20px 40px 0 rgba(50,50,50,0.1);
|
||||
transition: ease-in-out;
|
||||
-moz-transition: margin-top .5s;
|
||||
-webkit-transition: margin-top .5s;
|
||||
-o-transition: margin-top .5s;
|
||||
&:hover {
|
||||
margin-top: -15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width:600px) {
|
||||
.home{
|
||||
.main {
|
||||
.feed {
|
||||
&-display {
|
||||
flex-basis: 360px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
.links{
|
||||
&-content{
|
||||
.content-style();
|
||||
&-data {
|
||||
display: flex;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 64px 40px;
|
||||
font-size: 18px;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-item{
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 50px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #F8F9FB;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: ease-in-out;
|
||||
-moz-transition: all .4s;
|
||||
-webkit-transition: all .4s;
|
||||
-o-transition: all .4s;
|
||||
&:hover {
|
||||
background: #F8F9FB;
|
||||
top: -10px;
|
||||
box-shadow: 0 10px 10px 0 rgba(50,50,50,0.1);
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: #333333;
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
.user-link-image {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.user-link-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 166px;
|
||||
padding-left: 10px;
|
||||
padding-top: 6px;
|
||||
h1 {
|
||||
max-width: 170px;
|
||||
color: #3C4858;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
span {
|
||||
max-width: 170px;
|
||||
color: #718096;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
.post{
|
||||
&-header-background{
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg,#f1f5fb,#f9fcff);
|
||||
flex-shrink: 0;
|
||||
&-content{
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 196px 40px 160px;
|
||||
flex-basis: 721px;
|
||||
flex-direction: column;
|
||||
h1 {
|
||||
margin: 32px 0 24px;
|
||||
color: #12183a;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.post-header-tag{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
z-index: 4!important;
|
||||
background: #fff!important;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-right: 16px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 15px;
|
||||
background: rgba(18,24,58,.06);
|
||||
line-height: 20px;
|
||||
-webkit-transition: background .5s;
|
||||
-moz-transition: background .5s;
|
||||
-o-transition: background .5s;
|
||||
transition: ease-in-out;
|
||||
flex-grow: 0;
|
||||
&:hover {
|
||||
background: #bec8d3 !important;
|
||||
}
|
||||
a{
|
||||
position: relative;
|
||||
z-index: 4 !important;
|
||||
color: #333333 ;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .5s;
|
||||
-moz-transition: color .5s;
|
||||
-o-transition: color .5s;
|
||||
transition: ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-header-info{
|
||||
display: flex;
|
||||
&-author{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-left: 8px;
|
||||
color: #12183a;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
a {
|
||||
color: #12183a;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
color: #006af7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #12183a;
|
||||
font-size: 14px
|
||||
}
|
||||
&-text{
|
||||
display: block;
|
||||
margin-right: 15px;
|
||||
}
|
||||
&-categories{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a{
|
||||
display: block;
|
||||
border: 1px solid #12183a;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
color: #12183a;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
border: 1px solid #409EFF;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-header-img{
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
h1 {
|
||||
z-index: 2;
|
||||
color: #fff !important;
|
||||
}
|
||||
img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../image/pattern.png);
|
||||
background-repeat: repeat;
|
||||
content: ""
|
||||
}
|
||||
.post-header-info-author{
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
span{
|
||||
a{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
p{
|
||||
color: #fff !important;
|
||||
}
|
||||
&-categories{
|
||||
a{
|
||||
border: 1px solid #f1f5fb !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-header-color{
|
||||
background: linear-gradient(0deg,#f1f5fb,#f9fcff) !important;
|
||||
}
|
||||
&-content{
|
||||
.content-style();
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&-info{
|
||||
margin: 60px 80px;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
&-paging{
|
||||
display: flex;
|
||||
margin: 0 auto 2em;
|
||||
max-width: 980px;
|
||||
background: hsla(0,0%,100%,.8);
|
||||
a,a .post-paging-last {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0
|
||||
}
|
||||
p {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 90%;
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
}
|
||||
a {
|
||||
color: #12183a;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
.post-paging-last{
|
||||
height: 150px;
|
||||
border-radius: 10px;
|
||||
background-size: 100% 100%;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
transition: all .5s ease-in-out;
|
||||
align-content: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
&:hover {
|
||||
margin-top: -10px;
|
||||
box-shadow: 0 10px 40px 0 rgba(50,50,50,.1);
|
||||
opacity: .7;
|
||||
}
|
||||
span{
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 90%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
.post-paging-next {
|
||||
display: flex;
|
||||
height: 150px;
|
||||
border-radius: 10px;
|
||||
background-size: 100% 100%;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
transition: all .5s ease-in-out;
|
||||
align-content: flex-end;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
flex-basis: 0;
|
||||
&:hover {
|
||||
margin-top: -10px;
|
||||
box-shadow: 0 10px 40px 0 rgba(50,50,50,.1);
|
||||
opacity: .7;
|
||||
}
|
||||
span{
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 90%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.post{
|
||||
&-content{
|
||||
&-info{
|
||||
margin: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.post{
|
||||
&-content{
|
||||
&-info{
|
||||
margin: 40px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.tag{
|
||||
&-content{
|
||||
.content-style();
|
||||
&-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.tags{
|
||||
&-content {
|
||||
.content-style();
|
||||
&-data {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
max-width: 900px;
|
||||
padding: 64px 40px;
|
||||
font-size: 1rem;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.4s ease-in-out;
|
||||
h2{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
color: #424242;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
margin-right: 20px;
|
||||
&>span {
|
||||
background-color: rgba(96,125,139,.05);
|
||||
line-height: 2.4;
|
||||
transition: all .15s;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
color: #43576B;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
&:hover {
|
||||
top: -2px;
|
||||
background-color: #607d8b;
|
||||
color: #ffffff;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
&>i {
|
||||
text-align: center;
|
||||
color: #F56C6C;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.tags{
|
||||
&-content {
|
||||
&-data {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,165 @@
|
|||
#article{
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e06c75;
|
||||
a:hover {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
border-left: 3px solid #73b1e0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
h1,h2{
|
||||
line-height: 40px;
|
||||
margin: 20px 0 15px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
margin: 15px 0 10px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 19px;
|
||||
margin: 15px 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #e06c75;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
transition: all .3s ease-in-out;
|
||||
&:hover {
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
code {
|
||||
border-radius: 3px;
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
img {
|
||||
max-width: 90%;
|
||||
max-height: 400px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 3px #c3c3c3;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
pre {
|
||||
font-size: .85em;
|
||||
line-height: 1.5em;
|
||||
code {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 6px;
|
||||
line-height: 1.5em;
|
||||
font-size: .95em;
|
||||
letter-spacing: .7px;
|
||||
}
|
||||
ol {
|
||||
padding: 10px 30px;
|
||||
li {
|
||||
margin-left: 15px;
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 5px 0;
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 10px 16px;
|
||||
&:before {
|
||||
content: "\2022";
|
||||
color: #006aff;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
line-height: 31px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
background: #fafafa;
|
||||
border-left: 5px solid #e0e2e5;
|
||||
color: #aaa;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
text-indent: 1em;
|
||||
font-size: 1em;
|
||||
padding: 10px;
|
||||
}
|
||||
p code,ul li code {
|
||||
background: #F3F4F4;
|
||||
color: #f47466;
|
||||
font-size: 1em;
|
||||
margin: 0 3px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
line-height: 1.2em;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 2px #d4d4d4;
|
||||
word-wrap: break-word;
|
||||
table-layout: fixed;
|
||||
margin: 20px 0 15px;
|
||||
td:hover, tr:hover {
|
||||
background: #e8e9ea;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr:first-child th:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
tr:first-child th:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
text-indent: 1em;
|
||||
tr {
|
||||
height: 3em;
|
||||
&:nth-child(odd) {
|
||||
background: hsla(0,0%,96.5%,.51);
|
||||
}
|
||||
}
|
||||
th {
|
||||
background: #73b1e0;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
line-height: 35px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr {
|
||||
line-height: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
// 定义颜色变量
|
||||
@textColorTheme: #12183A;
|
||||
@headerBackgroundColor:linear-gradient(to top,#f1f5fb,#f9fcff);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.content-style(){
|
||||
display: flex;
|
||||
max-width: 1160px;
|
||||
margin: 0 auto;
|
||||
margin-top: 0;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-move-style() {
|
||||
margin-top: -64px !important;
|
||||
transition: margin-top 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
.header-background(){
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
background: @headerBackgroundColor;
|
||||
height: 466px;
|
||||
}
|
||||
|
||||
.background-content(){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header-title-span(){
|
||||
display: flex;
|
||||
height: 152px;
|
||||
font-size: 36px;
|
||||
line-height: 48px;
|
||||
color: @textColorTheme;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-title-h2(){
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: @textColorTheme;
|
||||
}
|
||||
|
||||
.header-icon-img(@w : 56px,@h : 56px){
|
||||
width: @w;
|
||||
height: @h;
|
||||
}
|
||||
|
||||
.base-header-content-style(){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
h2 {
|
||||
.header-title-h2();
|
||||
}
|
||||
span {
|
||||
.header-title-span();
|
||||
img {
|
||||
.header-icon-img(56px,56px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;flex-direction:column;margin:0 auto;align-items:center;text-align:center;}.header-bg .bg-content h2{margin:32px 0 24px;font-size:27px;font-weight:normal;color:#12183a;}.header-bg .bg-content span{display:inline-block;width:56px;height:56px;position:relative;top:5px;}.header-bg .bg-content span img{width:56px;height:56px;}@media screen and (min-width:600px){.article-content .content{display:flex;width:100%;max-width:800px;padding:64px 40px;font-size:18px;flex-direction:column;}.article-content{display:flex;max-width:1160px;margin:0 auto;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}}@media screen and (max-width:600px){.article-content{display:flex;max-width:1160px;margin:0 auto;padding:64px 16px;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}.article-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column;}}.article-content img{display:flex;width:100%;height:100%;}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out;}.article-content .content p{font-size:1.55rem;margin-bottom:20px;font-weight:500;line-height:1.2;margin-top:20px;}.article-content .content a{display:flex;text-decoration:none;color:#3C4858;font-size:17px;padding:20px;}.article-content .content a span{flex-grow:1;}.article-content .content a time{white-space:nowrap;}.article-content .content a:hover{background:#F8F9FB;color:#4CA5CE;border-radius:6px;}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.header-bg{width:100%;display:flex;flex-shrink:0;background:linear-gradient(to top,#f1f5fb,#f9fcff);}.header-bg .bg-content{display:flex;flex-basis:721px;padding:196px 40px 160px;flex-direction:column;margin:0 auto;align-items:center;}.header-bg .bg-content h2{margin:32px 0 24px;font-size:27px;font-weight:normal;color:#12183a;}.header-bg .bg-content span{display:inline-block;width:56px;height:56px;position:relative;top:3px;}.header-bg .bg-content span img{width:56px;height:56px;}@media screen and (min-width:600px){.tags-content .content{display:flex;width:100%;max-width:1000px;padding:64px 40px;font-size:18px;flex-direction:column;}.tags-content{display:flex;max-width:1160px;margin:0 auto;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}}@media screen and (max-width:600px){.tags-content{display:flex;max-width:1160px;margin:0 auto;padding:64px 16px;background:rgb(255,255,255);border-radius:10px;flex-direction:column;align-items:center;}.tags-content .content{display:flex;width:100%;font-size:1.1em;flex-direction:column;}}.tags-content img{display:flex;width:100%;height:100%;}.content-move{margin-top:-64px;transition:margin-top .8s ease-in-out;}.tags-list{display:flex;flex-wrap:wrap;justify-content:space-between;justify-content:space-evenly;}.tags-content .content .tags-list a{display:flex;text-decoration:none;margin-right:10px;}.tags-content .content .tags-list a>span{padding:10px 20px;margin-bottom:15px;border-radius:10px;box-shadow:0 3px 5px rgba(0,0,0,.12);position:relative;top:0;color:#43576B;font-weight:500;}.tags-content .content .tags-list a>span>i{margin-left:6px;text-align:center;color:red;}.tags-content .content .tags-list a>span:hover{top:-2px;box-shadow:0 8px 10px rgba(0,0,0,.22);transition:all .3s ease-in-out;}.tags-page{display:flex;flex-grow:1;flex-basis:auto;flex-direction:column;margin-top:0px;margin-top:66px;}.one-page{display:flex;max-width:100%;padding:0 calc((100% - 1200px)/2) 40px;flex-wrap:wrap;justify-content:center;align-items:stretch;}.one-tags h3{font-size:1.5em;}.one-page .page{display:flex;flex-grow:1;flex-shrink:1;flex-basis:360px;position:relative;min-height:200px;max-height:200px;margin:20px;background-color:#FFF;border-radius:10px;overflow:hidden;box-shadow:0 20px 40px 0 rgba(50,50,50,0.08);flex-direction:column;position:relative;top:0px;}.one-page .page img{width:100%;height:auto;}.one-page .page p{background:rgba(114,114,114,0.63);position:absolute;top:72%;font-weight:200;font-size:40px;color:#ffffff;display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.footer {
|
||||
display: flex;
|
||||
padding: 0 calc((100% - 1160px)/ 2);
|
||||
height: 80px;
|
||||
.Copyright {
|
||||
display: flex;
|
||||
margin-left: 18px;
|
||||
color: #898fa0;
|
||||
font-size: 14px;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.contact {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
a {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #898fa0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.footer {
|
||||
padding: 2em;
|
||||
flex-direction: column-reverse;
|
||||
.Copyright {
|
||||
margin: auto;
|
||||
}
|
||||
.contact {
|
||||
margin: auto;
|
||||
flex-wrap: wrap;
|
||||
a {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.grouping-style(){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 800px;
|
||||
padding: 64px 40px;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.4s ease-in-out;
|
||||
p {
|
||||
font-size: 1.55rem;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: #3C4858;
|
||||
padding: 20px;
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:hover {
|
||||
background: #F8F9FB;
|
||||
color: #4CA5CE;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grouping{
|
||||
.grouping-style();
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.grouping{
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
padding: 50px 15px;
|
||||
font-size: 1rem;
|
||||
p {
|
||||
font-size: 1.50rem;
|
||||
}
|
||||
a {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 199;
|
||||
.header-top {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
background: rgba(255,255,255,0.98);
|
||||
z-index: 99;
|
||||
padding: 0 calc((100% - 1160px)/2);
|
||||
.h-left {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
a {
|
||||
margin-left: 18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.h-right {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
li {
|
||||
padding: 0 18px;
|
||||
white-space: nowrap;
|
||||
a {
|
||||
color: #898fa0;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #12183A;
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: -12px;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select{
|
||||
a {
|
||||
color: #12183A;
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #006AFF;
|
||||
position: relative;
|
||||
top: -12px;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-move1 {
|
||||
height: 72px;
|
||||
transition: all .8s ease-in-out;
|
||||
box-shadow: 0 10px 40px 0 rgba(50,50,50,0.08);
|
||||
}
|
||||
|
||||
.header-move2 {
|
||||
height: 100px;
|
||||
transition: all .8s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width:600px) {
|
||||
.header {
|
||||
.header-top{
|
||||
.h-right-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.header{
|
||||
.header-top{
|
||||
.h-right {
|
||||
display: none;
|
||||
}
|
||||
.h-right-close {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
margin-right: 1em;
|
||||
svg {
|
||||
cursor: pointer;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.header-body-background{
|
||||
.header-background();
|
||||
&-content{
|
||||
.base-header-content-style();
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,13 @@
|
|||
$(document).ready(function() {
|
||||
$('#article img').each(function() {
|
||||
if ($(this).parent().hasClass('fancybox')) return;
|
||||
if ($(this).hasClass('nofancybox')) return;
|
||||
var alt = this.alt;
|
||||
$(this).wrap(
|
||||
'<a href="' + ($(this).attr('data-src') == null ? this.src :
|
||||
$(this).attr('data-src')) + '" title="' + alt + '" data-src="'+ this.src +'" class="fancybox" data-fancybox="fancybox-gallery-img"></a>');
|
||||
});
|
||||
$(this).find('.fancybox').each(function(){
|
||||
$(this).attr('rel', 'article');
|
||||
});
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,60 @@
|
|||
(function ($) { jQuery.fn.gotoTop = function (opt) { var ele = this; var win = $(window); var doc = $('html,body'); var index = false; var defaultOpt = { offset: 420, speed: 500, iconSpeed: 200, animationShow: { 'opacity': '1' }, animationHide: { 'opacity': '0' } }; var options = $.extend(defaultOpt, opt); ele.click(function () { doc.animate({ scrollTop: '0' }, options.speed) }); $.each(options.animationShow, function (i) { if (i == 'transform') { index = true } }); function animateShow() { if (index) { ele.css(options.animationShow) } else { ele.stop().animate(options.animationShow, options.iconSpeed) } } function animateHide() { if (index) { ele.css(options.animationHide) } else { ele.stop().animate(options.animationHide, options.iconSpeed) } } win.scroll(function () { if (win.scrollTop() > options.offset) { animateShow() } else { animateHide() } }); if (win.scrollTop() > options.offset) { ele.css(options.animationShow) } else { ele.css(options.animationHide) } } }(jQuery));
|
||||
( function ( $ ) {
|
||||
jQuery.fn.gotoTop = function ( opt ) {
|
||||
var ele = this;
|
||||
var win = $( window );
|
||||
var doc = $( 'html,body' );
|
||||
var index = false;
|
||||
var defaultOpt = {
|
||||
offset: 420,
|
||||
speed: 500,
|
||||
iconSpeed: 200,
|
||||
animationShow: {
|
||||
'opacity': '1'
|
||||
},
|
||||
animationHide: {
|
||||
'opacity': '0'
|
||||
}
|
||||
};
|
||||
var options = $.extend( defaultOpt, opt );
|
||||
ele.click( function () {
|
||||
doc.animate( {
|
||||
scrollTop: '0'
|
||||
}, options.speed )
|
||||
} );
|
||||
$.each( options.animationShow, function ( i ) {
|
||||
if ( i == 'transform' ) {
|
||||
index = true
|
||||
}
|
||||
} );
|
||||
|
||||
function animateShow () {
|
||||
if ( index ) {
|
||||
ele.css( options.animationShow )
|
||||
} else {
|
||||
ele.stop()
|
||||
.animate( options.animationShow, options.iconSpeed )
|
||||
}
|
||||
}
|
||||
|
||||
function animateHide () {
|
||||
if ( index ) {
|
||||
ele.css( options.animationHide )
|
||||
} else {
|
||||
ele.stop()
|
||||
.animate( options.animationHide, options.iconSpeed )
|
||||
}
|
||||
}
|
||||
win.scroll( function () {
|
||||
if ( win.scrollTop() > options.offset ) {
|
||||
animateShow()
|
||||
} else {
|
||||
animateHide()
|
||||
}
|
||||
} );
|
||||
if ( win.scrollTop() > options.offset ) {
|
||||
ele.css( options.animationShow )
|
||||
} else {
|
||||
ele.css( options.animationHide )
|
||||
}
|
||||
}
|
||||
}( jQuery ) );
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,49 @@
|
|||
// 内容自动上升
|
||||
function contentMove(){
|
||||
const contentDom = document.getElementById('content');
|
||||
contentDom.classList.add('content-move');
|
||||
}
|
||||
|
||||
// header 滚动动画
|
||||
window.onscroll = function() {
|
||||
//为了保证兼容性，这里取两个值，哪个有值取哪一个
|
||||
//scrollTop就是触发滚轮事件时滚轮的高度
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const headerTopDom = document.getElementById('header-top');
|
||||
if (scrollTop > 100) {
|
||||
headerTopDom.classList.remove("header-move2");
|
||||
headerTopDom.classList.add('header-move1');
|
||||
return
|
||||
}
|
||||
headerTopDom.classList.remove('header-move1');
|
||||
headerTopDom.classList.add("header-move2");
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 在浏览器加载完成前执行
|
||||
function ready ( fn ) {
|
||||
|
||||
if ( document.addEventListener ) { //标准浏览器
|
||||
|
||||
document.addEventListener( 'DOMContentLoaded', function () {
|
||||
//注销时间，避免重复触发
|
||||
document.removeEventListener( 'DOMContentLoaded', arguments.callee, false );
|
||||
fn(); //运行函数
|
||||
}, false );
|
||||
|
||||
} else if ( document.attachEvent ) { //IE浏览器
|
||||
|
||||
document.attachEvent( 'onreadystatechange', function () {
|
||||
|
||||
if ( document.readyState == 'complete' ) {
|
||||
document.detachEvent( 'onreadystatechange', arguments.callee );
|
||||
fn(); //函数运行
|
||||
}
|
||||
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
// 执行动画
|
||||
ready(contentMove);
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue