提交 bff12936 编写于 作者: T TRHX

Back up my www.itrhx.com blog

上级 2a243dad
......@@ -24,9 +24,9 @@ avatar: https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.9/images/trhx.png
> - SM.MS:运营四年多了,也变得越来越慢了,到了晚上直接打不开图片,速度堪忧
> - 其他小众图床:随时有挂掉的风险
> - Imgur等国外图床:国内访问速度太慢,随时有被墙的风险
> - 大厂储存服务:例如七牛云、又拍云、腾讯云COS、阿里云OSS等,操作繁琐,又是实名认证又是域名备案的,麻烦,而且还要花钱(有钱又不怕麻烦的当我没说)
> - 大厂储存服务:例如七牛云、又拍云、腾讯云COS、阿里云OSS等,容量限制,操作繁琐,又是实名认证又是域名备案的,麻烦,而且还要花钱(有钱又不怕麻烦的当我没说)
因此,GitHub图床是个不错的选择,利用jsDelivr CDN加速访问(jsDelivr 是一个免费开源的 CDN 解决方案),PicGo工具一键上传,操作简单高效,GitHub和jsDelivr都是大厂,不用担心跑路问题,不用担心速度和容量问题,而且完全免费,可以说是目前免费图床的最佳解决方案!
因此,GitHub 图床是个不错的选择,利用 jsDelivr CDN 加速访问(jsDelivr 是一个免费开源的 CDN 解决方案),PicGo 工具一键上传,操作简单高效,GitHub 和 jsDelivr 都是大厂,不用担心跑路问题,不用担心速度和容量问题,而且完全免费,可以说是目前免费图床的最佳解决方案!
---
......@@ -76,9 +76,11 @@ avatar: https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.9/images/trhx.png
- <font color=#FF000>设定Token:</font>粘贴之前生成的【Token】
- <font color=#FF000>指定存储路径:</font>填写想要储存的路径,如【ITRHX-PIC/】,这样就会在仓库下创建一个名为ITRHX-PIC的文件夹,图片将会储存在此文件夹中
- <font color=#FF000>指定存储路径:</font>填写想要储存的路径,如【ITRHX-PIC/】,这样就会在仓库下创建一个名为 ITRHX-PIC 的文件夹,图片将会储存在此文件夹中
- <font color=#FF000>设定自定义域名:</font>它的的作用是,在图片上传后,PicGo会按照【自定义域名+上传的图片名】的方式生成访问链接,放到粘贴板上,因为我们要使用jsDelivr加速访问,所以可以设置为【https://cdn.jsdelivr.net/gh/用户名/图床仓库名 】,关于jsDelivr是如何引用资源的可以参考我的另一篇博客:[《免费CDN:jsDeliver+Github》](https://www.itrhx.com/2019/02/10/A18-free-cdn/)
- <font color=#FF000>设定自定义域名:</font>它的作用是,在图片上传后,PicGo 会按照【自定义域名+储存路径+上传的图片名】的方式生成访问链接,并放到粘贴板上,因为我们要使用 jsDelivr 加速访问,所以可以设置为【https://cdn.jsdelivr.net/gh/用户名/图床仓库名 】,上传完毕后,我们就可以通过【https://cdn.jsdelivr.net/gh/用户名/图床仓库名/图片路径 】加速访问我们的图片了,比如上图的图片链接为:https://cdn.jsdelivr.net/gh/TRHX/ImageHosting/ITRHX-PIC/A27/08.png
关于 jsDelivr 具体是如何引用资源的可以参考我的另一篇博客:[《免费CDN:jsDelivr+Github》](https://www.itrhx.com/2019/02/10/A18-free-cdn/)
---
......
......@@ -238,7 +238,7 @@ links:
- name: Yinux's Blog
avatar: https://cdn.jsdelivr.net/gh/TRHX/ImageHosting/ITRHX-LINKS/codingpy.png
url: https://www.codingpy.cn/
url: https://www.yinuxy.com/
backgroundColor: '#967ADC'
textColor: '#fff'
tags:
......
---
name: 使用遇到问题
about: 使用遇到问题请先认真阅读文档,仍然无法解决可在文档页面下方留言。
---
如果你发现 无法使用 或者效果与示例有较大区别,可以使用hexo官方提供的用于单元测试的博客应用本主题查看样式是否正常,对比_config.yml文件排查问题。
## 下载单元测试:
Hexo官方的单元测试博客: [https://github.com/hexojs/hexo-theme-unit-test](https://github.com/hexojs/hexo-theme-unit-test)
如果你的系统是macOS,则可以使用hexo.sh脚本一键完成测试。
## 提问前请先认真阅读文档
文档:[https://xaoxuu.com/wiki/material-x/](https://xaoxuu.com/wiki/material-x/)
_site/
.sass-cache/
.jekyll-metadata
.DS_Store
MIT License
Copyright (c) 2017 xaoxuu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# Material X
一个简约的卡片式Hexo博客主题。
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
#### 完全自由的模块化、易于定制化设计
- 可以自由决定每个页面是否需要封面、封面是否需要背景图片、多少图片、是否需要轮播、速度如何。
- 可以自由决定每个页面是否需要侧边栏、侧边栏小部件显示什么卡片、顺序如何。
- 可以自由决定每个页面的主体结构(默认文章+评论),可以按需增加卡片(与侧边栏小部件共用卡片库)。
- 可以自由决定每篇文章的meta标签(日期、更新日期、分类、标签、分享、阅读统计、置顶)显示与否、放置在文章开头还是末尾。标题、缩略图、小图标(用于归档页面)、页面专属的音乐播放器也算做meta标签,但是它们的位置固定。
- 大部分按钮可以自由设置图标、文字、target、nofollow等
- 方便更换主题色、自定义字体、边距、圆角、阴影等视觉效果,快速实现暗色主题。
#### 易于扩展
- 使用 [import](https://xaoxuu.com/wiki/material-x/config/#import) 字段方便导入css和js到主题中。
#### 移动端优化
- 针对移动端布局进行了大量优化。
#### 更多功能的支持
- 支持4种评论系统:Disqus、Gitalk、来必力和Valine评论。
- 提供主题CDN,也可自定义CDN。
- 使用卡片设计元素以及交互动效。
- 使用 fontawesome 5.6.3 免费版图标。
- 支持APlayer播放器,可以播放网易云、QQ音乐、虾米、酷狗平台以及其它服务器的音乐。
- 支持不蒜子阅读统计、百度分析、Google分析。
- 支持渲染MathJax数学公式,优化了渲染效果。
<br>
## 博客示例
| 博客 | 源码 | 说明 |
| ----------------------------------- | -------------------------------------- | ------------------ |
| [@mxclub](https://mxclub.github.io) | https://github.com/xaoxuu/blog-example | master分支默认效果 |
| [@xaoxuu](https://xaoxuu.com) | 暂未开源 | myblog分支效果 |
- **更多示例请见 [#示例博客](https://github.com/xaoxuu/hexo-theme-material-x/issues/97)**
<br>
## 下载安装
### A. 使用脚本全自动安装(目前仅支持macOS)
1. 打开终端输入下面命令安装脚本,脚本文档见[#hexo.sh](https://xaoxuu.com/wiki/hexo.sh/)
```bash
curl -s https://xaoxuu.com/install | sh -s hexo.sh
```
2. 安装成功后,在你的博客路径打开终端,输入下面命令即可安装主题和依赖包。
```bash
hexo.sh i x
```
### B. 手动安装
1. 下载主题到 `themes/` 文件夹
```bash
git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x
```
2. 然后安装必要的依赖包
```bash
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less
```
<br>
## 文档
https://xaoxuu.com/wiki/material-x/
############################### 基本信息 ###############################
info:
name: Material X
docs: https://xaoxuu.com/wiki/material-x/
cdn: # 把对应的那一行注释掉就使用本地的文件
css:
# style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.10.22/css/style.css
js:
app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.9/js/app.js
search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.9/js/search.js
volantis: https://cdn.jsdelivr.net/gh/xaoxuu/volantis@1.0.6/js/volantis.min.js
############################### 主题风格 ###############################
# style: material # material: 导航栏和标题栏背景是主题色
style: pure # pure: 导航栏和标题栏背景是白色
############################### 服务开关 ###############################
scrollreveal: true
nodewaves: true
busuanzi: true
# fastclick: true
############################### 默认值 ###############################
# 音乐控件的默认配置,如果sidebar或者page里没有提供,就取这里的参数
music:
enable: true # 是否启用
color: '#1BCDFC' # 主题色
mode: circulation # random (随机) single (单曲) circulation (列表循环) order (列表)
server: netease # netease(网易云音乐)tencent(QQ音乐) xiami(虾米) kugou(酷狗)
type: playlist # song (单曲) album (专辑) playlist (歌单) search (搜索)
id: 2615636388 # 歌曲/专辑/歌单 ID
volume: 0.7 # 音量, 0~1
autoplay: false # 自动播放
# 友链页头像占位图
avatar_placeholder: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
# 日期格式 http://momentjs.com/docs/
date_format: 'YYYY-MM-DD' # 文章发布日期的格式
updated_date_format: 'll' # 文章更新日期的格式
# 幻灯片
backstretch:
position: cover # cover: 封面背景 full: 整个网页背景
duration: 6000 # 持续时间(毫秒)
fade: 2500 # 渐变(毫秒)
images:
- https://img.vim-cn.com/29/91197b04c13f512f734a76d4ac422d89dbe229.jpg
############################### 自定义 ###############################
# page的封面
cover:
scheme: search # 后期将会提供多种封面方案
height: half # full(默认值): 首页封面占据整个第一屏幕,其他页面占半个屏幕高度, half: 所有页面都封面都只占半个屏幕高度
title: Demo
# logo: assets/logo.png # logo和title只显示一个,若同时设置,则只显示logo
# search_placeholder: '搜索'
# 主页封面菜单
features:
- name: 博文
icon: fas fa-rss
url: /
- name: 项目
icon: fas fa-code-branch
url: projects/
- name: 友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 关于
icon: fas fa-info-circle
url: about/
rel: nofollow
# 桌面端导航栏菜单
menu_desktop:
- name: 示例
icon: fas fa-grin
url: /
- name: 分类
icon: fas fa-folder-open
url: blog/categories/
rel: nofollow
- name: 标签
icon: fas fa-hashtag
url: blog/tags/
rel: nofollow
- name: 归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
# 手机端导航菜单(从右上角的按钮点击展开)
menu_mobile:
- name: 近期文章
icon: fas fa-clock
url: /
- name: 文章归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 开源项目
icon: fas fa-code-branch
url: projects/
- name: 我的友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: https://xaoxuu.com/wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
rel: nofollow
layout:
# 文章列表(主页、自定义的列表)布局
posts:
# 列表中每一篇文章的meta信息
meta: [title, author, date, categories, top]
# 列表类页面的侧边栏
sidebar: [author, list, grid, category, tagcloud]
# 文章页面布局
article:
# 文章页面主体元素,你也可以在页面的Front-matter中设置
body: [article, comments]
# 默认的meta信息,文章中没有配置则按照这里的配置来显示,设置为false则不显示
# 其中,title只在header中有效,music和thumbnail无需在这里设置,文章中有则显示
# 如果tags放置在meta.header中,那么在post列表中不显示(因为卡片下方已经有了)
header: [title, author, date, categories, counter, top]
footer: [updated, tags, share]
# 文章页面的侧边栏
sidebar: [author, toc, grid, category, tagcloud, list, related_posts]
# 其他的页面布局暂时等于文章列表
# 侧边栏小部件配置
sidebar:
- widget: author
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
social: true
- widget: toc
- widget: grid
icon: fas fa-map-signs
title: 站内导航
rows:
- name: 近期文章
icon: fas fa-clock
url: /
- name: 文章归档
icon: fas fa-archive
url: blog/archives/
rel: nofollow
- name: 开源项目
icon: fas fa-code-branch
url: projects/
- name: 我的友链
icon: fas fa-link
url: friends/
rel: nofollow
- name: 主题文档
icon: fas fa-book
url: https://xaoxuu.com/wiki/material-x/
rel: nofollow
- name: 关于小站
icon: fas fa-info-circle
url: about/
rel: nofollow
- widget: category
more:
icon: fas fa-expand-arrows-alt
url: blog/categories/
rel: nofollow
- widget: tagcloud
icon: fas fa-tags
more:
icon: fas fa-expand-arrows-alt
url: blog/tags/
rel: nofollow
# - widget: related_posts # 需要安装插件 npm i -S hexo-related-popular-posts
- widget: music
icon: fas fa-compact-disc
title: "最近在听"
more:
icon: far fa-heart
url: https://music.163.com/#/user/home?id=63035382
rel: external nofollow noopener noreferrer
target: _blank
server: netease # netease(网易云音乐)tencent(QQ音乐) xiami(虾米) kugou(酷狗)
type: playlist # song (单曲) album (专辑) playlist (歌单) search (搜索)
id: 2615636388 # 歌曲/专辑/歌单 ID
- widget: list
icon: fas fa-thumbs-up
title: 强烈推荐
rows:
- name: Hexo脚本(Mac)
url: https://xaoxuu.com/wiki/hexo.sh/
- name: 图床脚本(Mac)
url: https://xaoxuu.com/wiki/vim-cn.sh/
- name: 图片在线压缩
url: https://yasuotu.com
- name: 生成Favicon
url: https://realfavicongenerator.net
- name: 简历主题
url: https://mxclub.github.io/resume/
# 社交信息
social:
- icon: fas fa-rss
url: atom.xml
- icon: fas fa-envelope
url: mailto:me@xaoxuu.com
- icon: fab fa-github
url: https://github.com/xaoxuu
- icon: fas fa-headphones-alt
url: https://music.163.com/#/user/home?id=63035382
# 分享按钮
# 当id为qrcode时需要安装插件 npm i -S hexo-helper-qrcode
share:
- id: qq
name: QQ好友
img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qq.png
- id: qzone
name: QQ空间
img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qzone.png
# - id: qrcode
# name: 微信
# img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/wechat.png
- id: weibo
name: 微博
img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/weibo.png
# - id: qrcode
# name: QRcode
# img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qrcode.png
# footer: '页脚文字,支持[markdown](/)'
############################### 评论系统 ###############################
# disqus_shortname: 要使用哪个请复制到根目录配置文件!
# livere_uid: 要使用哪个请复制到根目录配置文件!
# gitalk: 要使用哪个请复制到根目录配置文件!
# clientID: 你的clientID
# clientSecret: 你的clientSecret
# repo: 你的repo名
# owner: 你的GitHub名
# admin: [] 至少填写你的GitHub名
# leancloud: 要使用哪个请复制到根目录配置文件!
# app_id: 你的appId
# app_key: 你的appKey
############################### 杂项,请勿删除 ###############################
#valine配置
valine:
enable: true # 如果你想用Valine评论系统,请设置enable为true
volantis: true # 是否启用volantis版本(禁止匿名,增加若干贴吧、QQ表情)
# 还需要在根目录配置文件中添加下面这三行内容
# leancloud:
# app_id: 你的appId
# app_key: 你的appKey
guest_info: nick,mail,link #valine comment header info
placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
avatar: mp # gravatar style https://valine.js.org/avatar
pageSize: 10 # comment list page size
verify: true # valine verify code (true/false)
notify: true # valine mail notify (true/false)
lang: zh-cn
highlight: true
# 搜索配置
search:
enable: true
service: hexo
# google
google_api_key:
google_engine_id:
# algolia
algolia_app_id:
algolia_api_key:
algolia_index_name:
# azure
azure_service_name:
azure_index_name:
azure_query_key:
# baidu
baidu_api_id:
# Less渲染
less:
compress: true
sidebar:
category: Categories
tagcloud: Hot Tags
toc: TOC
related_posts: Related Posts
post:
top: Top
read_more: Read More
sticky: Sticky
comments: Comments
comments_placeholder: Unable to load %s, please make sure your network can access.
copy_button: Copy
copy_success: Copied
copy_failure: Copy failed
updated: updated at
prev_page: Previous
next_page: Next
copyright:
author: Post author
link: Post link
license_title: Copyright Notice
license_content: "All articles in this blog are licensed under %s unless stating additionally."
footer:
license: 'Blog content follows the [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)'
use: Use
theme: as theme
total_views: total visits
total_visitors: total visitors
times: times
search:
placeholder: Search
symbol:
comma: ", "
period: ". "
colon: ": "
brackets_l: "("
brackets_r: ")"
# 下面这是博主相关的
navbar:
home: Home
blogs: Blogs
categories: Categories
tags: Tags
archives: Archives
friends: Friends
sidebar:
category: 文章分类
tagcloud: 热门标签
toc: 本文目录
related_posts: 相关文章
post:
top: 置顶
read_more: 阅读全文
sticky: 置顶
comments: 评论
comments_placeholder: 无法加载%s评论系统,请确保您的网络能够正常访问。
copy_button: 复制
copy_success: 复制成功
copy_failure: 复制失败
updated: 更新于
prev_page: 上一页
next_page: 下一页
copyright:
author: 本文作者
link: 本文链接
license_title: 版权声明
license_content: "本博客所有文章除特别声明外,均采用 %s 许可协议。转载请注明出处!"
footer:
license: '博客内容遵循 [署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)'
use: 本站使用
theme: 作为主题
total_views: 总访问量为
total_visitors: 总访客量
times:
search:
placeholder: 搜索
symbol:
comma: ","
period: "。"
colon: ":"
brackets_l: "("
brackets_r: ")"
# 下面这是博主相关的
navbar:
home: 主页
blogs: 博客
categories: 分类
tags: 标签
archives: 归档
friends: 朋友
sidebar:
category: 文章分類
tagcloud: 熱門標籤
toc: 本文目錄
related_posts: 相關文章
post:
top: 置頂
read_more: 閱讀全文
sticky: 置頂
comments: 評論
comments_placeholder: 無法加載%s評論系統,請確保您的網絡能夠正常訪問。
copy_button: 複製
copy_success: 複製成功
copy_failure: 複製失敗
updated: 更新於
prev_page: 上一頁
next_page: 下一頁
copyright:
author: 本文作者
link: 文章連結
license_title: 版權聲明
license_content: "本網誌所有文章除特別聲明外,均採用 %s 許可協議。轉載請註明出處!"
footer:
license: '博客內容遵循 [姓名標示-非商業性-相同方式分享 4.0 國際 (CC BY-NC-SA 4.0) 協議](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh_TW)'
use: 本站使用
  theme: 作為主題
  total_views: 總訪問量為
  total_visitors: 總訪客量為
  times:
search:
placeholder: 搜尋
symbol:
comma: ","
period: "。"
colon: ":"
brackets_l: "("
brackets_r: ")"
# 下面這是博主相關的
navbar:
home: 主頁
blogs: 博客
categories: 分類
tags: 標籤
archives: 歸檔
friends: 朋友
sidebar:
category: 文章分類
tagcloud: 熱門標籤
toc: 本文目錄
related_posts: 相關文章
post:
top: 置頂
read_more: 閱讀全文
sticky: 置頂
comments: 評論
comments_placeholder: 無法加載%s評論系統,請確保您的網絡能夠正常訪問。
copy_button: 複製
copy_success: 複製成功
copy_failure: 複製失敗
updated: 更新於
prev_page: 上一頁
next_page: 下一頁
copyright:
author: 本文作者
link: 文章連結
license_title: 版權聲明
license_content: "本網誌所有文章除特別聲明外,均採用 %s 許可協議。轉載請註明出處!"
footer:
license: '博客內容遵循 [姓名標示-非商業性-相同方式分享 4.0 國際 (CC BY-NC-SA 4.0) 協議](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh_TW)'
use: 本站使用
theme: 作為主題
total_views: 總訪問量為
total_visitors: 總訪客量為
times:
search:
placeholder: 搜尋
symbol:
comma: ","
period: "。"
colon: ":"
brackets_l: "("
brackets_r: ")"
# 下面這是博主相關的
navbar:
home: 主頁
blogs: 博客
categories: 分類
tags: 標籤
archives: 歸檔
friends: 朋友
<% if (theme.cover.logo) { %>
<img class='logo' src='<%- url_for(theme.cover.logo) %>'/>
<% } else { %>
<h1 class='title'><%- theme.cover.title ? theme.cover.title : config.title %></h1>
<% } %>
<% if (theme.search.enable === true) { %>
<div class="m_search">
<form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- theme.cover.search_placeholder %>" />
<i class="icon fas fa-search fa-fw"></i>
</form>
</div>
<% } %>
<div class='menu navgation'>
<ul class='h-list'>
<% if (theme.cover.features) { %>
<% (theme.cover.features || []).forEach(function(value){ %>
<li>
<a class="nav home" href="<%= url_for(value.url) %>"
<% if (value.rel) { %>
rel="<%- value.rel %>"
<% } %>
<% if (value.target) { %>
target="<%- value.target %>"
<% } %>
id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>">
<i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
</a>
</li>
<%})%>
<% } %>
</ul>
</div>
<% if(post.author || config.author){ %>
<div class='new-meta-item author'>
<% if (post.author) { %>
<a href="<%- url_for(post.author.url) %>" rel="nofollow">
<% if (post.author.avatar) { %>
<img src="<%- post.author.avatar %>">
<% } else { %>
<i class="fas fa-user" aria-hidden="true"></i>
<% } %>
<p><%- post.author.name %></p>
</a>
<% } else { %>
<a href="<%- url_for(config.url) %>" rel="nofollow">
<% if (config.avatar) { %>
<img src="<%- config.avatar %>">
<% } else { %>
<i class="fas fa-user" aria-hidden="true"></i>
<% } %>
<p><%- config.author %></p>
</a>
<% } %>
</div>
<% } %>
<% if (post.categories && post.categories.length && post.categories.forEach){ %>
<%
var cats = [];
var path;
post.categories.forEach(function(cat){
cats.push(cat.name);
path = cat.path;
});
%>
<div class='new-meta-item category'>
<a href='<%- url_for(path) %>' rel="nofollow">
<i class="fas fa-folder-open" aria-hidden="true"></i>
<p><%- cats.join('&nbsp;/&nbsp;') %></p>
</a>
</div>
<% } %>
<% if(!isPostList){ %>
<% if (theme.busuanzi == true) { %>
<div class="new-meta-item browse busuanzi">
<a class='notlink'>
<i class="fas fa-eye" aria-hidden="true"></i>
<p>
<span id="busuanzi_value_page_pv">
<i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i>
</span>
</p>
</a>
</div>
<% } %>
<% } %>
<div class="new-meta-item date">
<a class='notlink'>
<i class="fas fa-calendar-alt" aria-hidden="true"></i>
<p><%- date(post.date, theme.date_format) %></p>
</a>
</div>
<% if(post.music && post.music.enable != false){ %>
<%- partial('../_third-party/aplayer',
{aplayer_theme: '', aplayer_mini: true, aplayer_mode: 'circulation',
aplayer_server: post.music.server, aplayer_type: post.music.type, aplayer_id: post.music.id,
aplayer_volume: post.music.volume?post.music.volume:'0.7', aplayer_autoplay: post.music.autoplay?true:false }) %>
<% } %>
<% if (theme.share) { %>
<%- partial('../_third-party/share') %>
<% } %>
<% if (!isPostList && post.tags && post.tags.length) { %>
<%
var items = [];
post.tags.each(function(item){
items.push('<div class="new-meta-item meta-tags"><a class="tag" href="'+url_for(item.path)+'" rel="nofollow"><i class="fas fa-tag" aria-hidden="true"></i><p>' + item.name + '</p></a></div>');
});
%>
<%- items.join(' ') %>
<% } %>
<% if(post.thumbnail && post.thumbnail.length){ %>
<a title='<%- post.title %>' href='<%- url_for(post.path) %>'><img class='thumbnail' src='<%- post.thumbnail %>'></a>
<% } %>
<% if(isPostList){ %>
<h2 class="title">
<a href="<%- url_for(post.path) %>">
<%- post.title ? post.title : date(post.date, theme.date_format) %>
</a>
</h2>
<% } else { %>
<% if (post.title || page.title || config.title) { %>
<h1 class="title">
<a href="<%- url_for(post.path) %>">
<%- post.title ? post.title : date(post.date, theme.date_format) %>
</a>
</h1>
<% } %>
<% } %>
<% if(isPostList && post.top){ %>
<div class="new-meta-item top-post">
<a class='notlink'>
<i class="fas fa-angle-double-up" aria-hidden="true"></i>
<p><%- post.top != true ? post.top : __('post.top') %></p>
</a>
</div>
<% } %>
<div class="new-meta-item date" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>">
<a class='notlink'>
<i class="fas fa-clock" aria-hidden="true"></i>
<p><%- __('post.updated') + ' ' + date(post.updated, theme.updated_date_format) %></p>
</a>
</div>
<% if (site.posts && site.posts.length > 0) { %>
<section class="post-list">
<% if (!page.prev) { %>
<% if (is_home()) { %>
<% site.posts.each(function(post){ %>
<% if (post.top) { %>
<% if (page.type == undefined || post.type == page.type) { %>
<div class='post-wrapper'>
<%- partial('post', {post: post}) %>
</div>
<% } %>
<% } %>
<% }) %>
<% } else if (page.posts && page.posts.length > 0) { %>
<% page.posts.each(function(post){ %>
<% if (post.top) { %>
<div class='post-wrapper'>
<%- partial('post', {post: post}) %>
</div>
<% } %>
<% }) %>
<% } %>
<% } %>
<% if (page.posts && page.posts.length > 0) { %>
<% page.posts.each(function(post){ %>
<% if (!post.top) { %>
<div class='post-wrapper'>
<%- partial('post', {post: post}) %>
</div>
<% } %>
<% }) %>
<% } %>
</section>
<% if (page && page.posts) { %>
<% if (page.total > 1) { %>
<br>
<div class="prev-next">
<div class="prev-next">
<% if (page.prev != 0) { %>
<a class="prev" rel="prev" href="<%= url_for(page.prev_link) %>">
<section class="post prev" >
<i class="fas fa-chevron-left" aria-hidden="true"></i>&nbsp;<%- __('post.prev_page') %>&nbsp;
</section>
</a>
<% } %>
<p class="current">
<%= page.current%> / <%= page.total%>
</p>
<% if (page.next != 0) { %>
<a class="next" rel="next" href="<%= url_for(page.next_link) %>">
<section class="post next">
&nbsp;<%- __('post.next_page') %>&nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i>
</section>
</a>
<% } %>
</div>
</div>
<% } %>
<!-- 根据主题中的设置决定是否在archive中针对摘要部分的MathJax公式加载mathjax.js文件 -->
<%
var need_mathjax = false;
page.posts.each(function(post){
if (post.mathjax){
if (post.mathjax != "internal") {
need_mathjax = true;
}
}
});
%>
<% if (need_mathjax){ %>
<%- partial('mathjax') %>
<% } %>
<% } %>
<% } %>
<% var sections = page.body ? page.body : theme.layout.article.body; %>
<% if (sections.indexOf('article') > -1) { %>
<article id="<%= post.layout %>" class="post white-box article-type-<%= post.layout %>" itemscope itemprop="blogPost">
<%- partial('meta', {post: post, position: 'header'}) %>
<section class="article typo">
<div class="article-entry" itemprop="articleBody">
<%- post.content %>
</div>
<% if(post.layout == 'post'){ %>
<br>
<%- partial('meta', {post: post, position: 'footer'}) %>
<% } %>
<% if(post.prev || post.next){ %>
<div class="prev-next">
<% if(post.prev){ %>
<section class="prev">
<span class="art-item-left">
<h6><i class="fas fa-chevron-left" aria-hidden="true"></i>&nbsp;<%- __('post.prev_page') %></h6>
<h4>
<a href="<%=url_for(post.prev.path)%>" rel="prev" title="<%=post.prev.title%>">
<% if(post.prev.title){ %>
<%= post.prev.title %>
<% } else if (post.prev.date) { %>
<%= date(post.prev.date, config.date_format) %>
<% } %>
</a>
</h4>
<% if (post.prev.tags && post.prev.tags.length && post.prev.tags.each) { %>
<%
var items = [];
post.prev.tags.each(function(item){
items.push('<a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> ' + item.name + '</a>');
});
%>
<h6 class="tags">
<%- items.join(' ') %>
</h6>
<% } %>
</span>
</section>
<% } %>
<% if(post.next){ %>
<section class="next">
<span class="art-item-right" aria-hidden="true">
<h6><%- __('post.next_page') %>&nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></h6>
<h4>
<a href="<%=url_for(post.next.path)%>" rel="prev" title="<%=post.next.title%>">
<% if(post.next.title){ %>
<%= post.next.title %>
<% } else if (post.next.date) { %>
<%= date(post.next.date, config.date_format) %>
<% } %>
</a>
</h4>
<% if (post.next.tags && post.next.tags.length && post.next.tags.each) { %>
<%
var items = [];
post.next.tags.each(function(item){
items.push('<a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> ' + item.name + '</a>');
});
%>
<h6 class="tags">
<%- items.join(' ') %>
</h6>
<% } %>
</span>
</section>
<%} %>
</div>
<%} %>
</section>
</article>
<% } %>
<% if (sections.indexOf('category') > -1 || sections.indexOf('tagcloud') > -1 || sections.indexOf('related_posts') > -1) { %>
<% sections.forEach(function(sectionName){ %>
<% if (['category', 'tagcloud', 'related_posts'].indexOf(sectionName) > -1) { %>
<% theme.sidebar.forEach(function(item){ %>
<% if (item.widget == sectionName) { %>
<%- partial('../_widget/' + item.widget, {item: item}) %>
<% } %>
<% }) %>
<% } %>
<% }) %>
<% } %>
<% if (sections.indexOf('comments') > -1) { %>
<%- partial('../_third-party/comments') %>
<% } %>
<%
if (sections.indexOf('comments') < 0) {
page.comments = false;
}
%>
<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->
<% if (page.mathjax){ %>
<%- partial('mathjax') %>
<% } %>
<% if (page.layout == 'post'){ %>
<script>
window.subData = {
title: '<%- post.title %>',
tools: true
}
</script>
<% } %>
<% if (post.categories && post.categories.length && post.categories.forEach){ %>
<%
var cats = [];
post.categories.forEach(function(cat){
cats.push('<a class="categories" href="'+url_for(cat.path)+'">' + cat.name + '</a>');
});
%>
<div class='metatag cats'>
<i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;<%- cats.join('&nbsp;/&nbsp;') %>
</div>
<% } %>
<% if (showCover == true) { %>
<div class="cover-wrapper">
<cover class='cover <%- page.layout %> <%- is_home() ? theme.cover.height : "half" %>'>
<% if (theme.cover.scheme == 'search') { %>
<%- partial('../_cover/search') %>
<% } %>
</cover>
<%- partial('header', null, {cache: false, path: path}) %>
</div>
<% } else { %>
<%- partial('header', null, {cache: false, path: path}) %>
<% } %>
<footer id="footer" class="clearfix">
<% if (theme.footer) { %>
<div class="footer">
<%- markdown(theme.footer) %>
</div>
<br>
<%}%>
<% if (theme.social) { %>
<div class="social-wrapper">
<% (theme.social||[]).forEach(function(value){ %>
<% if (value.url && value.icon) { %>
<a href="<%= url_for(value.url) %>"
class="social <%- value.icon %> flat-btn"
target="_blank"
rel="external nofollow noopener noreferrer">
</a>
<%}%>
<%})%>
</div>
<%}%>
<br>
<div><%- markdown(__('footer.license')) %></div>
<div>
<%- __('footer.use') %>
<a href="<%- theme.info.docs %>" target="_blank" class="codename"><%- theme.info.name %></a>
<%- __('footer.theme') %>
<% if (theme.busuanzi == true) { %>
<%- __('symbol.comma') %>
<%- __('footer.total_views') %>
<span id="busuanzi_value_site_pv"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
<%- __('footer.times') %>
<% } %>
<%- __('symbol.period') %>
</div>
</footer>
<script>setLoadingBarProgress(80);</script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%
var title = page.title;
if (is_archive()) {
title = 'Archives';
if (is_month())
title += ': ' + page.year + '/' + page.month;
else if (is_year())
title += ': ' + page.year;
}
else if (is_category())
title = 'Category: ' + page.category;
else if (is_tag())
title = 'Tag: ' + page.tag;
%>
<title><% if (title) { %><%= title %> | <% } %><%= config.title %></title>
<% if (page.keywords && config.keywords){ %>
<meta name="keywords" content="<%- page.keywords %>, <%- config.keywords %>">
<% } else if (page.keywords) { %>
<meta name="keywords" content="<%- page.keywords %>">
<% } else if (config.keywords) { %>
<meta name="keywords" content="<%- config.keywords %>">
<% } %>
<% if (page.description && config.description){ %>
<meta name="description" content="<%- page.description %>, <%- config.description %>">
<% } else if (page.description) { %>
<meta name="description" content="<%- page.description %>">
<% } else if (config.description) { %>
<meta name="description" content="<%- config.description %>">
<% } %>
<% if (config.feed && config.feed.path){ %>
<%- feed_tag(config.feed.path, {title: config.title}) %>
<% } %>
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- meta -->
<% if (config.import && config.import.meta){ %>
<% (config.import.meta||[]).forEach(function(item){ %>
<%- item %><% }) %>
<% } %>
<!-- link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<% if (theme.nodewaves == true) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css">
<% } %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css">
<% if (config.import && config.import.link){ %>
<% (config.import.link||[]).forEach(function(item){ %>
<%- item %><% }) %>
<% } %>
<% if (config.favicon) { %>
<link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.favicon) %>">
<% } %>
<% if (theme.info && theme.info.cdn && theme.info.cdn.css && theme.info.cdn.css.style) { %>
<%- css(theme.info.cdn.css.style) %>
<% } else { %>
<%- css('style.css') %>
<% } %>
<script>
function setLoadingBarProgress(num) {
document.getElementById('loading-bar').style.width=num+"%";
}
</script>
<% if (config.google_analytics_key) { %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%- config.google_analytics_key %>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<%- config.google_analytics_key %>');
</script>
<% } %>
<% if (config.baidu_analytics_key) { %>
<!-- ba -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?<%= config.baidu_analytics_key %>";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>
</head>
<header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%= theme.style %>">
<div id="loading-bar-wrapper">
<div id="loading-bar" class="<%= theme.style %>"></div>
</div>
<div class='wrapper'>
<div class="nav-main container container--flex">
<a class="logo flat-box" href='<%- url_for("/") %>' >
<% if (config.logo) { %>
<img class='logo' src='<%- url_for(config.logo) %>'/>
<% } else { %>
<%- config.title %>
<% } %>
</a>
<div class='menu navgation'>
<ul class='h-list'>
<% if (theme.menu_desktop) { %>
<% (theme.menu_desktop || []).forEach(function(value){ %>
<li>
<a class="nav flat-box" href="<%= url_for(value.url) %>"
<% if (value.rel) { %>
rel="<%- value.rel %>"
<% } %>
<% if (value.target) { %>
target="<%- value.target %>"
<% } %>
id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>">
<i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
</a>
</li>
<%})%>
<% } %>
</ul>
</div>
<% if (theme.search.enable === true) { %>
<div class="m_search">
<form name="searchform" class="form u-search-form">
<input type="text" class="input u-search-input" placeholder="<%- __('search.placeholder') %>" />
<i class="icon fas fa-search fa-fw"></i>
</form>
</div>
<% } %>
<ul class='switcher h-list'>
<% if (theme.search.enable === true) { %>
<li class='s-search'><a class="fas fa-search fa-fw" href='javascript:void(0)'></a></li>
<% } %>
<li class='s-menu'><a class="fas fa-bars fa-fw" href='javascript:void(0)'></a></li>
</ul>
</div>
<div class='nav-sub container container--flex'>
<a class="logo flat-box"></a>
<ul class='switcher h-list'>
<li class='s-comment'><a class="flat-btn fas fa-comments fa-fw" href='javascript:void(0)'></a></li>
<% if (page.sidebar == undefined || page.sidebar != false) { %>
<li class='s-toc'><a class="flat-btn fas fa-list fa-fw" href='javascript:void(0)'></a></li>
<% } %>
</ul>
</div>
</div>
</header>
<aside class="menu-phone">
<header>
<nav class="menu navgation">
<ul>
<% if (theme.menu_mobile) { %>
<% (theme.menu_mobile || []).forEach(function(value){ %>
<li>
<a class="nav flat-box" href="<%= url_for(value.url) %>"
<% if (value.rel) { %>
rel="<%- value.rel %>"
<% } %>
<% if (value.target) { %>
target="<%- value.target %>"
<% } %>
id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>">
<i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
</a>
</li>
<%})%>
<% } %>
</ul>
</nav>
</header>
</aside>
<script>setLoadingBarProgress(40);</script>
<!-- MathJax配置,可通过单美元符号书写行内公式等 -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX","TeX"],
linebreaks: { automatic:true },
EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
},
tex2jax: {
inlineMath: [ ["$", "$"], ["\\(","\\)"] ],
processEscapes: true,
ignoreClass: "tex2jax_ignore|dno",
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
TeX: {
equationNumbers: { autoNumber: "AMS" },
noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } },
Macros: { href: "{}" }
},
messageStyle: "none"
});
</script>
<!-- 给MathJax元素添加has-jax class -->
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += (all[i].SourceElement().parentNode.className ? ' ' : '') + 'has-jax';
}
});
</script>
<!-- 通过连接CDN加载MathJax的js代码 -->
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<% if(is_home() || is_category() || is_archive() || is_tag() || page.layout == 'list') {
var isPostList = true;
} else {
var isPostList = false;
}
var topMetas = (theme.meta && theme.meta.header) || [];
if (isPostList) {
topMetas = theme.layout.posts.meta || [];
} else {
topMetas = theme.layout.article.header || [];
}
if (post.meta && (post.meta.header !== undefined && post.meta.header !== null)) {
if (post.meta.header.length) {
topMetas = post.meta.header;
} else {
topMetas = [];
}
}
var bottomMetas = (theme.meta && theme.meta.footer) || [];
if (isPostList) {
bottomMetas = [];
} else {
bottomMetas = theme.layout.article.footer || [];
}
if (post.meta && (post.meta.footer !== undefined && post.meta.footer !== null)) {
if (post.meta.footer.length) {
bottomMetas = post.meta.footer;
} else {
bottomMetas = [];
}
}
%>
<% if (position == 'header') { %>
<section class='meta'>
<% if (post.music && post.music.enable != false) { %>
<%- partial('../_third-party/aplayer',
{aplayer_theme: '', aplayer_mini: true, aplayer_mode: 'circulation',
aplayer_server: post.music.server, aplayer_type: post.music.type, aplayer_id: post.music.id,
aplayer_volume: post.music.volume?post.music.volume:'0.7', aplayer_autoplay: post.music.autoplay?true:false }) %>
<% } %>
<% if(post.thumbnail && post.thumbnail.length){ %>
<a title='<%- post.title %>' href='<%- url_for(post.path) %>'><img class='thumbnail' src='<%- post.thumbnail %>'></a>
<% } %>
<div class="meta" id="header-meta">
<% if((topMetas).indexOf('title') > -1){ %>
<%- partial('../_meta/' + 'title', {post: post, isPostList: isPostList}) %>
<% } %>
<div class='new-meta-box'>
<% (topMetas).forEach(function(meta){ %>
<% if(meta != 'title'){ %>
<%- partial('../_meta/' + meta, {post: post, isPostList: isPostList}) %>
<% } %>
<% }) %>
</div>
<% if ((topMetas).length > 0){ %>
<hr>
<% } %>
</div>
</section>
<% } else if (position == 'footer') { %>
<section class='meta' id="footer-meta">
<div class='new-meta-box'>
<% (bottomMetas).forEach(function(meta){ %>
<% if(meta != 'title'){ %>
<%- partial('../_meta/' + meta, {post: post, isPostList: isPostList}) %>
<% } %>
<% }) %>
</div>
</section>
<% } %>
<article class="post reveal <%= (post.title) ? "" : "no-title" %>">
<%- partial('meta',{post:post, position:'header'}) %>
<section class="article typo">
<div class="article-entry" itemprop="articleBody">
<%- post.excerpt || post.description %>
<% if (post.readmore != false && post.path) { %>
<div class="readmore">
<a href="<%- url_for(post.path) %>" class="flat-box">
<i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
<%- __('post.read_more') %>
</a>
</div>
<% } %>
</div>
<% if (post.tags && post.tags.length) { %>
<div class="full-width auto-padding tags">
<% post.tags.each(function(item){ %>
<a href="<%- url_for(item.path) %>" rel="nofollow"><i class="fas fa-tag fa-fw"></i> <%=item.name %></a>
<%})%>
</div>
<% } %>
</section>
</article>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<% if (theme.search && theme.search.enable) { %>
<script>
var GOOGLE_CUSTOM_SEARCH_API_KEY = "<%- theme.search.google_api_key %>";
var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "<%- theme.search.google_engine_id %>";
var ALGOLIA_API_KEY = "<%- theme.search.algolia_api_key %>";
var ALGOLIA_APP_ID = "<%- theme.search.algolia_app_id %>";
var ALGOLIA_INDEX_NAME = "<%- theme.search.algolia_index_name %>";
var AZURE_SERVICE_NAME = "<%- theme.search.azure_service_name %>";
var AZURE_INDEX_NAME = "<%- theme.search.azure_index_name %>";
var AZURE_QUERY_KEY = "<%- theme.search.azure_query_key %>";
var BAIDU_API_ID = "<%- theme.search.baidu_api_id %>";
var SEARCH_SERVICE = "<%- theme.search.service%>" || "hexo";
var ROOT = "<%- config.root %>"||"/";
if(!ROOT.endsWith('/'))ROOT += '/';
</script>
<% } %>
<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>
<% if (theme.scrollreveal == true) { %>
<script async src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.5/dist/scrollreveal.min.js"></script>
<script type="text/javascript">
$(function() {
const $reveal = $('.reveal');
if ($reveal.length === 0) return;
const sr = ScrollReveal({ distance: 0 });
sr.reveal('.reveal');
});
</script>
<% } %>
<% if (theme.nodewaves == true) { %>
<script src="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js"></script>
<script type="text/javascript">
$(function() {
Waves.attach('.flat-btn', ['waves-button']);
Waves.attach('.float-btn', ['waves-button', 'waves-float']);
Waves.attach('.float-btn-light', ['waves-button', 'waves-float', 'waves-light']);
Waves.attach('.flat-box', ['waves-block']);
Waves.attach('.float-box', ['waves-block', 'waves-float']);
Waves.attach('.waves-image');
Waves.init();
});
</script>
<% } %>
<% if (theme.busuanzi == true) { %>
<script async src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js"></script>
<% } %>
<% if (theme.fastclick == true) { %>
<!-- fastclick -->
<script src="https://cdn.jsdelivr.net/npm/fastclick@1.0.6/lib/fastclick.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body)
}, false)
</script>
<% } %>
<% if (theme.backstretch && (theme.backstretch.images || page.images)) { %>
<% var imgs = theme.backstretch.images || page.images; %>
<% var posi = null;
if (theme.backstretch.position == 'cover') {
posi = '.cover';
}
%>
<% if (imgs != undefined && theme.backstretch.position != undefined){ %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(function(){
if ('<%- posi %>') {
$('<%- posi %>').backstretch(
<%- '["' + imgs.join('", "') + '"]' %>,
{
duration: "<%- theme.backstretch.duration %>",
fade: "<%- theme.backstretch.fade %>"
});
} else {
$.backstretch(
<%- '["' + imgs.join('", "') + '"]' %>,
{
duration: "<%- theme.backstretch.duration %>",
fade: "<%- theme.backstretch.fade %>"
});
}
});
</script>
<% } %>
<% } %>
<%
var enableDisqus = false;
var enableLivere = false;
var enableGitalk = false;
var enableValine = false;
if (page && page.comments == true) {
if (config.disqus_shortname) {
enableDisqus = true;
}
if (config.livere_uid) {
enableLivere = true;
}
if (config.gitalk) {
enableGitalk = true;
}
if (theme.valine.enable && config.leancloud) {
enableValine = true;
}
}
%>
<% if (enableDisqus){ %>
<script>
var disqus_shortname = '<%= config.disqus_shortname %>';
<% if (page.permalink){ %>
var disqus_url = '<%= page.permalink %>';
<% } %>
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<% } %>
<% if (enableLivere){ %>
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<% } %>
<% if (enableGitalk) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: "<%- config.gitalk.clientID %>",
clientSecret: "<%- config.gitalk.clientSecret %>",
repo: "<%- config.gitalk.repo %>",
owner: "<%- config.gitalk.owner %>",
admin: "<%- config.gitalk.admin %>",
<% if(page.gitalk && page.gitalk.id) { %>
id: "<%= page.gitalk.id %>",
<% } else { %>
id: location.pathname, // Ensure uniqueness and length less than 50
<% } %>
distractionFreeMode: false // Facebook-like distraction free mode
});
gitalk.render('gitalk-container');
</script>
<% } %>
<% if (enableValine){ %>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<% if (theme.valine.volantis == true) { %>
<% if (theme.info && theme.info.cdn && theme.info.cdn.js && theme.info.cdn.js.volantis) { %>
<%- js(theme.info.cdn.js.volantis) %>
<% } else { %>
<%- js(['js/volantis.js']) %>
<% } %>
<% } else { %>
<script src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-valine@1.3.4/js/valine.min.js"></script>
<% } %>
<script>
var GUEST_INFO = ['nick','mail','link'];
var guest_info = '<%= theme.valine.guest_info %>'.split(',').filter(function(item){
return GUEST_INFO.indexOf(item) > -1
});
var notify = '<%= theme.valine.notify %>' == true;
var verify = '<%= theme.valine.verify %>' == true;
var valine = new Valine();
valine.init({
el: '#valine_container',
notify: notify,
verify: verify,
guest_info: guest_info,
<% if(page.valine && page.valine.path) { %>
path: "<%= page.valine.path %>",
<% } %>
appId: "<%= config.leancloud.app_id %>",
appKey: "<%= config.leancloud.app_key %>",
placeholder: "<%= (page.valine && page.valine.placeholder) ? page.valine.placeholder : theme.valine.placeholder %>",
pageSize:'<%= theme.valine.pageSize %>',
avatar:'<%= theme.valine.avatar %>',
lang:'<%= theme.valine.lang %>',
highlight:'<%= theme.valine.highlight %>'
})
</script>
<% } %>
<% if (theme.info && theme.info.cdn && theme.info.cdn.js && theme.info.cdn.js.app) { %>
<%- js(theme.info.cdn.js.app) %>
<% } else { %>
<%- js(['js/app.js']) %>
<% } %>
<% if (theme.info && theme.info.cdn && theme.info.cdn.js && theme.info.cdn.js.search) { %>
<%- js(theme.info.cdn.js.search) %>
<% } else { %>
<%- js(['js/search.js']) %>
<% } %>
<% if (page.layout == 'links') { %>
<%- js('https://cdn.jsdelivr.net/gh/toddmotto/echo@1.7.3/src/echo.js') %>
<script>
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
// console.log(element, 'has been', op + 'ed');
}
});
</script>
<% } %>
<!-- 复制 -->
<%- partial('_third-party/clipboard') %>
<!-- fancybox -->
<%- partial('_third-party/fancybox') %>
<% if (config.import && config.import.script){ %>
<% (config.import.script||[]).forEach(function(item){ %>
<%- item %><% }) %>
<% } %>
<aside class='l_side'>
<% if (theme.sidebar && theme.sidebar.length){ %>
<%
let supportWidgets = ['author', 'category', 'list', 'music', 'tagcloud', 'toc', 'plain', 'related_posts', 'grid'];
%>
<% if (page.sidebar) { %>
<% page.sidebar.forEach(function(name){ %>
<% theme.sidebar.forEach(function(item){ %>
<% let widget_name = item.widget ? item.widget : 'plain'; %>
<% if (item.enable != false && widget_name == name){ %>
<% if (supportWidgets.indexOf(widget_name) > -1){ %>
<%- partial('../_widget/' + item.widget, {item: item}) %>
<% } %>
<% } %>
<% }) %>
<% }) %>
<% } else { %>
<%
var names = [];
if(is_home() || is_category() || is_archive() || is_tag() || page.layout == 'list') {
var isPostList = true;
} else {
var isPostList = false;
}
if (isPostList) {
names = theme.layout.posts.sidebar;
} else {
names = theme.layout.article.sidebar;
}
%>
<% names.forEach(function(name){ %>
<% theme.sidebar.forEach(function(item){ %>
<% let widget_name = item.widget ? item.widget : 'plain'; %>
<% if (item.enable != false && widget_name == name){ %>
<% if (supportWidgets.indexOf(widget_name) > -1){ %>
<%- partial('../_widget/' + item.widget, {item: item}) %>
<% } %>
<% } %>
<% }) %>
<% }) %>
<% } %>
<% } %>
</aside>
<% if (theme.music && theme.music.enable == true) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<div class="aplayer"
data-theme="<%- aplayer_theme != undefined ? aplayer_theme : theme.music.color %>"
<%if(aplayer_mini){%>data-mini=true <%}%>
<%if(aplayer_autoplay != undefined ? aplayer_autoplay : theme.music.autoplay){%>data-autoplay=true <%}%>
data-mode="<%- aplayer_mode != undefined ? aplayer_mode : theme.music.mode %>"
data-server="<%= aplayer_server != undefined ? aplayer_server : theme.music.server %>"
data-type="<%= aplayer_type != undefined ? aplayer_type : theme.music.type %>"
data-id="<%= aplayer_id != undefined ? aplayer_id : theme.music.id %>"
data-volume="<%= aplayer_volume != undefined ? aplayer_volume : theme.music.volume %>">
</div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
<% } %>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
let COPY_SUCCESS = "<%- __('post.copy_success') %>";
let COPY_FAILURE = "<%- __('post.copy_failure') %>";
/*页面载入完成后,创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-copy"></i><span><%- __('post.copy_button') %></span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
var clipboard = new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
clipboard.on('success', function(e) {
//您可以加入成功提示
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
success_prompt(COPY_SUCCESS);
e.clearSelection();
});
clipboard.on('error', function(e) {
//您可以加入失败提示
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
fail_prompt(COPY_FAILURE);
});
}
initCopyCode();
}(window, document);
/**
* 弹出式提示框,默认1.5秒自动消失
* @param message 提示信息
* @param style 提示样式,有alert-success、alert-danger、alert-warning、alert-info
* @param time 消失时间
*/
var prompt = function (message, style, time)
{
style = (style === undefined) ? 'alert-success' : style;
time = (time === undefined) ? 1500 : time*1000;
$('<div>')
.appendTo('body')
.addClass('alert ' + style)
.html(message)
.show()
.delay(time)
.fadeOut();
};
// 成功提示
var success_prompt = function(message, time)
{
prompt(message, 'alert-success', time);
};
// 失败提示
var fail_prompt = function(message, time)
{
prompt(message, 'alert-danger', time);
};
// 提醒
var warning_prompt = function(message, time)
{
prompt(message, 'alert-warning', time);
};
// 信息提示
var info_prompt = function(message, time)
{
prompt(message, 'alert-info', time);
};
</script>
<!-- 显示推荐文章和评论 -->
<%
var enableDisqus = false;
var enableLivere = false;
var enableGitalk = false;
var enableValine = false;
if (page && page.comments != false) {
if (config.disqus_shortname) {
enableDisqus = true;
}
if (config.livere_uid) {
enableLivere = true;
}
if (config.gitalk) {
enableGitalk = true;
}
if (theme.valine.enable && config.leancloud) {
enableValine = true;
}
}
%>
<% if (enableDisqus || enableLivere || enableGitalk || enableValine) { %>
<article class="post white-box comments">
<section class="article typo">
<h4><i class="fas fa-comments fa-fw" aria-hidden="true"></i>&nbsp;<%- __('post.comments') %></h4>
<% if (enableDisqus) { %>
<section id="comments">
<div id="disqus_thread">
<div><i class='fas fa-exclamation-triangle'></i>&nbsp;<%- __('post.comments_placeholder', 'Disqus') %></div>
</div>
</section>
<% } %>
<% if (enableLivere){ %>
<section id="comments">
<div id="lv-container" data-id="city" data-uid="<%= config.livere_uid %>">
<noscript><div><i class='fas fa-exclamation-triangle'>&nbsp;<%- __('post.comments_placeholder', 'Livere') %></div></noscript>
</div>
</section>
<% } %>
<% if (enableGitalk){ %>
<section id="comments">
<div id="gitalk-container"></div>
</section>
<% } %>
<% if (enableValine){ %>
<section id="comments">
<div id="valine_container" class="valine_thread">
<i class="fas fa-spinner fa-spin fa-fw"></i>
</div>
</section>
<% } %>
</section>
</article>
<% } else { %>
<% page.comments = false; %>
<% } %>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
let LAZY_LOAD_IMAGE = "<%- config.lazyload %>";
$(".article-entry").find("fancybox").find("img").each(function () {
var element = document.createElement("a");
$(element).attr("data-fancybox", "gallery");
$(element).attr("href", $(this).attr("src"));
/* 图片采用懒加载处理时,
* 一般图片标签内会有个属性名来存放图片的真实地址,比如 data-original,
* 那么此处将原本的属性名src替换为对应属性名data-original,
* 修改如下
*/
if (LAZY_LOAD_IMAGE) {
$(element).attr("href", $(this).attr("data-original"));
}
$(this).wrap(element);
});
</script>
<div class="new-meta-item share -mob-share-list">
<div class="-mob-share-list share-body">
<% (theme.share||[]).forEach(function(item){ %>
<% if (item.id == 'qrcode'){ %>
<a class='qrcode' rel="external nofollow noopener noreferrer" href='<%- qrcode(url) %>'>
<% if (item.img){ %>
<img src="<%- item.img %>">
<% } else if (item.icon){ %>
<i class="<%- item.icon %> fa-fw"></i>
<% } %>
</a>
<% } else { %>
<a class="-mob-share-<%- item.id %>" title="<%- item.name %>" rel="external nofollow noopener noreferrer"
<% if (item.id == 'qzone'){ %>
href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%- post.permalink %>&title=<%- post.title + ' | ' + config.title %><%- (post.img || config.avatar) ? '&pics=' + (post.img || config.avatar) : '' %>&summary=<%- strip_html(post.excerpt) %>"
<% } else if (item.id == 'qq'){ %>
href="http://connect.qq.com/widget/shareqq/index.html?url=<%- post.permalink %>&title=<%- post.title + ' | ' + config.title %><%- (post.img || config.avatar) ? '&pics=' + (post.img || config.avatar) : '' %>&summary=<%- strip_html(post.excerpt) %>"
<% } else if (item.id == 'weibo'){ %>
href="http://service.weibo.com/share/share.php?url=<%- post.permalink %>&title=<%- post.title + ' | ' + config.title %><%- (post.img || config.avatar) ? '&pics=' + (post.img || config.avatar) : '' %>&summary=<%- strip_html(post.excerpt) %>"
<% } %>
>
<% if (item.img){ %>
<img src="<%- item.img %>">
<% } else if (item.icon){ %>
<i class="<%- item.icon %> fa-fw"></i>
<% } %>
</a>
<% } %>
<% }) %>
</div>
</div>
<section class='widget <%- item.widget %>'>
<div class='content <%= theme.style %>'>
<% if(item.avatar) { %>
<div class='avatar'>
<img class='avatar' src='<%- url_for(item.avatar) %>'/>
</div>
<%} %>
<% if (item.title || item.body || item.jinrishici) { %>
<div class='text'>
<% if (item.title){ %>
<h2><%- item.title %></h2>
<% } %>
<% if (item.body){ %>
<%- markdown(item.body) %>
<% } %>
<% if (item.jinrishici){ %>
<p><span id="jinrishici-sentence"><%- item.jinrishici != true ? item.jinrishici : config.title %></span></p>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<% } %>
</div>
<% } %>
<% if (item.social == true && theme.social) { %>
<div class="social-wrapper">
<% (theme.social||[]).forEach(function(value){ %>
<% if (value.url && value.icon) { %>
<a href="<%- url_for(value.url) %>"
class="social <%- value.icon %> flat-btn"
target="_blank"
rel="external nofollow noopener noreferrer">
</a>
<%}%>
<%})%>
</div>
<% } %>
</div>
</section>
<% if (site.categories.length){ %>
<section class='widget <%- item.widget %>'>
<%- partial('header', {item: item, defIcon: 'fas fa-folder-open', defTitle: __('sidebar.category')}) %>
<div class='content <%= theme.style %>'>
<ul class="entry">
<% site.categories.sort('path').each(function(category){ %>
<li><a class="flat-box<%= category.parent ? ' child' : ''%>" title="<%- url_for(category.path) %>" href="<%- url_for(category.path) %>"><div class='name'><%- category.name %></div><div class='badge'>(<%- category.posts.length %>)</div></a></li>
<% }) %>
</ul>
</div>
</section>
<% } %>
<section class='widget <%- item.widget %>'>
<%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
<div class='content <%= theme.style %>'>
<ul class="grid navgation">
<% (item.rows||[]).forEach(function(row){ %>
<li><a class="flat-box" title="<%- url_for(row.url) %>" href="<%- url_for(row.url) %>"
<% if (row.rel) { %>
rel="<%- row.rel %>"
<% } %>
<% if (row.target) { %>
target="<%- row.target %>"
<% } %>
id="<%= url_for(row.url).replace(/\/|%/g, "")?url_for(row.url).replace(/\/|%/g, ""):"home" %>">
<% if (row.img) { %>
<img src="<%- row.img %>">
<% } else if(row.avatar) { %>
<img src="<%- row.avatar %>" id="round">
<% } else { %>
<i class="<%= row.icon %> fa-fw" aria-hidden="true"></i>
<% } %>
<%- row.name %>
</a></li>
<% }) %>
</ul>
</div>
</section>
<%
let icon = item.icon ? item.icon : defIcon;
let title = item.title ? item.title : defTitle;
%>
<header class='<%= theme.style %>'>
<div><i class="<%- icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%- title %></div>
<% if (item.widget == 'toc') { %>
<!-- <div class='wrapper'><a class="s-toc rightBtn" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div> -->
<% } else if(item.more && item.more.url) { %>
<a class="rightBtn<%- item.more.animate ? ' ' + item.more.animate : '' %>"
<% if (item.more.rel) { %>
rel="<%- item.more.rel %>"
<% } else { %>
rel="external nofollow noopener noreferrer"
<% } %>
<% if (item.more.target) { %>
target="<%- item.more.target %>"
<% } %>
href="<%- url_for(item.more.url) %>"
title="<%- item.more.url %>">
<i class="<%- item.more.icon?item.more.icon:'fas fa-question-circle' %> fa-fw"></i></a>
<% } %>
</header>
<section class='widget <%- item.widget %>'>
<%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
<div class='content <%= theme.style %>'>
<ul class="entry">
<% (item.rows||[]).forEach(function(row){ %>
<li><a class="flat-box" title="<%- url_for(row.url) %>" href="<%- url_for(row.url) %>"
<% if (row.rel) { %>
rel="<%- row.rel %>"
<% } %>
<% if (row.target) { %>
target="<%- row.target %>"
<% } %>
>
<div class='name'>
<% if(row.img) { %>
<img src="<%- row.img %>">
<% } else if(row.avatar) { %>
<img src="<%- row.avatar %>" id="round">
<% } else { %>
<i class="<%= row.icon %> fa-fw" aria-hidden="true"></i>
<% } %>
&nbsp;&nbsp;<%- row.name %>
</div>
<% if(row.desc) { %>
<div class='badge'>(<%- row.desc %>)</div>
<% } %>
</a></li>
<% }) %>
</ul>
</div>
</section>
<%
var needDisplay = true;
if (page.music && page.music.autoplay) {
needDisplay = false;
}
if (page.widget && page.widget.music == false) {
needDisplay = false;
}
%>
<% if (theme.music && theme.music.enable == true && needDisplay == true) { %>
<section class='widget <%- item.widget %>'>
<%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
<div class='content <%= theme.style %>'>
<%- partial('../_third-party/aplayer',
{aplayer_theme: item.color, aplayer_mini: false, aplayer_mode: item.mode,
aplayer_server: item.server, aplayer_type: item.type, aplayer_id: item.id,
aplayer_volume: item.volume, aplayer_autoplay: item.autoplay?item.autoplay:false }) %>
</div>
</section>
<% } %>
<section class='widget <%- item.widget?item.widget:'plain' %>'>
<%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
<div class='content <%= theme.style %>'>
<%- markdown(item.body) %>
</div>
</section>
<% if(page.layout == 'post' && page.content && page.path != undefined){ %>
<section class='widget <%- item.widget %>'>
<%- partial('header', {item: item, defIcon: 'fas fa-bookmark', defTitle: __('sidebar.related_posts')}) %>
<div class="content <%= theme.style %>">
<%- popular_posts( { maxCount: 10 , ulClass: 'popular-posts' , PPMixingRate: 0.2 } , page ) %>
</div>
</section>
<% } %>
<% if (site.tags.length){ %>
<section class='widget <%- item.widget %>'>
<%- partial('header', {item: item, defIcon: 'fas fa-tags', defTitle: __('sidebar.tagcloud')}) %>
<div class='content <%= theme.style %>'>
<%- tagcloud(site.tags, {
min_font: 14,
max_font: 24,
color: true,
start_color: item.start_color ? item.start_color : '#999',
end_color: item.end_color ? item.end_color : '#555',
}) %>
</div>
</section>
<% } %>
<% if(page.layout == 'post' && page.content && toc(page.content).length > 0){ %>
<section class='widget toc-wrapper'>
<%- partial('header', {item: item, defIcon: 'fas fa-list', defTitle: __('sidebar.toc')}) %>
<div class='content <%= theme.style %>'>
<%- toc(page.content, {list_number: false}) %>
</div>
</section>
<% } %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (page.year || page.month) { %>
<%- partial('_partial/archive') %>
<% } else { %>
<article id="archive-page" class="post article white-box">
<section class="archive">
<%
var year = -1, postid = -1;
site.posts.sort('date', -1).each(function(post) {
post.year = date(post.date, 'YYYY');
if (post.year && post.year !== year) {
year = post.year;
%>
<div class="archive-item archive-year mark">
<h2><%= year %></h2>
</div>
<% } %>
<div class="archive-item archive-post mark">
<a href="<%= url_for(post.path) %>">
<time><%= date(post.date, 'MM-DD') %></time>
<span class="title">
<% if(post.title){ %>
<%- post.title %>
<% } else if (post.date) { %>
<%= date(post.date, config.date_format) %>
<% } %>
<% if(post.music && post.music.enable != false){ %>
&nbsp;<i class="fas fa-headphones-alt music" aria-hidden="true"></i>
<% } %>
<% if (post.icon) { %>
&nbsp;<i class="<%- post.icon %>" aria-hidden="true"></i>
<% } %>
<% (post.icons && post.icons||[]).forEach(function(icon){ %>
&nbsp;<i class="<%- icon %>" aria-hidden="true"></i>
<% }) %>
</span>
</a>
</div>
<% }); %>
</section>
</article>
<% } %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<% if (page && page.posts) { %>
<!-- 根据主题中的设置决定是否在archive中针对摘要部分的MathJax公式加载mathjax.js文件 -->
<%
var need_mathjax = false;
page.posts.each(function(post){
if (post.mathjax){
if (post.mathjax != "internal") {
need_mathjax = true;
}
}
});
%>
<% if (need_mathjax){ %>
<%- partial('_partial/mathjax') %>
<% } %>
<% } %>
<% page.comments = false; %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (site.posts && site.posts.length > 0) { %>
<% if (page.layout == 'category') { %>
<section class="post-list">
<div class='post-wrapper'>
<article id="archive-page" class="post article white-box">
<section class="archive">
<div class="archive-item archive-year mark">
<h2><%- page.title %></h2>
<hr>
</div>
<div class="archive-item archive-post mark">
<% if (site.categories.length){ %>
<% site.categories.sort('path').each(function(category){ %>
<a class="<%= category.parent ? ' child' : ''%>" href="<%= url_for(category.path) %>">
<time><i class='fas fa-folder-open fa-fw' aria-hidden="true"></i>&nbsp;&nbsp;<%= category.name %></time>
<span class="title">
(<%- category.posts.length %>)
</span>
</a>
<% }) %>
<% } %>
</div>
<br>
<%- page.content %>
</section>
</article>
</div>
</section>
<% } else { %>
<%- partial('_partial/archive') %>
<% } %>
<% } %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<div class='l_main<%- page.sidebar == false ? 'no_sidebar' : '' %>'>
<%- partial('_partial/archive') %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<!DOCTYPE html>
<html>
<%- partial('_partial/head') %>
<body>
<%
var showCover = false;
if (theme.cover) {
// 如果页面的Front-matter声明了cover就取页面的值
if (page.cover != undefined && page.cover != undefined) {
showCover = page.cover;
} else {
// 否则如果是首页只有首页的第一页显示
if (is_home()) {
if (page.prev) {
showCover = false;
} else {
showCover = true;
}
} else {
showCover = true;
}
}
}
%>
<%- partial('_partial/cover', {showCover: showCover}) %>
<div class="l_body<%- showCover ? '' : ' nocover' %>">
<div class='body-wrapper'>
<%- body %>
<script>setLoadingBarProgress(60);</script>
</div>
<a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
</div>
<%- partial('_partial/scripts') %>
<script>setLoadingBarProgress(100);</script>
</body>
</html>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<article id="<%= page.layout %>" class="post white-box article-type-<%= page.layout %>" itemscope itemprop="blogPost">
<%- partial('_partial/meta',{post:page, position:'header'}) %>
<section class="article typo l_friends">
<% if (page.links){ %>
<% (page.links||[]).forEach(function(group){ %>
<% if(group.items) { %>
<div class='friends-group'>
<% if(group.group) { %>
<br>
<h3 class='friend-header'>
<% if (group.icon) { %>
<i class="<%= group.icon %> fa-fw" aria-hidden="true"></i>
<%} %>
<%= group.group %>
</h3>
<%} %>
<div class='friend-content'>
<% (group.items||[]).forEach(function(item){ %>
<a class='friend-card' style='background:<%- item.backgroundColor %>; color:<%- item.textColor %>'
target="_blank" rel="external nofollow noopener noreferrer" href='<%- url_for(item.url) %>'>
<div class='friend-left'>
<img class='avatar' src='<%- theme.avatar_placeholder %>' data-echo='<%- url_for(item.avatar ? item.avatar : "https://img.vim-cn.com/a4/87a96e2e01b1180bba1e76e190df5220378c1a.png") %>'/>
</div>
<div class='friend-right'>
<p class="friend-name"><%- item.name %></p>
<% if(item.tags){ %>
<div class='friend-tags-wrapper'>
<% (item.tags||[]).forEach(function(tag){ %>
<p class="tags"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><%= tag %></p>
<% }) %>
</div>
<% } %>
</div>
</a>
<% }) %>
</div>
</div>
<%} %>
<% }) %>
<% } %>
<br><br>
<%- page.content %>
</section>
</article>
<%- partial('_third-party/comments') %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<% page.comments = false; %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<% if (site.posts && site.posts.length > 0) { %>
<section class="post-list">
<% if (!page.prev) { %>
<% site.posts.sort(page.sort ? page.sort : "-date").each(function(post){ %>
<% if (post.type && post.type == page.type) { %>
<% if (post.top) { %>
<div class='post-wrapper'>
<%- partial('_partial/post', {post: post, index: false}) %>
</div>
<% } %>
<% } %>
<% }) %>
<% } %>
<% site.posts.sort(page.sort ? page.sort : "-date").each(function(post){ %>
<% if (post.type && post.type == page.type) { %>
<% if (!post.top) { %>
<div class='post-wrapper'>
<%- partial('_partial/post', {post: post, index: false}) %>
</div>
<% } %>
<% } %>
<% }) %>
</section>
<% if (page && page.posts) { %>
<!-- 根据主题中的设置决定是否在archive中针对摘要部分的MathJax公式加载mathjax.js文件 -->
<%
var need_mathjax = false;
page.posts.each(function(post){
if (post.mathjax){
if (post.mathjax != "internal") {
need_mathjax = true;
}
}
});
%>
<% if (need_mathjax){ %>
<%- partial('mathjax') %>
<% } %>
<% } %>
<% } %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<%- partial('_partial/article', {post: page, index: false}) %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<%- partial('_partial/article', {post: page, index: false}) %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<% page.comments = false; %>
<div class='l_main'>
<% if (site.posts && site.posts.length > 0) { %>
<% if (page.layout == 'tag') { %>
<section class="post-list">
<div class='post-wrapper'>
<article id="archive-page" class="post article white-box">
<section class="archive">
<div class="archive-item archive-year mark">
<h2><%- page.title %></h2>
<hr>
</div>
<div class="archive-item archive-post mark">
<% if (site.tags.length){ %>
<% site.tags.sort('path').each(function(tags){ %>
<% if (tags.posts.length){ %>
<a class="<%= tags.parent ? ' child' : ''%>" href="<%= url_for(tags.path) %>">
<time><i class='fas fa-tag fa-fw' aria-hidden="true"></i>&nbsp;&nbsp;<%= tags.name %></time>
<span class="title">
(<%- tags.posts.length %>)
</span>
</a>
<% } %>
<% }) %>
<% } %>
</div>
<br>
<%- page.content %>
</section>
</article>
</div>
</section>
<% } else { %>
<%- partial('_partial/archive') %>
<% } %>
<% } %>
</div>
<%- partial('_partial/side') %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
/* eslint-disable */
var customSearch;
(function ($) {
"use strict";
var scrollCorrection = 80; // (header height = 64px) + (gap = 16px)
const $headerAnchor = $('.l_header', '.cover-wrapper');
if ($headerAnchor[0]) {
scrollCorrection = $headerAnchor[0].clientHeight + 16;
}
function scrolltoElement(elem, correction) {
correction = correction || scrollCorrection;
const $elem = elem.href ? $(elem.getAttribute('href')) : $(elem);
$('html, body').animate({ 'scrollTop': $elem.offset().top - correction }, 400);
};
function setScrollAnchor(){
// button
const $postsBtn = $('.menu .active');
const $topBtn = $('.s-top');
const $titleBtn = $('h1.title', '#header-meta');
// anchor
const $bodyAnchor = $('.l_body');
// action
if ($postsBtn.length && $bodyAnchor) {
$postsBtn.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($bodyAnchor); });
}
if ($titleBtn.length && $bodyAnchor) {
$titleBtn.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($bodyAnchor); });
}
if ($topBtn.length && $bodyAnchor) {
$topBtn.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($bodyAnchor); });
}
const $coverAnchor = $('.cover-wrapper');
var showHeaderPoint = 0;
if ($coverAnchor[0]) {
showHeaderPoint = $coverAnchor[0].clientHeight - 164;
}
var pos = document.body.scrollTop;
$(document, window).scroll(() => {
const scrollTop = $(window).scrollTop();
const del = scrollTop - pos;
pos = scrollTop;
if (scrollTop > 150) {
$topBtn.addClass('show');
if (del > 0) {
$topBtn.removeClass('hl');
} else {
$topBtn.addClass('hl');
}
} else {
$topBtn.removeClass('show').removeClass('hl');
}
if (scrollTop > showHeaderPoint) {
$headerAnchor.addClass('show');
} else {
$headerAnchor.removeClass('show');
}
});
}
function setHeader() {
if (!window.subData) return;
const $wrapper = $('header .wrapper');
const $comment = $('.s-comment', $wrapper);
const $toc = $('.s-toc', $wrapper);
$wrapper.find('.nav-sub .logo').text(window.subData.title);
let pos = document.body.scrollTop;
$(document, window).scroll(() => {
const scrollTop = $(window).scrollTop();
const del = scrollTop - pos;
if (del >= 50 && scrollTop > 100) {
pos = scrollTop;
$wrapper.addClass('sub');
} else if (del <= -50) {
pos = scrollTop;
$wrapper.removeClass('sub');
}
});
// bind events to every btn
const $commentTarget = $('#comments');
if ($commentTarget.length) {
$comment.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($commentTarget); });
} else $comment.remove();
const $tocTarget = $('.toc-wrapper');
if ($tocTarget.length && $tocTarget.children().length) {
$toc.click((e) => { e.stopPropagation(); $tocTarget.toggleClass('active'); });
} else $toc.remove();
}
function setHeaderMenuSelection() {
var $headerMenu = $('body .navgation');
// 先把已经激活的取消激活
$headerMenu.find('li a.active').removeClass('active');
// var $underline = $headerMenu.find('.underline');
function setUnderline($item) {
// if (!transition) $underline.addClass('disable-trans');
if ($item && $item.length) {
$item.addClass('active').siblings().removeClass('active');
}
}
//set current active nav
var $active_link = null;
var idname = location.pathname.replace(/\/|%/g, "");
if (idname.length == 0) {
idname = "home";
}
var page = idname.match(/page\d{0,}$/g);
if (page) {
page = page[0];
idname = idname.split(page)[0];
}
var index = idname.match(/index.html/);
if (index) {
index = index[0];
idname = idname.split(index)[0];
}
if (idname && $headerMenu) {
$active_link = $('#' + idname, $headerMenu);
setUnderline($active_link);
}
}
function setHeaderMenuPhone() {
var $switcher = $('.l_header .switcher .s-menu');
$switcher.click(function (e) {
e.stopPropagation();
$('body').toggleClass('z_menu-open');
$switcher.toggleClass('active');
});
$(document).click(function (e) {
$('body').removeClass('z_menu-open');
$switcher.removeClass('active');
});
}
function setHeaderSearch() {
var $switcher = $('.l_header .switcher .s-search');
var $header = $('.l_header');
var $search = $('.l_header .m_search');
if ($switcher.length === 0) return;
$switcher.click(function (e) {
e.stopPropagation();
$header.toggleClass('z_search-open');
$search.find('input').focus();
});
$(document).click(function (e) {
$header.removeClass('z_search-open');
});
$search.click(function (e) {
e.stopPropagation();
});
$header.ready(function () {
$header.bind('keydown', function (event) {
if (event.keyCode == 9) {
return false;
} else {
var isie = (document.all) ? true: false;
var key;
var ev;
if (isie) { //IE浏览器
key = window.event.keyCode;
ev = window.event;
} else { //火狐浏览器
key = e.which;
ev = e;
}
if (key == 9) { //IE浏览器
if (isie) {
ev.keyCode = 0;
ev.returnValue = false;
} else { //火狐浏览器
ev.which = 0;
ev.preventDefault();
}
}
}
});
});
}
function setTocToggle() {
const $toc = $('.toc-wrapper');
if ($toc.length === 0) return;
// $toc.click((e) => {
// e.stopPropagation();
// $toc.addClass('active');
// });
$(document).click(() => $toc.removeClass('active'));
$toc.on('click', 'a', (e) => {
e.preventDefault();
e.stopPropagation();
if (e.target.tagName === 'A') {
scrolltoElement(e.target);
} else if (e.target.tagName === 'SPAN') {
scrolltoElement(e.target.parentElement);
}
$toc.removeClass('active');
});
const liElements = Array.from($toc.find('li a'));
//function animate above will convert float to int.
const getAnchor = () => liElements.map(elem => Math.floor($(elem.getAttribute('href')).offset().top - scrollCorrection));
let anchor = getAnchor();
const scrollListener = () => {
const scrollTop = $('html').scrollTop() || $('body').scrollTop();
if (!anchor) return;
//binary search.
let l = 0, r = anchor.length - 1, mid;
while (l < r) {
mid = (l + r + 1) >> 1;
if (anchor[mid] === scrollTop) l = r = mid;
else if (anchor[mid] < scrollTop) l = mid;
else r = mid - 1;
}
$(liElements).removeClass('active').eq(l).addClass('active');
}
$(window)
.resize(() => {
anchor = getAnchor();
scrollListener();
})
.scroll(() => {
scrollListener()
});
scrollListener();
}
$(function () {
//set header
setHeader();
setHeaderMenuSelection();
setHeaderMenuPhone();
setHeaderSearch();
setTocToggle();
setScrollAnchor();
// $(".article .video-container").fitVids();
setTimeout(function () {
$('#loading-bar-wrapper').fadeOut(500);
}, 300);
if (SEARCH_SERVICE === 'google') {
customSearch = new GoogleCustomSearch({
apiKey: GOOGLE_CUSTOM_SEARCH_API_KEY,
engineId: GOOGLE_CUSTOM_SEARCH_ENGINE_ID,
imagePath: "/images/"
});
}
else if (SEARCH_SERVICE === 'algolia') {
customSearch = new AlgoliaSearch({
apiKey: ALGOLIA_API_KEY,
appId: ALGOLIA_APP_ID,
indexName: ALGOLIA_INDEX_NAME,
imagePath: "/images/"
});
}
else if (SEARCH_SERVICE === 'hexo') {
customSearch = new HexoSearch({
imagePath: "/images/"
});
}
else if (SEARCH_SERVICE === 'azure') {
customSearch = new AzureSearch({
serviceName: AZURE_SERVICE_NAME,
indexName: AZURE_INDEX_NAME,
queryKey: AZURE_QUERY_KEY,
imagePath: "/images/"
});
}
else if (SEARCH_SERVICE === 'baidu') {
customSearch = new BaiduSearch({
apiId: BAIDU_API_ID,
imagePath: "/images/"
});
}
});
})(jQuery);
#archive-page {
margin-bottom: @gap * 2;
.archive {
position: relative;
.archive-year {
font-size: @fontsize_base;
margin-top: 4em;
margin-bottom: 1em;
&:first-child{
margin-top: 0em;
padding-top: 0;
}
h2 {
margin-top: 1em;
}
a {
color: @color_text_main;
text-decoration: none;
}
}
.archive-post {
a {
width: 100%;
display: inline-flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
text-decoration: none;
&.child{
padding-left: 2*@gap;
}
}
time {
color: @color_text_main;
flex: none;
font-size: @fontsize_small;
padding: .5em .5em .5em 3em;
@media (max-width: @on_phone) {
padding: .5em .5em .5em 0;
}
}
.title {
flex: auto;
padding: .5em;
font-size: @fontsize_small;
color: @color_text_main;
i{
color: @theme_main;
&.music {
color: @color_text_highlight;
}
&.red {
color: @color_mac_close;
}
&.green {
color: @color_mac_maximize;
}
&.yellow {
color: @color_mac_minimize;
}
&.blue {
color: @color_mac_finder;
}
&.theme {
color: @theme_main;
}
&.accent {
color: @color_text_highlight;
}
&.orange {
color: @color_md_deep_orange;
}
}
}
}
}
}
.article {
color: @color_text_main;
font-size: @fontsize_base;
line-height: @lineheight_base;
word-break: break-all;
word-wrap: break-word;
img {
position: relative;
margin: 0 auto;
background: white;
.enable-trans();
@media (max-width: @on_phone) {
box-shadow: none;
}
}
span{
img {
display: inline;
margin: auto;
}
}
.aplayer{
margin: 0;
display: inline-block;
width: 400px;
max-width: 100%;
border-radius: 4px;
color: #666;
font-family: @fontfamily_base;
}
p.small-img,
div.small-img {
img {
width: auto;
max-width: 100%;
margin: 0;
box-shadow: none;
}
}
p {
// margin: 20px 0px;
margin-top: .5em;
margin-bottom: 1em;
// text-align: justify;
strong{
color: @color_text_main;
padding-left: 2px;
padding-right: 2px;
}
max-width: 100%;
overflow: auto;
.mjx-math{
font-family: @fontfamily_code;
background: fade(@theme_background, 50%);
padding: @gap/2;
border-radius: @border_radius_code_block;
}
}
ul,
ol {
font-size: @fontsize_base * .95;
list-style: initial;
padding-left: 10px;
margin-left: 10px;
margin-bottom: 1em;
&.center{
justify-content: center;
}
&.pure{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
br{
display: none;
}
@media screen and (max-width: 900px){
justify-content: space-between;
}
li{
margin: 8px;
display: flex;
width: 75px;
flex-direction: column;
align-items: stretch;
vertical-align: middle;
text-align: center;
font-size: .8em;
line-height: 1.2em;
overflow: hidden;
a{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
img{
margin-bottom: 8px;
}
}
&.rounded{
img{
border-radius: 25%;
}
}
&.circle{
img{
border-radius: 50%;
}
}
&.about{
@media screen and (max-width: 900px){
justify-content: center;
}
}
}
}
ul {
& > li{
list-style: initial;
}
}
ol {
& > li{
margin-left: 10px;
list-style: decimal;
}
}
a {
&:before{
display: none;
}
color: @color_text_link;
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@color_text_highlight, 25%);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
font-family: @fontfamily_base;
font-weight: normal;
margin-top: 1.5em;
margin-bottom: 1em;
&.title {
left: 0;
&:before {
content: none;
}
}
}
h1, h2 {
color: @color_text_header;
margin-top: 3em;
border-bottom: 1px solid fade(@color_text_main, 10%);
padding-bottom: .2em;
}
h3, h4, h5, h6 {
&:first-child{
margin-top: 0;
padding-top: 0;
}
}
h1 {
font-size: @fontsize_h1;
}
h2 {
font-size: @fontsize_h2;
text-align: @text_align_h2;
}
h3 {
font-size: @fontsize_h3;
color: @color_text_h3;
text-align: @text_align_h3;
}
h4 {
font-weight: bold;
font-size: @fontsize_h4;
}
h5 {
font-weight: bold;
color: @color_text_main;
font-size: @fontsize_h5;
}
h6 {
color: fade(@color_text_main, 75%);
font-size: @fontsize_h6;
}
.subtitle{
h6 {
color: fade(@color_text_main, 90%);
}
}
figure {
figcaption {
span {
display: inline-block;
margin-right: 5px;
}
}
}
blockquote {
p{
text-align: left;
word-wrap: normal;
margin: 0;
font-size: @fontsize_small;
line-height: @fontsize_small * 1.5;
}
position: relative;
width: 100%;
font-size: @fontsize_small;
background: fade(@color_bg_quote, 10%);
margin: 1em 0;
padding: @gap;
border-left: @border_radius_code_block solid @color_bg_quote;
border-radius: @border_radius_code_block;
.enable-trans();
footer {
strong {
margin-right: 7px;
}
}
&.pullquote{
&.right{
border-left: none;
border-right: @border_radius_code_block solid @color_bg_quote;
p{
text-align: right;
}
}
}
}
pre {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: @fontfamily_code;
color: @color_text_main;
}
code {
font-family: @fontfamily_code;
padding: 3px 3px 0px 3px;
margin: 0px 2px;
vertical-align: center;
border-radius: 2px;
border: 1px solid fade(@color_bg_code, 50%);
font-size: @fontsize_base * .8;
background: @color_bg_code;
@media(max-width: @on_phone){
font-size: @fontsize_base * .8 * .95;
}
}
.readmore {
// display: none; // howtodesign?
font-family: @fontfamily_base;
font-size: .8em;
letter-spacing: .1em;
margin-top: @gap;
a {
text-decoration: none;
display: inline-block;
vertical-align: middle;
line-height: 2rem;
font-weight: bold;
background-color: @theme_main;
padding: .2em 2.4em;
color: @color_text_in_header;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme_main, 10%);
}
&:active {
// background: darken(@theme_main, 20%);
}
}
}
.tags {
position: relative;
padding-top: @gap/2;
padding-bottom: @gap/2;
font-size: @fontsize_small;
line-height: @lineheight_base;
margin-top: @gap;
background: darken(fade(@theme_background, 50%), 5%);
&.article-tags {
// padding-top: 2*@gap;
// background: transparent;
}
word-spacing: @gap/2;
a {
color: @color_text_main;
position: relative;
display: inline-block;
word-spacing: 0;
// letter-spacing: .1em;
// &+a{
// margin-left: @gap/2;
// }
.enable-trans();
&:hover {
color: @color_text_highlight;
background: transparent;
text-decoration: none;
}
&::before {
// content: "#";
}
}
}
table:not('.highlight table') {
width: 100%;
td,
th {
padding: 12px 24px;
}
tr {
// border-bottom: 1px solid #ddd;
}
&>thead>th {
// border-bottom-width: 2px;
}
}
@media (max-width: @on_phone) {
ul,
ol {
font-size: @fontsize_base * .95;
}
figure {
font-size: 13px;
line-height: 1.6em;
}
}
.prev-next{
width: 100%;
display: flex;
justify-content: space-between;
align-content: flex-start;
section{
width: 100%;
padding: @gap/2;
color: fade(@color_text_main, 70%);
background-color: fade(@theme_background, 50%);
border-radius: @border_radius;
p{
font-size: @fontsize_base;
line-height: @lineheight_base;
margin: 0;
}
h4{
margin-top: @gap/2;
margin-bottom: @gap/2;
position: relative;
font-family: @fontfamily_base;
font-weight: bold;
font-size: @fontsize_h5;
@media(max-width:@on_phone) {
letter-spacing: -1px;
}
}
h6{
margin: 0;
word-spacing: normal;
}
.enable-trans();
// border: 1px solid transparent;
// &:hover{
// border: 1px solid fade(@theme_main, 30%);
// }
.tags{
background: transparent;
padding: 0;
margin-top: @gap/2;
margin-bottom: 0;
font-size: @fontsize_small * 0.9;
word-spacing: 4px;
}
&:first-child{
margin-left: 0;
margin-right: 0;
}
}
.prev{
text-align: left;
margin-left: 0;
margin-right: @gap/2;
border-top-right-radius: @border_radius;
border-bottom-right-radius: @border_radius;
}
.next{
text-align: right;
margin-left: @gap/2;
margin-right: 0;
border-top-left-radius: @border_radius;
border-bottom-left-radius: @border_radius;
}
}
}
.highlight {
position: relative;
width: 100%;
margin-top: 1em;
margin-bottom: 1.2em;
overflow: auto;
display: block;
background: @color_bg_code_block;
font-size: @fontsize_small * .95;
font-family:@fontfamily_code;
line-height: @lineheight_base;
border-radius: @border_radius_code_block;
.enable-trans();
figcaption{
padding: @gap/4 @gap/2;
background-color: darken(@color_bg_code_block, 3%);
}
table{
td,th{
padding: 0;
}
}
.gutter{
width: 24px;
padding: 0 12px;
text-align: right;
border-width: 0;
margin-left: 0;
background-color: darken(@color_bg_code_block, 3%);
pre{
color: fade(@color_text_main, 80%);
}
&:hover{
}
}
.code{
padding: @gap;
vertical-align: top;
border: 0px solid darken(@theme_background, 2%);
&:before{
content: "";
position: absolute;
top: 0;
right: 0;
color: fade(@color_text_main, 80%);
font-size: @fontsize_footnote;
padding: 4px 8px 0;
line-height: @lineheight_base;
}
}
&.html .code:before{
content: "HTML";
}
&.js .code:before{
content: "JS";
}
&.bash .code:before{
content: "BASH";
}
&.shell .code:before{
content: "SHELL";
}
&.css .code:before{
content: "CSS";
}
&.less .code:before{
content: "LESS";
}
&.swift .code:before{
content: "SWIFT";
}
&.objc .code:before{
content: "OBJECTIVE-C";
}
&.c .code:before{
content: "C";
}
&.java .code:before{
content: "JAVA";
}
&.python .code:before{
content: "PYTHON";
}
&.plain .code:before{
content: "";
}
&::-webkit-scrollbar {
height: @border_radius_line;
width: @border_radius_line;
}
// /* Track */
&::-webkit-scrollbar-track-piece {
background: transparent;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: darken(@color_bg_code_block, 5%);
cursor: pointer;
border-radius: @border_radius_code_block;
.enable-trans();
&:hover {
background: darken(@color_bg_code_block, 12%);
}
}
}
.article {
@media (max-width: @on_phone) {
.highlight {
font-size: @fontsize_small * .95 * .95;
}
}
}
.art-item-footer{
height: 40px;
line-height: @lineheight_base;
font-size: @fontsize_small;
.art-item-left,.art-item-right{
width:50%;
height: 40px;
line-height: 40px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.art-item-left{
float: left;
text-align: left;
}
.art-item-right{
float: right;
text-align: right;
}
@media (max-width: @on_phone) {
font-size: @fontsize_small * .95 * .95;
}
}
@hl_keyword: #9c27b0;
@hl_blue: #1E80F0;
@hl_cyan: #17AFCA;
@hl_green: #3FA33F;
@hl_light_blue: #6ECDF9;
@hl_red: #EE2B29;
@hl_orange: #FB3F1B;
@hl_amber: #FD8607;
pre{
// 行
.line{
color: fade(@color_text_main, 90%);
}
.marked{
background-color: fade(@color_mac_minimize, 20%);
border-radius: 2px;
border: 1px solid fade(@color_mac_minimize, 40%);
}
.title{
color: @color_md_indigo;
}
// 注释
.comment {
color: fade(darken(@color_md_green, 10%), 70%);
}
.keyword, .javascript .function, .attr {
color: @hl_keyword;
}
.type, .built_in, .tag .name{
color: @color_md_light_blue;
}
.variable, .attribute, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
color: @hl_amber;
}
.number, .preprocessor, .literal, .params, .constant {
color: @hl_amber;
}
.class, .ruby .class .title, .css .rules .attribute {
color: @color_md_orange;
}
.string {
color: darken(@color_md_green, 10%);
}
.value, .inheritance, .header, .ruby .symbol, .xml .cdata {
color: @color_md_green;
}
.css .hexcolor {
color: #66cccc;
}
.function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
color: #6699cc;
}
}
.html{
.tag .name{
color: @hl_red;
}
}
//代码块复制按钮
.highlight{
//方便copy代码按钮(btn-copy)的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #FCFCFC;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #666;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
.enable-trans();
&:hover{
color: #444;
}
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}
/* Basic Settings */
* {
box-sizing: border-box;
outline: none;
margin: 0;
padding: 0;
}
/* My Base */
html {
color: @color_text_main;
width: 100%;
height: 100%;
font-family: @fontfamily_base;
font-size: @fontsize_base;
line-height: 1.5rem;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-rendering: optimizelegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: @theme_background;
&.modal-active {
overflow: hidden;
@media (max-width: @on_modal_threshold) {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
&.z_menu-open {
.menu-phone {
transform: translate3d(-@gap, 0, 0);
}
}
}
fancybox{
display: flex;
justify-content: center;
}
.backstretch {
// opacity: .75;
}
.cover-wrapper{
padding-bottom: 2px;
.cover{
top: 0;
left: 0;
max-width: 100%;
height: ~"calc(100vh)";
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
align-self: center;
align-content: center;
// padding: @gap;
.title, .logo{
font-size: @fontsize_h1*2;
margin-top: ~"calc(28vh - 2*@{gap})";
text-align: center;
font-weight: bold;
}
.title{
line-height: ~"calc(@{fontsize_h1}*2 + 2*@{gap})";
}
.logo{
max-height: 100px;
max-width: ~"calc(100% - 4*@{gap})";
}
@media(max-width: @on_phone){
.title, .logo {
font-size: @fontsize_h1*2;
line-height: @fontsize_h1*2.2;
}
}
.m_search{
@iconW: 32px;
@iconMargin: 4px;
margin-top: ~"calc(2vh + 2*@{gap})";
position: relative;
max-width: ~"calc(100% - 1*@{gap})";
width: 340px;
// @media(max-width: @on_laptop){
// width: 1.4*@width_sidebar_m;
// }
line-height: @height_navbar - @gap;
vertical-align: middle;
.form {
position: relative;
display: block;
width: 100%;
}
.icon,.input{
.enable-trans(.3s);
}
.icon {
position: absolute;
display:block;
line-height: @searchbar_height_cover;
height: @searchbar_height_cover;
width: @iconW;
top: 0;
left: @iconMargin+1px;
font-size: @fontsize_base;
color: fade(@color_text_main, 60%);
}
.input {
display: block;
font-size: @fontsize_base;
line-height: @fontsize_base;
height: @searchbar_height_cover;
width: 100%;
color: @color_text_main;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
padding-left: @iconW + @iconMargin;
@media(max-width: @on_phone){
padding-left: @iconW + @iconMargin;
}
border-radius: @height_navbar;
background: lighten(@theme_cardbg, 10%);
border: 1px dashed transparent;
.set-placeholder({
padding-top: 2px;
color: fade(@color_text_main, 60%);
});
&:hover{
~.icon{
color: @theme_main;
}
}
&:focus {
~.icon{
color: @theme_main;
}
border: 1px solid @theme_main;
}
}
}
&.half{
height: ~"calc(60vh - @{gap} - @{height_navbar})";
.title, .logo{
margin-top: ~"calc(22vh - 4*@{gap})";
}
@media(max-width: @on_phone){
height: ~"calc(45vh - @{gap} - @{height_navbar})";
.title, .logo{
margin-top: ~"calc(24vh - 6*@{gap})";
}
}
.m_search{
margin-top: @gap;
}
}
&, a{
color: @theme_main;
}
.menu{
margin-top: @gap;
ul {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
li {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
height: auto;
}
}
ul > li > a{
font-size: @fontsize_small;
padding: 2px;
margin: 0 4px;
.enable-trans();
color: fade(@color_text_main, 85%);
border-bottom: 1px solid transparent;
&:hover, &.active{
color: @theme_main;
border-bottom: 1px solid @theme_main;
}
}
}
.switcher{
& > li{
a{
&:hover {
background: fade(@theme_main, 15%);
}
}
}
}
}
}
.z-depth-nav {
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
}
.z-depth-nav-raised {
box-shadow: @boxshadow_card_raised;
}
.z-depth-main {
box-shadow: @boxshadow_card_normal;
}
.z-depth-main-raised {
box-shadow: @boxshadow_card_raised;
}
.z-depth-0 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
}
.z-depth-1 {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-1-half {
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-3 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1);
}
.z-depth-4 {
box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11);
}
.z-depth-5 {
box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11);
}
.z-depth-0 {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.hoverable {
.enable-trans();
box-shadow: 0;
}
.hoverable:hover {
.enable-trans();
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
::-moz-selection {
background: @color_bg_selection;
}
::selection {
background: @color_bg_selection;
}
// transition
.enable-trans(@time: 0.25s){
transition: all @time ease;
-moz-transition: all @time ease;
-webkit-transition: all @time ease;
-o-transition: all @time ease;
}
.set-placeholder(@rules){
&::-webkit-input-placeholder {@rules();}
&:-moz-placeholder {@rules();}
&::-moz-placeholder {@rules();}
&:-ms-input-placeholder {@rules();}
}
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
text-rendering: geometricPrecision;
margin: 0 0 0.4em 0;
}
h1 {
font-size: @fontsize_h1;
}
h2 {
font-size: @fontsize_h2;
}
h3 {
font-size: @fontsize_h3;
}
h4 {
font-size: @fontsize_h4;
}
h5 {
font-size: @fontsize_h5;
}
h6 {
font-size: @fontsize_h6;
}
a {
color: @black;
cursor: pointer;
text-decoration: none;
.enable-trans();
&:hover {
text-decoration: none;
}
}
pre {
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
-webkit-tab-size: 4;
}
img {
max-width: 100%;
}
/**
* Util
*/
.clearfix {
zoom: 1;
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
.hidden {
text-indent: -9999px;
visibility: hidden;
display: none;
}
.inner {
position: relative;
width: 80%;
max-width: 710px;
margin: 0 auto;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
}
.left {
float: left;
}
.disable-trans {
-moz-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
}
.txt-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul,
ol {
padding-left: 0;
}
li {
list-style: none;
}
.mark {
position: relative;
a {
color: @black;
background: transparent;
display: inline-block;
padding: 0 8px;
border-left: @border_radius_line solid transparent;
background: transparent;
border-radius: @border_radius_code_block;
.enable-trans();
&:hover {
background: fade(@theme_main, 10%);
border-left: @border_radius_line solid @theme_main;
padding: 8px;
}
&:active {
border-left: 2*@border_radius_line solid @theme_main;
}
}
}
ul.h-list {
display: flex;
align-items: center;
height: 100%;
&>li {
// flex: none;
height: 100%;
justify-content: center;
}
}
/**
* Loading bar
*/
#loading-bar-wrapper {
position: fixed;
top: @height_navbar - @loading_height;
// top: 0;
left: 0;
width: 100%;
// overflow: scroll;
z-index: 99999;
}
#loading-bar {
position: fixed;
width: 0;
height: @loading_height;
// height: @height_navbar;
.enable-trans();
background-color: fade(white, 50%);
&.pure{
background-color: fade(@theme_main, 50%);
}
}
.body-wrapper {
position: relative;
display: flex;
width: 100%;
max-width: @width_container;
margin: 0 auto;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.container--flex {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.l_body {
position: relative;
margin: @gap;
margin-top: @gap;
&.nocover{
margin-top: @gap + @height_navbar;
}
@media(max-width: @on_phone) {
margin: @height_navbar + @gap 0 @gap;
border-radius: 0;
}
// padding-top: -@gap/2;
.s-top{
.enable-trans(0.6s);
z-index: 9;
position: fixed;
width: 48px;
height: 48px;
line-height: 48px;
border-radius: 100%;
bottom: @gap*2;
right: @gap*2;
transform: translateY(100px) scale(0);
transform-origin: bottom;
color: @color_text_main;
@media(max-width: @on_pad) {
right: @gap;
}
&.show{
transform: translateY(0) scale(1);
&.hl{
background: @theme_main;
color: white;
box-shadow: @boxshadow_card_normal;
}
}
@media(min-width: @on_pad) {
&:hover{
transform: scale(1.2);
border-radius: 25%;
background: @theme_main;
color: white;
box-shadow: @boxshadow_card_raised;
&.hl{
box-shadow: @boxshadow_card_raised;
}
}
}
}
}
.reveal {
// visibility: hidden;
}
// 如果你只想简单地换个风格,可以只改这里的几项:
// 网页背景颜色
@theme_background: #F4F4F4;
// @theme_background: #454545; // 暗色主题
// 主题色
@theme_main: #1BC3FB;
// 卡片背景颜色
@theme_cardbg: white;
// @theme_cardbg: #555; // 暗色主题
// 如果你想更自由地定制颜色,可以修改这里的几项:
// 背景色 ----------------
// 导航栏背景,默认和主题色保持一致
@color_bg_navbar: @theme_main;
// 代码的背景色
@color_bg_code: fade(@theme_main, 10%);
// 代码块的背景色
@color_bg_code_block: #F4FAFE;
// 引用的颜色
@color_bg_quote: @theme_main;
// 选中部分文字的背景颜色
@color_bg_selection: fade(@color_md_blue, 20%);
// 文字颜色 ----------------
// 标题文字颜色(h1/h2)
@color_text_header: darken(@color_text_main, 5%);
// 标题文字颜色(h3)
@color_text_h3: darken(@theme_main, 5%);
// 链接颜色
@color_text_link: @theme_main;
// 链接高亮颜色
@color_text_highlight: @color_md_deep_orange;
// 在主题色中显示的文本(一般为白或深灰)
@color_text_in_header: white;
// 正文文字颜色
@color_text_main: @dark;
// @color_text_main: white; // 暗色主题
// 颜色
// Material color scheme
@color_md_red: #f44336;
@color_md_pink: #E91E63;
@color_md_purple: #9c27b0;
@color_md_deep_purple: #673ab7;
@color_md_indigo: #3f51b5;
@color_md_light_blue: #4BA7EE;
@color_md_blue: #2196f3;
@color_md_deep_blue: #3367d6;
@color_md_teal: #009688;
@color_md_green: #4caf50;
@color_md_light_green: #8bc34a;
@color_md_orange: #ff9800;
@color_md_deep_orange: #ff5722;
@color_md_brown: #795548;
@color_md_blue_grey: #607d8b;
@color_md_grey: #9e9e9e;
@color_md_light_grey:#e0e0e0;
@color_md_yellow: #FCEC60;
@color_md_amber: #F6C344;
// 基本不变的黑白灰
@black: #444444;
@color_grey: #828282;
@white: #ffffff;
@light: #eeeeee;
@dark: #333333;
// 这些颜色取自macOS
@color_mac_maximize: #3DC550;
@color_mac_minimize: #FFBD2B;
@color_mac_close: #FE5F58;
@color_mac_finder: #1BCDFC;
// xx
@color_light_green: #5CC281;
@color_vue: #4fc08d;
@color_yellow: #e96900;
// 这些颜色由xaoxuu调配
@color_ax_light_red: #FF6868;
@color_ax_red: #F24E32;
@color_ax_blue: #52A1F8;
// 阴影
@boxshadow_base_1: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_2: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_4: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_8: 0 8px 16px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_16: 0 16px 32px 0px rgba(0, 0, 0, 0.1);
// 卡片正常状态的阴影
@boxshadow_card_normal: @boxshadow_base_1, @boxshadow_base_2;
// 卡片漂浮起来时的阴影
@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8, @boxshadow_base_16;
@font-face{
font-family: 'Varela Round';
src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts@19.1.7/VarelaRound/VarelaRound-Regular.ttf);
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'Source Sans Pro';
src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts@master/SourceSansPro/SourceSansPro-Regular.ttf);
font-weight: normal;
font-style: normal;
}
// 大部分文字字体
@fontfamily_base: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif;
// 代码字体
@fontfamily_code: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, 'Ubuntu';
// LOGO字体
@fontfamily_logo: @fontfamily_base;
// 字号
// base
@fontsize_base: 16px;
@fontsize_small: @fontsize_base * 0.875;
@fontsize_footnote: @fontsize_base * 0.7;
@lineheight_base: 1.7;
// title
@fontsize_h1: @fontsize_base * 1.5;
@fontsize_h2: @fontsize_base * 1.5;
@fontsize_h3: @fontsize_base * 1.3;
@fontsize_h4: @fontsize_base * 1.15;
@fontsize_h5: @fontsize_base * 1;
@fontsize_h6: @fontsize_small;
// 文章列表中的标题
@fontsize_list_title: @fontsize_base * 1.5;
// 文章页的标题
@fontsize_article_title: @fontsize_h2 * 1.2;
@fontsize_article_title_phone: @fontsize_h2;
#footer {
position: relative;
padding: 40px 10px 120px 10px;
width: 100%;
color: fade(@color_text_main, 50%);
margin: 0px auto;
font-size: @fontsize_small;
overflow: hidden;
text-align: center;
font-family: @fontfamily_base;
.licenses {
color: fade(@color_text_main, 50%);
text-decoration: underline;
}
.codename {
// color: @color_vue;
text-decoration: underline;
}
.social-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 4px @gap/2;
}
a {
color: fade(@color_text_main, 70%);
padding: 0;
.enable-trans();
&:hover {
color: @color_text_highlight;
}
&.social {
position: relative;
display: inline-block;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
margin: 4px;
border-radius: 100px;
&:hover {
background: fade(@theme_main, 10%);
color: @theme_main;
}
}
}
@media(max-width: @on_pad){
justify-content: center;
}
}
// start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@gap: 16px;
// end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
// start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@on_phone: 580px;
@on_pad: 768px;
@on_laptop: 1024px; // 1024 + 285
@on_desktop: 1350px;
// container
@width_container: 1080px;
@on_modal_threshold: 680px;
// 侧边栏宽度
@width_sidebar: 285px;
@width_sidebar_m: 240px;
// 搜索框的宽度,建议和侧边栏宽度保持一致
@width_searchbar: @width_sidebar;
@width_searchbar_m: @width_sidebar_m;
// 搜索框的高度,建议不要超出导航栏的高度
@height_searchbar: 40px;
@searchbar_height_cover: 44px;
// 一个cell的高度
@height_cell: 36px;
// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 导航栏高度
@height_navbar: 64px;
@fontsize_logo: @fontsize_base * 1.2;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;
// 定位条和页面加载的进度条的高度
@loading_height: 2px;
// end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
// start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@border_radius: 12px; // 圆角半径,可以根据心情随时调整风格
@border_radius_line: 4px; // 线的宽度和滚动条的宽度
@border_radius_code_block: 4px; // 引用、代码块的圆角
@border_radius_searchbar: 8px; // 搜索框的圆角半径,可以根据心情随时调整风格
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
// start: 文字对齐方向 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@text_align_h1: left;
@text_align_h2: left;
@text_align_h3: left;
// end: 文字对齐方向 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
/* Pagination */
#page-nav {
position: relative;
width: 100%;
padding: 20px 0px;
.page-number,
.space {
display: none;
}
.next,
.prev {
font-size: 0.8125em;
font-weight: normal;
color: lighten(@black, 40%);
border-radius: 2px;
&:hover {
color: @black;
}
span {
line-height: 20px;
vertical-align: middle;
&.icon {
position: relative;
top: 1px;
}
}
}
.next {
float: right;
padding: 0 7px 2px 10px;
}
.prev {
float: left;
padding: 0 10px 2px 7px;
}
}
.tog{
position:fixed;
top: @height_navbar + @gap * 2;
right: ~"calc((100% - @{container-width})/2)";
.enable-trans();
@media(max-width: @width_container){
right: 0;
}
@media(max-width: @on_phone){
right: -@width_sidebar;
&.active{
transform: translateX(-@width_sidebar);
}
}
width: @width_sidebar + 6px;
z-index:3;
&:extend(.z-depth-2);
padding: @gap;
border-left: 6px solid @color_bg_navbar;
background: @color_text_in_header;
a {
display: inline-block;
&:hover,&:active,&.active{
color: @color_text_highlight;
}
}
ol{
&.toc-child{
padding-left: @gap;
}
li{
list-style:none;
width: auto;
&:extend(.txt-ellipsis);
}
}
&:empty{
display:none;
}
}
@charset "utf-8";
@import "less/_defines.less";
@import "less/_fonts.less";
@import "less/_normalize.less";
@import "less/_base.less";
@import "less/_header.less";
@import "less/_main.less";
@import "less/_side.less";
@import "less/_toc.less";
@import "less/_archive.less";
@import "less/_article.less";
@import "less/_pagination.less";
@import "less/_search.less";
@import "less/_footer.less";
@import "less/_color.less";
@import "less/_layout.less";
@import "less/_links.less";
此差异已折叠。
此差异已折叠。
此差异已折叠。
(function($){$.fn.snow=function(options){var $flake=$('<div id="snowbox" />').css({"position":"absolute","z-index":"9999","top":"-50px"}).html("&#10052;"),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:1000,flakeColor:"#AFDAEF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-200,endPositionLeft=startPositionLeft-500+Math.random()*500,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo("body").css({left:startPositionLeft,opacity:startOpacity,"font-size":sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,"linear",function(){$(this).remove()})},options.newOn)}})(jQuery);$(function(){$.fn.snow({minSize:5,maxSize:50,newOn:300})});
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册