mirror of
https://github.com/amehime/hexo-theme-shoka.git
synced 2026-04-05 10:42:51 +08:00
add collapse
This commit is contained in:
amehime
@@ -56,6 +56,7 @@ category_map: # edit for Theme.shoka
|
||||
Java: java
|
||||
二进制杂谈: note
|
||||
零基础学Java语言-浙江大学-翁恺: course-1
|
||||
Theme Shoka Documentation: theme-shoka-doc
|
||||
tag_map:
|
||||
|
||||
# Date / Time format
|
||||
@@ -87,18 +88,18 @@ autoprefixer:
|
||||
- '*.min.css'
|
||||
|
||||
markdown:
|
||||
render:
|
||||
html: true
|
||||
xhtmlOut: true
|
||||
breaks: true
|
||||
linkify: true
|
||||
render: # 渲染器设置
|
||||
html: false # 是否过滤 HTML 标签
|
||||
xhtmlOut: true # 使用 '/' 来闭合单标签 （比如 <br />）。
|
||||
breaks: true # 转换段落里的 '\n' 到 <br>。
|
||||
linkify: true # 将类似 URL 的文本自动转换为链接。
|
||||
typographer:
|
||||
quotes: '“”‘’'
|
||||
plugins:
|
||||
plugins: # markdown-it插件设置
|
||||
- plugin:
|
||||
name: markdown-it-toc-and-anchor
|
||||
enable: true
|
||||
options:
|
||||
options: # 文章目录以及锚点应用的class名称，shoka主题必须设置成这样
|
||||
tocClassName: 'toc'
|
||||
anchorClassName: 'anchor'
|
||||
- plugin:
|
||||
@@ -119,7 +120,6 @@ markdown:
|
||||
options:
|
||||
title: "你知道得太多了"
|
||||
|
||||
|
||||
minify:
|
||||
html:
|
||||
enable: true
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"hexo-generator-category": "^1.0.0",
|
||||
"hexo-generator-tag": "^1.0.0",
|
||||
"hexo-renderer-ejs": "^1.0.0",
|
||||
"hexo-renderer-multi-markdown-it": "^0.1.1",
|
||||
"hexo-renderer-multi-markdown-it": "^0.1.3",
|
||||
"hexo-renderer-stylus": "^2.0.0",
|
||||
"hexo-server": "^2.0.0",
|
||||
"hexo-symbols-count-time": "^0.7.1",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,248 @@
|
||||
---
|
||||
title: Step.2 基本配置
|
||||
date: 2020/08/13 20:56:48
|
||||
categories:
|
||||
- [计算机科学, 二进制杂谈, Theme Shoka Documentation]
|
||||
tags:
|
||||
- Hexo
|
||||
- 教程
|
||||
---
|
||||
|
||||
:::primary
|
||||
[:rocket:快速开始](/computer-science/note/theme-shoka-doc/) - [:love_letter:依赖插件](/computer-science/note/theme-shoka-doc/dependents/) - [**:pushpin:基本配置**](/computer-science/note/theme-shoka-doc/config/) - [:rainbow:界面显示](/computer-science/note/theme-shoka-doc/display/) - [:unicorn:特殊功能](/computer-science/note/theme-shoka-doc/special/)
|
||||
:::
|
||||
|
||||
# 站点别称
|
||||
```yml
|
||||
alternate: Yume Shoka
|
||||
```
|
||||
这里设置的名称代替Logo，显示在页面顶部，以及页尾:copyright:处
|
||||
|
||||
# 静态文件目录
|
||||
```yml
|
||||
statics: / #//cdn.jsdelivr.net/gh/amehime/shoka@latest/
|
||||
```
|
||||
默认值是`/`，指使用本地静态文件
|
||||
可以修改成`//cdn.jsdelivr.net/gh/您的github用户名/您的项目名@latest/`这种形式，以使用jsDelivr进行加速。
|
||||
PS：jsDelivr并不是实时更新，重新生成文件后需要耐心等待
|
||||
|
||||
```yml
|
||||
assets: assets
|
||||
css: css
|
||||
js: js
|
||||
images: images
|
||||
```
|
||||
静态文件所处目录的实际目录名，这些一般不改。
|
||||
|
||||
# 加载谷歌字体
|
||||
```yml
|
||||
font:
|
||||
enable: true
|
||||
# Font options:
|
||||
# `external: true` will load this font family from `host` above.
|
||||
# `family: Times New Roman`. Without any quotes.
|
||||
# `size: x.x`. Use `em` as unit. Default: 1 (16px)
|
||||
|
||||
# Global font settings used for all elements inside <body>.
|
||||
global:
|
||||
external: true
|
||||
family: Mulish
|
||||
size:
|
||||
|
||||
# Font settings for alternate title.
|
||||
logo:
|
||||
external: true
|
||||
family: Fredericka the Great
|
||||
size: 3.5
|
||||
|
||||
# Font settings for site title.
|
||||
title:
|
||||
external: true
|
||||
family: Noto Serif JP
|
||||
size: 2.5
|
||||
|
||||
# Font settings for headlines (<h1> to <h6>).
|
||||
headings:
|
||||
external: true
|
||||
family: Noto Serif SC
|
||||
size:
|
||||
|
||||
# Font settings for posts.
|
||||
posts:
|
||||
external: true
|
||||
family:
|
||||
|
||||
# Font settings for <code> and code blocks.
|
||||
codes:
|
||||
external: true
|
||||
family: Inconsolata
|
||||
```
|
||||
此功能基本参考NexT。
|
||||
加粗标题的字体总是使用`Noto Serif`，为了正确友好的显示日文中的汉字，会先后加载`headings`和`title`的字体设置。
|
||||
|
||||
# 菜单与社交按钮icon
|
||||
这里没有直接使用Font Awesome，是因为用不到那么多icon感觉非常浪费，因此在Iconfont上重新建立了一个项目。
|
||||
`font-family`设为`ic`，所有字体样式前缀为`i-`，具体参见`themes/shoka/source/css/scaffolding/iconfont.styl`。
|
||||
全部图标预览可以打开`themes/shoka/source/css/_common/scaffolding/icon/demo_index.html`文件查看。
|
||||
|
||||
```yml
|
||||
menu:
|
||||
home: / || home
|
||||
about: /about/ || user
|
||||
posts:
|
||||
default: / || feather
|
||||
archives: /archives/ || list-alt
|
||||
categories: /categories/ || th
|
||||
tags: /tags/ || tags
|
||||
# friends: /friends/ || heart
|
||||
# links: /links/ || magic
|
||||
|
||||
social:
|
||||
github: https://github.com/yourname || github || "#191717"
|
||||
#google: https://plus.google.com/yourname || google
|
||||
twitter: https://twitter.com/yourname || twitter || "#00aff0"
|
||||
zhihu: https://www.zhihu.com/people/yourname || zhihu || "#1e88e5"
|
||||
music: https://music.163.com/#/user/home?id=yourid || cloud-music || "#e60026"
|
||||
weibo: https://weibo.com/yourname || weibo || "#ea716e"
|
||||
about: https://about.me/yourname || address-card || "#3b5998"
|
||||
#email: mailto:yourname@mail.com || envelope || "#55acd5"
|
||||
#facebook: https://www.facebook.com/yourname || facebook
|
||||
#stackoverflow: https://stackoverflow.com/yourname || stack-overflow
|
||||
#youtube: https://youtube.com/yourname || youtube
|
||||
#instagram: https://instagram.com/yourname || instagram
|
||||
#skype: skype:yourname?call|chat || skype
|
||||
```
|
||||
如上，使用`||`作为分隔符，依次为 `链接 || 图标 || 颜色`。
|
||||
注意，只需要写图标名称，如`github`，则会自动转换为`ic i-github`。
|
||||
十六进制颜色码需要`""`包绕。
|
||||
|
||||
`menu` 支持一级子目录，子目录设置中的第一项必须为`default`，用来定义父级按钮的样式。
|
||||
菜单显示文字在`<root>/themes/shoka/languages/`语言包中定义：
|
||||
|
||||
```yml
|
||||
menu:
|
||||
home: 首页
|
||||
posts: 文章
|
||||
archives: 归档
|
||||
categories: 分类
|
||||
tags: 标签
|
||||
about: 关于
|
||||
search: 搜索
|
||||
friends: 友達
|
||||
links: 网址
|
||||
travellings: 开往
|
||||
```
|
||||
|
||||
# 图片修改
|
||||
位于`<root>/themes/shoka/source/images/`目录里的图片们都是可以修改的。
|
||||
|
||||
1. 修改头像 `avatar.jpg`
|
||||
如果要设置不同的文件名，请在主题`_config.yml`修改
|
||||
```yml
|
||||
sidebar:
|
||||
# Replace the default avatar image and set the url here.
|
||||
avatar: avatar.jpg
|
||||
```
|
||||
|
||||
2. 修改打赏二维码文件，共三个
|
||||
|
||||
3. 修改 `favicon.ico`和`apple-touch-icon.png`
|
||||
|
||||
4. 修改随机图库
|
||||
图片列表位于`<root>/themes/shoka/_images.yml`中。
|
||||
使用了渣浪图库，使用一些上传工具，比如[这里](https://pic.gimhoy.com/)
|
||||
上传后图片的链接是`http://wx4.sinaimg.cn/large/6833939bly1gicmnywqgpj20zk0m8dwx.jpg`。
|
||||
只需要增加一行，写上`- 6833939bly1gicmnywqgpj20zk0m8dwx.jpg`。
|
||||
|
||||
# 背景音乐
|
||||
在主题`_config.yml`文件中设置全局播放列表。
|
||||
在文章的 Front Matter 中，设置文章专有播放列表，访问该文章页面时，将覆盖全局配置。
|
||||
|
||||
```yml
|
||||
audio:
|
||||
- https://music.163.com/song?id=1387098940
|
||||
- https://music.163.com/#/playlist?id=2088001742
|
||||
- https://www.xiami.com/collect/250830668
|
||||
- https://y.qq.com/n/yqq/playsquare/3535982902.html
|
||||
```
|
||||
如上，可以直接使用网易云、虾米、QQ音乐的播放列表、单曲，可以同时填写多个。
|
||||
|
||||
|
||||
# 文章字数及阅读时间统计
|
||||
|
||||
安装好hexo-symbols-count-time插件后，不需要修改站点配置文件，直接使用插件默认配置就行。
|
||||
|
||||
需要修改主题配置文件，找到两处`cout`，修改为`true`：
|
||||
|
||||
```yml
|
||||
# 文章字数统计
|
||||
post:
|
||||
count: true
|
||||
|
||||
# 页尾全站统计
|
||||
footer:
|
||||
since: 2010
|
||||
count: true
|
||||
```
|
||||
|
||||
# 文章评论
|
||||
在主题`_config.yml`文件中设置好LeanCloud的appId和appKey，[如何获取戳此](https://valine.js.org/quickstart.html)。
|
||||
|
||||
```yml
|
||||
valine:
|
||||
appId: #Your_appId
|
||||
appKey: #Your_appkey
|
||||
placeholder: ヽ(○´∀`)ﾉ♪ # Comment box placeholder
|
||||
avatar: mp # Gravatar style
|
||||
pageSize: 10 # Pagination size
|
||||
lang: zh-CN
|
||||
visitor: true # Article reading statistic
|
||||
recordIP: true # Whether to record the commenter IP
|
||||
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
|
||||
requiredFields:
|
||||
- nick
|
||||
- mail
|
||||
enableQQ: true
|
||||
masters: ['主人email的MD5值', '另一个email的MD5值']
|
||||
masterTag: 主人
|
||||
tips: "昵称框中填入QQ号，将自动获取QQ昵称&邮箱&头像；其他邮箱由Gavatar提供头像。"
|
||||
```
|
||||
|
||||
# 加载第三方组件
|
||||
```yml
|
||||
vendors:
|
||||
css:
|
||||
katex: npm/katex@0/dist/katex.min.css
|
||||
comment: css/comment.css
|
||||
js:
|
||||
pace: npm/pace-js@1.0.2/pace.min.js
|
||||
pjax: npm/pjax@0.2.8/pjax.min.js
|
||||
fetch: npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js
|
||||
velocity: npm/velocity-animate@1.5.2/velocity.min.js
|
||||
velocity_ui: npm/velocity-animate@1.5.2/velocity.ui.min.js
|
||||
algolia: npm/algoliasearch@4/dist/algoliasearch-lite.umd.js
|
||||
instantsearch: npm/instantsearch.js@4/dist/instantsearch.production.min.js
|
||||
lazyload: npm/lozad@1/dist/lozad.min.js
|
||||
quicklink: npm/quicklink@2/dist/quicklink.umd.js
|
||||
mediumzoom: npm/medium-zoom@1.0.5/dist/medium-zoom.min.js
|
||||
valine: js/valine.js
|
||||
copy_tex: npm/katex@0/dist/contrib/copy-tex.min.js
|
||||
chart: npm/frappe-charts@1.5.0/dist/frappe-charts.min.iife.min.js
|
||||
```
|
||||
包括
|
||||
|
||||
--|--|--
|
||||
`pace` | 加载进度条|全局
|
||||
`pjax` | 页面无刷新加载|全局
|
||||
`velocity` | js页面动画效果|全局
|
||||
`algolia` `instantsearch`| 基于algolia的站内搜索|全局
|
||||
`lazyload` | 图片懒加载|全局
|
||||
`quicklink` | 链接资源预加载|全局
|
||||
`fetch` | 获取播放列表|全局
|
||||
`katex` `copy_tex`|数学公式显示及复制|按需
|
||||
`mediumzoom` | 图片放大显示|按需
|
||||
`valine` | 基于LeanCloud的评论系统及文章阅读次数统计|按需
|
||||
`chart` | 图表显示|按需
|
||||
|
||||
以上文件加载全部基于jsDelivr，并对全局加载的组件进行了文件合并。
|
||||
如果不明白啥意思，则不要轻易修改。
|
||||
@@ -0,0 +1,186 @@
|
||||
---
|
||||
title: Step.1 依赖插件
|
||||
date: 2020/08/13 20:46:48
|
||||
categories:
|
||||
- [计算机科学, 二进制杂谈, Theme Shoka Documentation]
|
||||
tags:
|
||||
- Hexo
|
||||
- 教程
|
||||
---
|
||||
|
||||
:::primary
|
||||
[:rocket:快速开始](/computer-science/note/theme-shoka-doc/) - [**:love_letter:依赖插件**](/computer-science/note/theme-shoka-doc/dependents/) - [:pushpin:基本配置](/computer-science/note/theme-shoka-doc/config/) - [:rainbow:界面显示](/computer-science/note/theme-shoka-doc/display/) - [:unicorn:特殊功能](/computer-science/note/theme-shoka-doc/special/)
|
||||
:::
|
||||
|
||||
:::warning
|
||||
请务必将hexo-renderer-multi-markdown-it升级到最新版，目前为 0.1.3
|
||||
:::
|
||||
|
||||
Theme Shoka依赖以下Hexo插件
|
||||
|
||||
插件名称|npm地址|功能|依赖程度
|
||||
--|--|--|--
|
||||
hexo-renderer-multi-markdown-it|[链接](https://www.npmjs.com/package/hexo-renderer-multi-markdown-it)|md文件渲染器，压缩css/js/html | 必需
|
||||
hexo-autoprefixer|[链接](https://www.npmjs.com/package/hexo-autoprefixer)|给生成的css文件们添加浏览器前缀 | 必需
|
||||
hexo-algoliasearch|[链接](https://www.npmjs.com/package/hexo-algoliasearch)|站内搜索功能 | 搜索按钮失灵
|
||||
hexo-symbols-count-time|[链接](https://www.npmjs.com/package/hexo-symbols-count-time)|文章或站点字数及阅读时间统计 | 统计没有
|
||||
hexo-feed|[链接](https://www.npmjs.com/package/hexo-feed)|生成Feed文件| Feed文件没有
|
||||
|
||||
> 没有正确安装以上插件的话，本主题会报错or无法正确显示or部分功能失效。
|
||||
> `hexo-renderer-multi-markdown-it`请注意升级到最新版
|
||||
|
||||
安装完以上插件后，修改站点`_config.yml`文件，加入相关配置。
|
||||
|
||||
# multi-markdown-it安装与配置
|
||||
|
||||
## 安装
|
||||
|
||||
1. 安装前，记得务必卸载掉默认的`hexo-renderer-marked`，以及别的markdown文件渲染器。
|
||||
```bash
|
||||
npm un hexo-renderer-marked --save
|
||||
# 或者
|
||||
yarn remove hexo-renderer-marked
|
||||
```
|
||||
|
||||
2. 安装
|
||||
```bash
|
||||
npm i hexo-renderer-multi-markdown-it --save
|
||||
# 或者
|
||||
yarn add hexo-renderer-multi-markdown-it
|
||||
```
|
||||
|
||||
3. 如果安装缓慢，或者失败
|
||||
如报错
|
||||
```bash
|
||||
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
|
||||
```
|
||||
因为有一步需要下载puppeteer里的Chromium内核，基于天朝内部网络现状，这一步能不能成功要靠科学和运气，所以为了避免安装失败，需要加上`--ignore-scripts`跳过Chromium内核的下载。
|
||||
```bash
|
||||
npm i hexo-renderer-multi-markdown-it --save --ignore-scripts
|
||||
# 或者
|
||||
yarn add hexo-renderer-multi-markdown-it --ignore-scripts
|
||||
```
|
||||
puppeteer主要是用来渲染mermaid流程图，只要文章中不使用mermaid就没有任何问题，如果要使用mermaid建议还是想办法完全安装。
|
||||
|
||||
## 配置
|
||||
|
||||
1. 加入`markdown`配置，用来渲染md文件
|
||||
```yml
|
||||
markdown:
|
||||
render: # 渲染器设置
|
||||
html: false # 是否过滤 HTML 标签
|
||||
xhtmlOut: true # 使用 '/' 来闭合单标签 （比如 <br />）。
|
||||
breaks: true # 转换段落里的 '\n' 到 <br>。
|
||||
linkify: true # 将类似 URL 的文本自动转换为链接。
|
||||
typographer:
|
||||
quotes: '“”‘’'
|
||||
plugins: # markdown-it插件设置
|
||||
- plugin:
|
||||
name: markdown-it-toc-and-anchor
|
||||
enable: true
|
||||
options: # 文章目录以及锚点应用的class名称，shoka主题必须设置成这样
|
||||
tocClassName: 'toc'
|
||||
anchorClassName: 'anchor'
|
||||
- plugin:
|
||||
name: markdown-it-multimd-table
|
||||
enable: true
|
||||
options:
|
||||
multiline: true
|
||||
rowspan: true
|
||||
headerless: true
|
||||
- plugin:
|
||||
name: ./markdown-it-furigana
|
||||
enable: true
|
||||
options:
|
||||
fallbackParens: "()"
|
||||
- plugin:
|
||||
name: ./markdown-it-spoiler
|
||||
enable: true
|
||||
options:
|
||||
title: "你知道得太多了"
|
||||
```
|
||||
|
||||
2. 加入`minify`配置，压缩css/js/html
|
||||
```yml
|
||||
minify:
|
||||
html:
|
||||
enable: true
|
||||
exclude: # 排除hexo-feed用到的模板文件
|
||||
- '**/json.ejs'
|
||||
- '**/atom.ejs'
|
||||
- '**/rss.ejs'
|
||||
css:
|
||||
enable: true
|
||||
exclude:
|
||||
- '**/*.min.css'
|
||||
js:
|
||||
enable: true
|
||||
mangle:
|
||||
toplevel: true
|
||||
output:
|
||||
compress:
|
||||
exclude:
|
||||
- '**/*.min.js'
|
||||
```
|
||||
|
||||
3. 停用默认代码高亮功能
|
||||
```yml
|
||||
highlight:
|
||||
enable: false
|
||||
|
||||
prismjs:
|
||||
enable: false
|
||||
```
|
||||
|
||||
# autoprefixer配置建议
|
||||
|
||||
```yml
|
||||
autoprefixer:
|
||||
exclude:
|
||||
- '*.min.css'
|
||||
```
|
||||
|
||||
缺少这个插件，首页卡片翻转效果在部分浏览器中无法正确显示。
|
||||
|
||||
# algolia配置建议
|
||||
|
||||
```yml
|
||||
algolia:
|
||||
appId: #Your appId
|
||||
apiKey: #Your apiKey
|
||||
adminApiKey: #Your adminApiKey
|
||||
chunkSize: 5000
|
||||
indexName: #"shoka"
|
||||
fields:
|
||||
- title #必须配置
|
||||
- path #必须配置
|
||||
- categories #推荐配置
|
||||
- content:strip:truncate,0,2000
|
||||
- gallery
|
||||
- photos
|
||||
- tags
|
||||
```
|
||||
|
||||
# feed配置建议
|
||||
|
||||
```yml
|
||||
keywords: #站点关键词，用“,”分隔
|
||||
|
||||
feed:
|
||||
limit: 20
|
||||
order_by: "-date"
|
||||
tag_dir: false
|
||||
category_dir: false
|
||||
rss:
|
||||
enable: true
|
||||
template: "themes/shoka/layout/_alternate/rss.ejs"
|
||||
output: "rss.xml"
|
||||
atom:
|
||||
enable: true
|
||||
template: "themes/shoka/layout/_alternate/atom.ejs"
|
||||
output: "atom.xml"
|
||||
jsonFeed:
|
||||
enable: true
|
||||
template: "themes/shoka/layout/_alternate/json.ejs"
|
||||
output: "feed.json"
|
||||
```
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
title: Step.3 界面显示
|
||||
date: 2020/08/13 21:12:48
|
||||
categories:
|
||||
- [计算机科学, 二进制杂谈, Theme Shoka Documentation]
|
||||
tags:
|
||||
- Hexo
|
||||
- 教程
|
||||
---
|
||||
|
||||
:::primary
|
||||
[:rocket:快速开始](/computer-science/note/theme-shoka-doc/) - [:love_letter:依赖插件](/computer-science/note/theme-shoka-doc/dependents/) - [:pushpin:基本配置](/computer-science/note/theme-shoka-doc/config/) - [**:rainbow:界面显示**](/computer-science/note/theme-shoka-doc/display/) - [:unicorn:特殊功能](/computer-science/note/theme-shoka-doc/special/)
|
||||
:::
|
||||
|
||||
# 文章封面图
|
||||
- 如果文章的Front Matter设置了`cover: image path`，则封面会显示这张图片。
|
||||
```yml 举个栗子
|
||||
title: Images
|
||||
cover: assets/wallpaper-2572384.jpg
|
||||
# 或者写成
|
||||
cover: http://placehold.it/350x150.jpg
|
||||
---
|
||||
```
|
||||
这里`cover`的值可以是位于`source`目录里的图片文件，此处是`<root>/source/assets/wallpaper-2572384.jpg`文件，也可以是一个某网址。
|
||||
|
||||
- 如果文章是一个`gallery post`，即Front Matter设置了`photos`，则会封面会显示设置的第一张图片。
|
||||
```yml 举个栗子
|
||||
title: Gallery Post
|
||||
photos:
|
||||
- assets/wallpaper-2572384.jpg
|
||||
- assets/wallpaper-2311325.jpg
|
||||
- assets/wallpaper-878514.jpg
|
||||
- http://placehold.it/350x150.jpg
|
||||
---
|
||||
```
|
||||
此时默认会显示第一个图片，即位于`<root>/source/assets/`目录里的`wallpaper-2572384.jpg`。
|
||||
|
||||
- 如果以上设置均不存在，将显示一张随机图片。
|
||||
图片取自`<root>/themes/shoka/_images.yml`中，使用渣浪图床。
|
||||
|
||||
# 首页置顶文章
|
||||
在文章的Front Matter设置`sticky: true`，则该文章将显示在首页最上方的`置顶文章`列。
|
||||
多篇文章按照发布时间倒序排列，不分页。
|
||||
|
||||
```raw
|
||||
---
|
||||
title: 置顶文章
|
||||
sticky: true
|
||||
---
|
||||
```
|
||||
|
||||
# 首页精选分类
|
||||
想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示的分类加上封面图。
|
||||
|
||||
1. 首先，修改站点的`_config.yml`
|
||||
找到`category_map:`，配置每个分类对应的英文映射，比如：
|
||||
```yml
|
||||
category_map:
|
||||
计算机科学: computer-science
|
||||
Java: java
|
||||
C++: cpp
|
||||
二进制杂谈: note
|
||||
计算机程序设计（C++）-西安交通大学: course-1
|
||||
零基础学Java语言-浙江大学-翁恺: course-1
|
||||
面向对象程序设计-Java语言-浙江大学-翁恺: course-2
|
||||
```
|
||||
> 注意：hexo会自动处理路径中的特殊字符，~\`!@#$%^&*()-_+=[]{}|\\;:"'<>,.?以及空格，这些全部会被替换成`-`
|
||||
> 所以避免在设置中使用上述字符，否则可导致无法抓取到目录下的`cover.jpg`
|
||||
|
||||
2. 在`<root>/source/_posts`文件夹相应的目录里，存放封面图
|
||||
例子：如 [第1周 计算](https://shoka.lostyu.me/computer-science/java/course-1/week-1/) 这篇文章。
|
||||
所处的分类是
|
||||
```yml
|
||||
categories:
|
||||
- [计算机科学, Java, 零基础学Java语言-浙江大学-翁恺]
|
||||
```
|
||||
现在需要在首页显示`零基础学Java语言-浙江大学-翁恺`这个分类，翻转卡片后，显示这个分类下的文章们。
|
||||
而该分类经过英文映射，它的路径将是`/computer-science/java/course-1/`。
|
||||
|
||||
那么，请在`<root>/source/_posts/computer-science/java/course-1/`的目录下放置`cover.jpg`文件。
|
||||
只要`分类路径`对应的目录下**存在**`cover.jpg`文件，这个分类就会在首页显示。
|
||||
在进行`hexo g`时，本分类的封面图会自动被复制到public目录里相应的位置。
|
||||
|
||||
3. 事实上，为了方便文章管理，这个分类下所有文章的md文件，我都会放在`<root>/source/_posts/computer-science/java/course-1/`这个目录下。
|
||||
|
||||
且站点`_config.yml`里，永久链接设置如下
|
||||
```yml
|
||||
permalink: :title/
|
||||
```
|
||||
`hexo g`后，文章的html文件们将全部生成到`<root>/public/computer-science/java/course-1/`目录。
|
||||
具体可以查看[本博客的github仓库](https://github.com/amehime/shoka)。
|
||||
|
||||
4. 文章详情界面中的`系列文章`，显示的是与当前文章同一分类的其他文章，并按照文章名正序排序。
|
||||
|
||||
> o(\*￣▽￣\*)ゞ
|
||||
> 其实，不设置`category_map`也可以，只要在分类路径对应的文件夹下存在`cover.jpg`文件就行。
|
||||
> 现在，这项功能与`category_dir`的配置也无关，`hexo g`生成后，图片会自动被转移到`category_dir`的相关子目录下。
|
||||
|
||||
# 底部widgets
|
||||
目前页面底部可以显示两个小部件，即`随机文章`和`最近评论`。
|
||||
可以在主题`_config.yml`中配置开关。
|
||||
|
||||
```yml
|
||||
widgets:
|
||||
random_posts: true
|
||||
recent_comments: true
|
||||
```
|
||||
@@ -0,0 +1,734 @@
|
||||
---
|
||||
title: Step.4 主题特殊功能
|
||||
date: 2020/08/13 21:45:48
|
||||
categories:
|
||||
- [计算机科学, 二进制杂谈, Theme Shoka Documentation]
|
||||
tags:
|
||||
- Hexo
|
||||
- 教程
|
||||
math: true
|
||||
mermaid: true
|
||||
---
|
||||
|
||||
:::primary
|
||||
[:rocket:快速开始](/computer-science/note/theme-shoka-doc/) - [:love_letter:依赖插件](/computer-science/note/theme-shoka-doc/dependents/) - [:pushpin:基本配置](/computer-science/note/theme-shoka-doc/config/) - [:rainbow:界面显示](/computer-science/note/theme-shoka-doc/display/) - [**:unicorn:特殊功能**](/computer-science/note/theme-shoka-doc/special/)
|
||||
:::
|
||||
|
||||
:::info
|
||||
以下介绍可以使用的markdown或者标签代码。
|
||||
功能大部分基于`hexo-renderer-multi-markdown-it`渲染器，尤其是代码块的显示，与默认渲染器不兼容。
|
||||
:::
|
||||
|
||||
# `links` 链接块
|
||||
本功能参考NexT，基于Hexo Tag功能，用来建立友链或其他网址链接功能。
|
||||
|
||||
文章中的使用格式：
|
||||
|
||||
1. 使用`links`标签块，包围`yml`语法书写的内容，字段包括
|
||||
|
||||
--|--|--
|
||||
`site`|站点名称|必填
|
||||
`owner`|管理员名字|可选，默认为`site`的值
|
||||
`url`|站点链接|必填
|
||||
`desc`|站点描述|可选，默认为`url`的值
|
||||
`image`|站点图片|可选，默认为`images/404.png`
|
||||
`color`|方块颜色|可选，默认为`#666`
|
||||
|
||||
```raw
|
||||
{% links %}
|
||||
- site: #站点名称
|
||||
owner: #管理员名字
|
||||
url: #站点网址
|
||||
desc: #简短描述
|
||||
image: #一张图片
|
||||
color: #颜色代码
|
||||
{% endlinks %}
|
||||
```
|
||||
|
||||
举个栗子：
|
||||
|
||||
```raw
|
||||
{% links %}
|
||||
- site: 優萌初華
|
||||
owner: 霜月琉璃
|
||||
url: https://shoka.lostyu.me
|
||||
desc: 琉璃的医学 & 编程笔记
|
||||
image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
|
||||
color: "#e9546b"
|
||||
|
||||
- site: 優萌初華
|
||||
owner: 霜月琉璃
|
||||
url: https://shoka.lostyu.me
|
||||
image: images/avatar.jpg
|
||||
|
||||
- site: 優萌初華
|
||||
url: https://shoka.lostyu.me
|
||||
desc: 琉璃的医学 & 编程笔记
|
||||
color: "#9d5b8b"
|
||||
{% endlinks %}
|
||||
```
|
||||
|
||||
{% links %}
|
||||
- site: 優萌初華
|
||||
owner: 霜月琉璃
|
||||
url: https://shoka.lostyu.me
|
||||
desc: 琉璃的医学 & 编程笔记
|
||||
image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
|
||||
color: "#e9546b"
|
||||
|
||||
- site: 優萌初華
|
||||
owner: 霜月琉璃
|
||||
url: https://shoka.lostyu.me
|
||||
image: images/avatar.jpg
|
||||
|
||||
- site: 優萌初華
|
||||
url: https://shoka.lostyu.me
|
||||
desc: 琉璃的医学 & 编程笔记
|
||||
color: "#9d5b8b"
|
||||
{% endlinks %}
|
||||
|
||||
|
||||
2. 以上标签块里的内容，还可以保存到一个`yml`文件中，然后使用`linksfile`标签。
|
||||
其中，`path`位于`<root>/source`目录下。
|
||||
|
||||
```raw
|
||||
{% linksfile [path] %}
|
||||
```
|
||||
|
||||
举个栗子：
|
||||
|
||||
```raw
|
||||
{% linksfile friends/_data.yml %}
|
||||
```
|
||||
|
||||
# `code`代码块
|
||||
|
||||
使用`markdown-it-prism`进行代码高亮，支持显示行号、行高亮`mark`、命令行提示符`command`、代码块标题。
|
||||
|
||||
基本格式：`[language] [title] [url] [link text] [mark] [command]`
|
||||
|
||||
选项|描述|默认值
|
||||
--|--|--
|
||||
language| - 支持的语言[戳此](https://prismjs.com/#supported-languages)|null \
|
||||
| | - 如果不需要代码高亮，但希望显示代码块样式，则设为`raw` | \
|
||||
| | - 留空或设为`info`，将不显示代码高亮和代码块样式 | |
|
||||
title|代码块的标题文字|null
|
||||
url|代码块标题右侧显示的链接|null
|
||||
link text|上述链接显示的标题|link
|
||||
mark|行高亮显示，格式为`mark:行号,行号开始-行号结束,其他行号`。| null \
|
||||
| |例如`mark:1,4-7,10`，将高亮显示第1、4、5、6、7、10行| |
|
||||
command|命令行提示符，格式为`command:("提示内容":行号,行号||"提示内容":行号开始-行号结束)`| null \
|
||||
| |例如`command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)` | |
|
||||
|
||||
~~~raw
|
||||
```java 行高亮 https://shoka.lostyu.me 参考链接 mark:1,6-7
|
||||
import java.util.Scanner;
|
||||
...
|
||||
Scanner in = new Scanner(System.in);
|
||||
// 输入Scan之后，按下键盘 Alt + “/” 键，Eclipse下自动补全。
|
||||
|
||||
System.out.println(in.nextLine());
|
||||
System.out.println("Hello" + " world.");
|
||||
```
|
||||
|
||||
```bash 命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
|
||||
pwd
|
||||
/usr/home/chris/bin
|
||||
ls -la
|
||||
total 2
|
||||
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
|
||||
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
|
||||
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
|
||||
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy
|
||||
git add -A
|
||||
git commit -m "update"
|
||||
git push
|
||||
```
|
||||
~~~
|
||||
|
||||
```java 行高亮 https://shoka.lostyu.me 参考链接 mark:1,6-7
|
||||
import java.util.Scanner;
|
||||
...
|
||||
Scanner in = new Scanner(System.in);
|
||||
// 输入Scan之后，按下键盘 Alt + “/” 键，Eclipse下自动补全。
|
||||
|
||||
System.out.println(in.nextLine());
|
||||
System.out.println("Hello" + " world.");
|
||||
```
|
||||
|
||||
```bash 命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
|
||||
pwd
|
||||
/usr/home/chris/bin
|
||||
ls -la
|
||||
total 2
|
||||
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
|
||||
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
|
||||
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
|
||||
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy
|
||||
git add -A
|
||||
git commit -m "update"
|
||||
git push
|
||||
```
|
||||
|
||||
# `quiz` 练习题与答案
|
||||
这个功能是用来显示练习题的。
|
||||
点击选项可以显示答案，以及答案解析。
|
||||
看几个例子
|
||||
|
||||
~~~raw
|
||||
1. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}
|
||||
|
||||
2. 有基类`SHAPE`，派生类`CIRCLE`，声明如下变量： {.quiz .multi}
|
||||
```cpp
|
||||
SHAPE shape1,*p1;
|
||||
CIRCLE circle1,*q1;
|
||||
```
|
||||
下列哪些项是“派生类对象替换基类对象”。
|
||||
- `p1=&circle1;` {.correct}
|
||||
- `q1=&shape1;`
|
||||
- `shape1=circle1;` {.correct}
|
||||
- `circle1=shape1;`
|
||||
{.options}
|
||||
> - :heavy_check_mark: 令基类对象的指针指向派生类对象
|
||||
> - :x: 派生类指针指向基类的引用
|
||||
> - :heavy_check_mark: 派生类对象给基类对象赋值
|
||||
> - :x: 基类对象给派生类对象赋值
|
||||
> {.options}
|
||||
|
||||
3. 下列叙述正确的是 []{.gap} 。 {.quiz}
|
||||
- 虚函数只能定义成无参函数
|
||||
- 虚函数不能有返回值
|
||||
- 能定义虚构造函数
|
||||
- A、B、C都不对 {.correct}
|
||||
{.options}
|
||||
|
||||
10. 如果定义`int e=8; double f=6.4, g=8.9;`，则表达式 `f+int(e/3*int(f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill}
|
||||
> 注意运算顺序和数据类型
|
||||
> [8.4]{.mistake}
|
||||
~~~
|
||||
|
||||
1. 下列叙述正确的是 []{.gap} 。 {.quiz}
|
||||
- 虚函数只能定义成无参函数
|
||||
- 虚函数不能有返回值
|
||||
- 能定义虚构造函数
|
||||
- A、B、C都不对 {.correct}
|
||||
{.options}
|
||||
|
||||
2. 有基类`SHAPE`，派生类`CIRCLE`，声明如下变量： {.quiz .multi}
|
||||
```cpp
|
||||
SHAPE shape1,*p1;
|
||||
CIRCLE circle1,*q1;
|
||||
```
|
||||
下列哪些项是“派生类对象替换基类对象”。
|
||||
- `p1=&circle1;` {.correct}
|
||||
- `q1=&shape1;`
|
||||
- `shape1=circle1;` {.correct}
|
||||
- `circle1=shape1;`
|
||||
{.options}
|
||||
> - :heavy_check_mark: 令基类对象的指针指向派生类对象
|
||||
> - :x: 派生类指针指向基类的引用
|
||||
> - :heavy_check_mark: 派生类对象给基类对象赋值
|
||||
> - :x: 基类对象给派生类对象赋值
|
||||
> {.options}
|
||||
|
||||
3. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}
|
||||
|
||||
4. 如果定义`int e=8; double f=6.4, g=8.9;`，则表达式 `f+int(e/3*int(f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill}
|
||||
> 注意运算顺序和数据类型
|
||||
> [8.4]{.mistake}
|
||||
|
||||
|
||||
## 使用说明
|
||||
本功能基于`markdown-it-bracketed-spans`和`markdown-it-attrs`
|
||||
|
||||
标签|含义
|
||||
--|--
|
||||
`{.quiz}` | 选择题
|
||||
`{.quiz .multi}` | 多选题
|
||||
`{.quiz .true}` | 正确的判断题
|
||||
`{.quiz .false}` | 错误的判断题
|
||||
`{.quiz .fill}` | 填空题
|
||||
`[]{.gap}` | 空白下划线
|
||||
`[答案内容]{.gap}` | 答案内容带下划线
|
||||
`{.options}` | ABCDE选项
|
||||
`{.correct}` | 选择题的正确选项
|
||||
`>` | 答案解析
|
||||
`[8.4]{.mistake}` | 错题备注
|
||||
|
||||
# `emoji` 绘文字
|
||||
|
||||
本功能基于`markdown-it-emoji`，所有[标签参考戳此](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json)
|
||||
|
||||
```raw
|
||||
:kissing_heart:
|
||||
:ring:
|
||||
:notes:
|
||||
```
|
||||
|
||||
:kissing_heart: :ring: :notes:
|
||||
|
||||
# `effects` 文字特效
|
||||
|
||||
本功能基于`markdown-it-ins`、 `markdown-it-bracketed-spans`和`markdown-it-attrs`
|
||||
|
||||
> 本主题风格颜色通用样式：default、primary、success、info、warning、danger
|
||||
|
||||
```raw
|
||||
++下划线++
|
||||
++波浪线++{.wavy}
|
||||
++着重点++{.dot}
|
||||
++紫色下划线++{.primary}
|
||||
++绿色波浪线++{.wavy .success}
|
||||
++黄色着重点++{.dot .warning}
|
||||
[赤橙黄绿青蓝紫]{.rainbow}
|
||||
[红色]{.red}
|
||||
[粉色]{.pink}
|
||||
[橙色]{.orange}
|
||||
[红色]{.yellow}
|
||||
[绿色]{.green}
|
||||
[靛青]{.aqua}
|
||||
[蓝色]{.blue}
|
||||
[紫色]{.purple}
|
||||
[灰色]{.grey}
|
||||
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
|
||||
```
|
||||
|
||||
++下划线++
|
||||
++波浪线++{.wavy}
|
||||
++着重点++{.dot}
|
||||
++紫色下划线++{.primary}
|
||||
++绿色波浪线++{.wavy .success}
|
||||
++黄色着重点++{.dot .warning}
|
||||
[赤橙黄绿青蓝紫]{.rainbow}
|
||||
[红色]{.red}
|
||||
[粉色]{.pink}
|
||||
[橙色]{.orange}
|
||||
[黄色]{.yellow}
|
||||
[绿色]{.green}
|
||||
[靛青]{.aqua}
|
||||
[蓝色]{.blue}
|
||||
[紫色]{.purple}
|
||||
[灰色]{.grey}
|
||||
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
|
||||
|
||||
# `spoiler`隐藏文字
|
||||
|
||||
本功能基于`markdown-it-spoiler`和`markdown-it-attrs`
|
||||
|
||||
```raw
|
||||
!!黑幕黑幕黑幕黑幕黑幕黑幕!! ： 鼠标滑过显示内容
|
||||
!!模糊模糊模糊模糊模糊模糊!!{.bulr} ： 选中文字显示内容
|
||||
```
|
||||
|
||||
!!黑幕黑幕黑幕黑幕黑幕黑幕!! ： 鼠标滑过显示内容
|
||||
!!模糊模糊模糊模糊模糊模糊!!{.bulr} ： 选中文字显示内容
|
||||
|
||||
# `label` 标签块
|
||||
|
||||
本功能基于`markdown-it-bracketed-spans`和`markdown-it-attrs`
|
||||
有以下颜色可选
|
||||
|
||||
```raw
|
||||
[default]{.label}
|
||||
[primary]{.label .primary}
|
||||
[info]{.label .info}
|
||||
[:heavy_check_mark:success]{.label .success}
|
||||
[warning]{.label .warning}
|
||||
[:broken_heart:danger]{.label .danger}
|
||||
```
|
||||
|
||||
[default]{.label}
|
||||
[primary]{.label .primary}
|
||||
[info]{.label .info}
|
||||
[:heavy_check_mark:success]{.label .success}
|
||||
[warning]{.label .warning}
|
||||
[:broken_heart:danger]{.label .danger}
|
||||
|
||||
# `note` 提醒块
|
||||
|
||||
本功能基于`markdown-it-container`
|
||||
标签为：
|
||||
|
||||
--|--
|
||||
开始行|`:::[风格颜色]`
|
||||
结束行|`:::`
|
||||
|
||||
```raw
|
||||
:::default
|
||||
默认默认
|
||||
:::
|
||||
|
||||
:::primary
|
||||
基本基本
|
||||
:::
|
||||
|
||||
:::info
|
||||
提示提示
|
||||
:::
|
||||
|
||||
:::success
|
||||
成功成功
|
||||
:::
|
||||
|
||||
:::warning
|
||||
警告警告
|
||||
:::
|
||||
|
||||
:::danger
|
||||
危险危险
|
||||
:::
|
||||
|
||||
:::danger no-icon
|
||||
危险危险
|
||||
:::
|
||||
```
|
||||
|
||||
:::default
|
||||
默认默认
|
||||
:::
|
||||
|
||||
:::primary
|
||||
基本基本
|
||||
:::
|
||||
|
||||
:::info
|
||||
提示提示
|
||||
:::
|
||||
|
||||
:::success
|
||||
成功成功
|
||||
:::
|
||||
|
||||
:::warning
|
||||
警告警告
|
||||
:::
|
||||
|
||||
:::danger
|
||||
危险危险
|
||||
:::
|
||||
|
||||
:::danger no-icon
|
||||
没有图标
|
||||
:::
|
||||
|
||||
# `tab`标签卡
|
||||
|
||||
本功能基于`markdown-it-container`
|
||||
标签为：
|
||||
|
||||
--|--
|
||||
开始行|`;;;[同一ID] [标签名称]`
|
||||
结束行|`;;;`
|
||||
|
||||
```raw
|
||||
;;;id1 卡片1
|
||||
这里是卡片1的内容
|
||||
**加粗**
|
||||
[success]{.label .success}
|
||||
|
||||
{% links %}
|
||||
- site: 優萌初華
|
||||
owner: 霜月琉璃
|
||||
url: https://shoka.lostyu.me
|
||||
desc: 琉璃的医学 & 编程笔记
|
||||
image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
|
||||
color: "#e9546b"
|
||||
{% endlinks %}
|
||||
;;;
|
||||
|
||||
;;;id1 卡片2
|
||||
这里是卡片2的内容
|
||||
:::danger
|
||||
危险危险
|
||||
:::
|
||||
- 第一行
|
||||
- 第二行
|
||||
;;;
|
||||
|
||||
;;;id2 ②号标签卡片1
|
||||
这里是卡片1的内容
|
||||
;;;
|
||||
|
||||
;;;id2 ②号标签卡片2
|
||||
这里是卡片2的内容
|
||||
;;;
|
||||
```
|
||||
;;;id1 卡片1
|
||||
这里是卡片1的内容
|
||||
**加粗**
|
||||
[success]{.label .success}
|
||||
|
||||
{% links %}
|
||||
- site: 優萌初華
|
||||
owner: 霜月琉璃
|
||||
url: https://shoka.lostyu.me
|
||||
desc: 琉璃的医学 & 编程笔记
|
||||
image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
|
||||
color: "#e9546b"
|
||||
{% endlinks %}
|
||||
;;;
|
||||
|
||||
;;;id1 卡片2
|
||||
这里是卡片2的内容
|
||||
:::danger
|
||||
危险危险
|
||||
:::
|
||||
- 第一行
|
||||
- 第二行
|
||||
;;;
|
||||
|
||||
;;;id2 ②号标签卡片1
|
||||
这里是卡片1的内容
|
||||
;;;
|
||||
|
||||
;;;id2 ②号标签卡片2
|
||||
这里是卡片2的内容
|
||||
;;;
|
||||
|
||||
# `collapse` 折叠块
|
||||
|
||||
本功能基于`markdown-it-container`
|
||||
标签为：
|
||||
|
||||
--|--
|
||||
开始行|`+++[风格颜色] [标题文字]`
|
||||
结束行|`+++`
|
||||
|
||||
```raw
|
||||
+++ 默认默认 这里是一段文字
|
||||
++下划线++
|
||||
+++
|
||||
|
||||
|
||||
+++primary 紫色
|
||||
:::info
|
||||
参考信息
|
||||
:::
|
||||
|
||||
- 第一行
|
||||
- 第二行
|
||||
+++
|
||||
|
||||
|
||||
+++info 蓝色
|
||||
;;;id3 卡片1
|
||||
这里是卡片1的内容
|
||||
;;;
|
||||
|
||||
;;;id3 卡片2
|
||||
这里是卡片2的内容
|
||||
;;;
|
||||
+++
|
||||
|
||||
+++success 绿色
|
||||
{% links %}
|
||||
- site: 優萌初華
|
||||
url: https://shoka.lostyu.me
|
||||
color: "#e9546b"
|
||||
{% endlinks %}
|
||||
+++
|
||||
|
||||
+++warning 黄色
|
||||
!!警告警告警告警告警告!!{.bulr}
|
||||
[label]{.label .success}
|
||||
+++
|
||||
|
||||
+++danger 红色
|
||||
[danger]{.label .danger}
|
||||
+++
|
||||
```
|
||||
|
||||
+++ 默认默认 这里是一段文字
|
||||
++下划线++
|
||||
+++
|
||||
|
||||
|
||||
+++primary 紫色
|
||||
:::info
|
||||
参考信息
|
||||
:::
|
||||
|
||||
- 第一行
|
||||
- 第二行
|
||||
+++
|
||||
|
||||
|
||||
+++info 蓝色
|
||||
;;;id3 卡片1
|
||||
这里是卡片1的内容
|
||||
++波浪线++{.wavy}
|
||||
;;;
|
||||
|
||||
;;;id3 卡片2
|
||||
这里是卡片2的内容
|
||||
;;;
|
||||
+++
|
||||
|
||||
+++success 绿色
|
||||
{% links %}
|
||||
- site: 優萌初華
|
||||
url: https://shoka.lostyu.me
|
||||
color: "#e9546b"
|
||||
{% endlinks %}
|
||||
+++
|
||||
|
||||
+++warning 黄色
|
||||
!!警告警告警告警告警告!!{.bulr}
|
||||
[label]{.label .success}
|
||||
+++
|
||||
|
||||
+++danger 红色
|
||||
[danger]{.label .danger}
|
||||
+++
|
||||
|
||||
# `taskList` 待办事项
|
||||
|
||||
本功能基于`markdown-it-task-checkbox`。
|
||||
可以利用`markdown-it-attrs`添加风格颜色，只可以给`ul`标签添加，需要新建两行。
|
||||
|
||||
```raw
|
||||
- [ ] 这是一个小叉叉
|
||||
- [x] 这是一个红色勾勾
|
||||
|
||||
{.danger}
|
||||
|
||||
- [ ] 未完成
|
||||
- [x] 完成
|
||||
|
||||
{.primary}
|
||||
|
||||
- [ ] 未完成
|
||||
- [x] 默认颜色
|
||||
```
|
||||
|
||||
- [ ] 这是一个小叉叉
|
||||
- [x] 这是一个红色勾勾
|
||||
|
||||
{.danger}
|
||||
|
||||
- [ ] 未完成
|
||||
- [x] 完成
|
||||
|
||||
{.primary}
|
||||
|
||||
- [ ] 未完成
|
||||
- [x] 默认颜色
|
||||
|
||||
# `furigana`文字注音
|
||||
|
||||
原本用于日语汉字假名注音，但别的注音也可以。
|
||||
为了兼容性，采用`markdown-it-ruby`的基本格式：`{文字^注音}`，并且为了兼容表格，将分隔符由`|`换成了`^`。
|
||||
注音分隔基于`furigana-markdown-it`[显示说明看这里](https://www.npmjs.com/package/furigana-markdown-it#quick-usage)
|
||||
|
||||
--|--
|
||||
`{取り返す^とりかえす}`|{取り返す^とりかえす}
|
||||
`{可愛い犬^か+わい・い・いぬ}`|{可愛い犬^か+わい・い・いぬ}
|
||||
`{可愛い犬^か・わい・いいぬ}`|{可愛い犬^か・わい・いいぬ}
|
||||
`{アクセラレータ^accelerator}` | {アクセラレータ^accelerator}
|
||||
`{accelerator^アクセラレータ}` | {accelerator^アクセラレータ}
|
||||
`{食べる^たべる}` | {食べる^たべる}
|
||||
`{食べる^=たべる}` | {食べる^=たべる}
|
||||
`{あいうえお^*}` | {あいうえお^*}
|
||||
`{あいうえお^*❤}` | {あいうえお^*❤}
|
||||
`{常用账号^contact}`|{常用账号^contact}
|
||||
|
||||
# `math`数学公式
|
||||
|
||||
本功能基于`markdown-it-katex`
|
||||
在Front Matter中添加`math: true`以支持[KaTex](https://katex.org/)
|
||||
|
||||
```raw
|
||||
---
|
||||
title: 数学公式显示
|
||||
math: true
|
||||
---
|
||||
|
||||
行内公式：$\sqrt{3x-1}+(1+x)^2$
|
||||
|
||||
独立块显示：
|
||||
$$\begin{array}{c}
|
||||
|
||||
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
|
||||
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
|
||||
|
||||
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
|
||||
|
||||
\nabla \cdot \vec{\mathbf{B}} & = 0
|
||||
|
||||
\end{array}$$
|
||||
```
|
||||
|
||||
行内公式：$\sqrt{3x-1}+(1+x)^2$
|
||||
|
||||
独立块显示：
|
||||
$$\begin{array}{c}
|
||||
|
||||
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
|
||||
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
|
||||
|
||||
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
|
||||
|
||||
\nabla \cdot \vec{\mathbf{B}} & = 0
|
||||
|
||||
\end{array}$$
|
||||
|
||||
|
||||
# `mermaid`流程图
|
||||
|
||||
本功能基于`markdown-it-mermaid`
|
||||
在Front Matter中添加`mermaid: true`以支持[Mermaid](https://mermaid-js.github.io/mermaid/#/)
|
||||
|
||||
~~~raw
|
||||
---
|
||||
title: 流程图显示
|
||||
mermaid: true
|
||||
---
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Square Rect] -- Link text --> B((Circle))
|
||||
A --> C(Round Rect)
|
||||
B --> D{Rhombus}
|
||||
C --> D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
loop Daily query
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
|
||||
opt Extra response
|
||||
Bob->>Alice: Thanks for asking
|
||||
end
|
||||
end
|
||||
```
|
||||
~~~
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Square Rect] -- Link text --> B((Circle))
|
||||
A --> C(Round Rect)
|
||||
B --> D{Rhombus}
|
||||
C --> D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
loop Daily query
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
|
||||
opt Extra response
|
||||
Bob->>Alice: Thanks for asking
|
||||
end
|
||||
end
|
||||
```
|
||||
@@ -66,7 +66,7 @@ footer:
|
||||
counter:
|
||||
index:
|
||||
post: "%d posts in total"
|
||||
category: "%d subcategories in total"
|
||||
category: "%d subcategories in total, "
|
||||
tag_cloud:
|
||||
zero: No tags
|
||||
one: 1 tag in total
|
||||
|
||||
@@ -66,7 +66,7 @@ footer:
|
||||
counter:
|
||||
index:
|
||||
post: "%d 篇文章"
|
||||
category: "%d 个子项"
|
||||
category: "%d 个子项，"
|
||||
tag_cloud:
|
||||
zero: 暂无标签
|
||||
one: 目前共计 1 个标签
|
||||
|
||||
@@ -12,19 +12,15 @@
|
||||
{%- set postText = itemname or item.link or __('post.untitled') %}
|
||||
<div class="ribbon">{{ _url(item.link or item.path, postText + (postTitleIcon or ''), {itemprop: 'url', title: postText}) }}</div>
|
||||
<div class="inner">
|
||||
{%- if item.child %}
|
||||
{%- set subs = item.child.sort({name: 1}) %}
|
||||
{%- set len = _p('counter.index.category', item.child.length) %}
|
||||
{%- else %}
|
||||
{%- set subs = item.posts.sort({title: 1}) %}
|
||||
{%- set len = _p('counter.index.post', item.length) %}
|
||||
{%- endif %}
|
||||
{%- set len = '' %}
|
||||
{%- if item.child %}
|
||||
{%- set len = _p('counter.index.category', item.child) %}
|
||||
{%- endif %}
|
||||
{%- set len = len + _p('counter.index.post', item.length) %}
|
||||
<ul class="posts">
|
||||
{%- for sub in subs.toArray() %}
|
||||
{%- if loop.index < 7 %}
|
||||
{%- for sub in item.subs %}
|
||||
{%- set subname = sub.name or sub.title %}
|
||||
<li><a title="{{ subname }}" href="{{ url_for(sub.path) }}">{{ subname }}</a></li>
|
||||
{%- endif %}
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
<div class="meta footer">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hexo-theme-shoka",
|
||||
"version": "0.1.8",
|
||||
"version": "0.1.9",
|
||||
"description": "",
|
||||
"author": "Ruri Shimotsuki",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -48,8 +48,20 @@ hexo.extend.generator.register('index', function(locals) {
|
||||
}
|
||||
|
||||
let child = categories.find({'parent': cat._id});
|
||||
let pl = 6;
|
||||
|
||||
if (child.length != 0) {
|
||||
cat.child = child;
|
||||
cat.child = child.length;
|
||||
cat.subs = child.sort({name: 1}).limit(6).toArray();
|
||||
pl = Math.max(0, pl - child.length)
|
||||
if(pl > 0) {
|
||||
cat.subs.push.apply(cat.subs, cat.posts.sort({title: 1}).filter(function(item, i) {
|
||||
if(item.categories.last()._id == cat._id)
|
||||
return true
|
||||
}).limit(pl).toArray());
|
||||
}
|
||||
} else {
|
||||
cat.subs = cat.posts.sort({title: 1}).limit(6).toArray();
|
||||
}
|
||||
|
||||
catlist.push(cat)
|
||||
|
||||
@@ -61,7 +61,9 @@ function linkGrid(args, content) {
|
||||
item_image = theme.statics + item_image;
|
||||
}
|
||||
|
||||
result += `<div class="item" style="--block-color:${item.color || '#666'};" title="${item.owner || item.site}">`;
|
||||
item.color = item.color? ` style="--block-color:${item.color};"` : '';
|
||||
|
||||
result += `<div class="item" title="${item.owner || item.site}"${item.color}>`;
|
||||
|
||||
if (urlparam.protocol && urlparam.hostname !== siteHost) {
|
||||
var durl = Buffer.from(item.url).toString('base64');
|
||||
|
||||
@@ -43,8 +43,42 @@
|
||||
--text-color: var(--grey-7);
|
||||
--header-text-color: var(--grey-0);
|
||||
--primary-color: var(--color-red);
|
||||
}
|
||||
|
||||
.primary {
|
||||
--note-border: #cda0c7;
|
||||
--note-bg: #fdf8ff;
|
||||
--note-text: #8a51c0;
|
||||
--note-hover: #935aca;
|
||||
}
|
||||
|
||||
.info {
|
||||
--note-border: #8fa4dc;
|
||||
--note-bg: #f1f9ff;
|
||||
--note-text: #1d4974;
|
||||
--note-hover: #1d5fa0;
|
||||
}
|
||||
|
||||
.success {
|
||||
--note-border: #a3c293;
|
||||
--note-bg: #fcfff5;
|
||||
--note-text: #2c662d;
|
||||
--note-hover: #3b883c;
|
||||
}
|
||||
|
||||
.warning {
|
||||
--note-border: #c9ba9b;
|
||||
--note-bg: #fffbeb;
|
||||
--note-text: #947600;
|
||||
--note-hover: #ccb045;
|
||||
}
|
||||
|
||||
.danger {
|
||||
--note-border: #f4b3c1;
|
||||
--note-bg: #fff2f5;
|
||||
--note-text: #cc0f35;
|
||||
--note-hover: #f14668;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
&:root {
|
||||
@@ -83,14 +117,40 @@
|
||||
--box-bg-shadow: #000;
|
||||
--text-color: var(--grey-5);
|
||||
--header-text-color: var(--grey-9);
|
||||
}
|
||||
|
||||
.note, .label, .tags a {
|
||||
filter: brightness(.7);
|
||||
the-transition();
|
||||
.primary {
|
||||
--note-border: alpha(shade(#cda0c7, 40%), .8);
|
||||
--note-bg: alpha(shade(#fdf8ff, 80%), .8);
|
||||
--note-text: alpha(lighten(#8a51c0, 20%), .8);
|
||||
--note-hover: alpha(shade(#935aca, 20%), .8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(.6);
|
||||
.info {
|
||||
--note-border: alpha(shade(#8fa4dc, 40%), .8);
|
||||
--note-bg: alpha(shade(#f1f9ff, 80%), .8);
|
||||
--note-text: alpha(lighten(#1d4974, 50%), .8);
|
||||
--note-hover: alpha(shade(#1d5fa0, 20%), .8);
|
||||
}
|
||||
|
||||
.success {
|
||||
--note-border: alpha(shade(#a3c293, 40%), .8);
|
||||
--note-bg: alpha(shade(#fcfff5, 80%), .8);
|
||||
--note-text: alpha(lighten(#2c662d, 50%), .8);
|
||||
--note-hover: alpha(shade(#3b883c, 30%), .8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
--note-border: alpha(shade(#c9ba9b, 40%), .8);
|
||||
--note-bg: alpha(shade(#fffbeb, 80%), .8);
|
||||
--note-text: alpha(lighten(#947600, 20%), .8);
|
||||
--note-hover: alpha(shade(#ccb045, 20%), .8);
|
||||
}
|
||||
|
||||
.danger {
|
||||
--note-border: alpha(shade(#f4b3c1, 40%), .8);
|
||||
--note-bg: alpha(shade(#fff2f5, 80%), .8);
|
||||
--note-text: alpha(lighten(#cc0f35, 20%), .8);
|
||||
--note-hover: alpha(shade(#f14668, 30%), .8);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,11 +169,8 @@
|
||||
#imgs::before {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.red {
|
||||
color: var(--color-red);
|
||||
}
|
||||
@@ -141,3 +198,4 @@
|
||||
.grey {
|
||||
color: var(--color-grey);
|
||||
}
|
||||
|
||||
|
||||
@@ -71,21 +71,22 @@ code,
|
||||
display: inline-flex;
|
||||
font-size: $font-size-small;
|
||||
font-weight: 700;
|
||||
padding: 0 6rem;
|
||||
padding: 0 6rem 0 5rem;
|
||||
min-height: 2.5rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
|
||||
background-color: var(--grey-3);
|
||||
margin-bottom: .625rem;
|
||||
|
||||
&::before {
|
||||
content: attr(data-lang);
|
||||
text-transform: Capitalize;
|
||||
}
|
||||
|
||||
span {
|
||||
span, a {
|
||||
display: block;
|
||||
margin-left: .625rem;
|
||||
overflow: hidden;
|
||||
@@ -94,10 +95,10 @@ code,
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--grey-7);
|
||||
color: var(--grey-5);
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: var(--grey-7);
|
||||
color: var(--grey-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
position: absolute;
|
||||
padding: .125rem .375rem;
|
||||
right: .125rem;
|
||||
top: .375rem;
|
||||
top: .45rem;
|
||||
font-size: $font-size-smaller;
|
||||
|
||||
span {
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
font-size: 90%;
|
||||
background-color: var(--grey-2);
|
||||
margin: 1.25rem 0;
|
||||
border-radius: .1875rem;
|
||||
|
||||
ul {
|
||||
margin: .625rem 0 !important;
|
||||
@@ -97,14 +98,7 @@
|
||||
}
|
||||
|
||||
>blockquote {
|
||||
/*margin: 0 -1.875rem 1.25rem -2.0625rem;*/
|
||||
border-left: .1875rem solid var(--primary-color);
|
||||
padding: .625rem .9375rem;
|
||||
|
||||
+tablet-mobile() {
|
||||
//margin: 0 -1.25rem 1.25rem;
|
||||
padding: .625rem 1.5625rem;
|
||||
}
|
||||
border-left-color: var(--primary-color);
|
||||
}
|
||||
|
||||
iframe {
|
||||
@@ -138,48 +132,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details{
|
||||
> summary:first-of-type {
|
||||
list-style-type: none;
|
||||
}
|
||||
summary {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: .625rem;
|
||||
|
||||
.details-marker:before {
|
||||
font-family-icons();
|
||||
@extend .i-angle-right:before;
|
||||
color: var(--grey-4);
|
||||
}
|
||||
}
|
||||
p {
|
||||
padding: .625rem;
|
||||
margin: 0rem;
|
||||
}
|
||||
li p {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
> summary {
|
||||
border-radius: 1.25rem;
|
||||
background: var(--grey-2);
|
||||
.details-marker:before {
|
||||
@extend .i-angle-down:before;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: var(--grey-6);
|
||||
@extend .fade-in;
|
||||
}
|
||||
.kbd, kbd {
|
||||
background-color: var(--grey-1);
|
||||
background-image: linear-gradient(var(--grey-2), var(--grey-0), var(--grey-2));
|
||||
border: .0625rem solid var(--grey-4);
|
||||
border-radius: .2rem;
|
||||
box-shadow: .1rem .1rem .2rem var(--grey-9-a1);
|
||||
font-family: inherit;
|
||||
padding: .1rem .3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
mark {
|
||||
@@ -187,8 +148,20 @@
|
||||
}
|
||||
|
||||
ins {
|
||||
--line-color: var(--note-hover, var(--primary-color));
|
||||
text-decoration: none;
|
||||
border-bottom: .125rem solid var(--primary-color);
|
||||
border-bottom: .125rem solid var(--line-color);
|
||||
|
||||
&.wavy {
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--line-color);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.dot {
|
||||
border-bottom: .2rem dotted var(--line-color);
|
||||
}
|
||||
}
|
||||
|
||||
ruby {
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
font-family: $font-family-posts;
|
||||
word-wrap();
|
||||
|
||||
+desktop-large() {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
.exturl .ic {
|
||||
font-size: $font-size-small;
|
||||
margin-left: .25rem;
|
||||
|
||||
72
source/css/_common/components/tags/collapse.styl
Normal file
72
source/css/_common/components/tags/collapse.styl
Normal file
@@ -0,0 +1,72 @@
|
||||
::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details{
|
||||
> summary:first-of-type {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
summary {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: .625rem;
|
||||
background: var(--note-bg, none);
|
||||
border-radius: .25rem;
|
||||
transition: all .4s ease;
|
||||
|
||||
&::before {
|
||||
font-family-icons();
|
||||
@extend .i-angle-right:before;
|
||||
color: var(--grey-4);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: .625rem;
|
||||
}
|
||||
|
||||
&.primary, &.info, &.success, &.warning, &.danger {
|
||||
margin: 0 0 .8rem;
|
||||
summary {
|
||||
color: var(--note-text);
|
||||
&::before {
|
||||
color: var(--note-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
background: var(--note-bg, none);
|
||||
border-radius: .25rem;
|
||||
color: var(--grey-6);
|
||||
|
||||
summary {
|
||||
background: var(--note-hover, var(--grey-2));
|
||||
border-radius: .25rem;
|
||||
|
||||
&::before {
|
||||
@extend .i-angle-down:before;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
margin: 0 0 .8rem;
|
||||
@extend .fade-in;
|
||||
}
|
||||
|
||||
&.primary, &.info, &.success, &.warning, &.danger {
|
||||
color: var(--note-text);
|
||||
> summary {
|
||||
color: #FFF;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
|
||||
&::before {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
67
source/css/_common/components/tags/container.styl
Normal file
67
source/css/_common/components/tags/container.styl
Normal file
@@ -0,0 +1,67 @@
|
||||
.md {
|
||||
.note, details {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: .1875rem;
|
||||
border-bottom: initial;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
table,
|
||||
pre,
|
||||
blockquote,
|
||||
img,
|
||||
.tabs,
|
||||
.links {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.btn) {
|
||||
color: var(--note-hover);
|
||||
border-bottom: .0625rem dashed var(--note-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--note-text);
|
||||
border-bottom-color: var(--note-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li::before {
|
||||
background: var(--note-text);
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
li:before {
|
||||
background: var(--note-text) !important;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
font-size: .45rem;
|
||||
line-height: .8rem;
|
||||
top: .4rem;
|
||||
left: -1.2rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,39 +6,7 @@ span.label {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-medium;
|
||||
|
||||
//&.default {
|
||||
background: $default-bg;
|
||||
border-color: $default-border;
|
||||
color: $default-text;
|
||||
//}
|
||||
|
||||
&.primary {
|
||||
background: $primary-bg;
|
||||
border-color: $primary-border;
|
||||
color: $primary-text;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: $info-bg;
|
||||
border-color: $info-border;
|
||||
color: $info-text;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: $success-bg;
|
||||
border-color: $success-border;
|
||||
color: $success-text;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: $warning-bg;
|
||||
border-color: $warning-border;
|
||||
color: $warning-text;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: $danger-bg;
|
||||
border-color: $danger-border;
|
||||
color: $danger-text;
|
||||
}
|
||||
background: var(--note-bg, var(--grey-2));
|
||||
border-color: var(--note-border, var(--grey-4));
|
||||
color: var(--note-text, var(--grey-6));
|
||||
}
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
the-transition();
|
||||
shadow-box();
|
||||
|
||||
--bg-color: var(--block-color, #666);
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 4rem;
|
||||
@@ -24,6 +26,7 @@
|
||||
background: var(--grey-1) center no-repeat;
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
@@ -34,7 +37,8 @@
|
||||
margin: .5rem 0;
|
||||
font-family: $font-family-title;
|
||||
font-weight: bold;
|
||||
color: var(--block-color);
|
||||
color: var(--bg-color);
|
||||
border: none;
|
||||
.ic {
|
||||
display: none;
|
||||
}
|
||||
@@ -48,13 +52,13 @@
|
||||
|
||||
&:hover {
|
||||
color: var(--header-text-color);
|
||||
background-color: var(--block-color);
|
||||
box-shadow: 0 .125rem 1.25rem var(--block-color);
|
||||
border-color: var(--block-color);
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0 .125rem 1.25rem var(--bg-color);
|
||||
border-color: var(--bg-color);
|
||||
|
||||
.image {
|
||||
mix-blend-mode: normal;
|
||||
background-color: var(--block-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
input[type='checkbox']:checked+label::before {
|
||||
@extend .i-check-circle:before;
|
||||
color: var(--primary-color);
|
||||
color: var(--note-text, var(--primary-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,127 +1,45 @@
|
||||
.md .note {
|
||||
|
||||
border-radius: .1875rem;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
|
||||
background: var(--note-bg);
|
||||
border: .0625rem solid var(--note-border);
|
||||
color: var(--note-text);
|
||||
background: var(--note-bg, var(--grey-2));
|
||||
color: var(--grey-6);
|
||||
border-left: .25rem solid var(--note-border, var(--grey-4));
|
||||
|
||||
font-size: $font-size-small;
|
||||
|
||||
padding-left: 3rem;
|
||||
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.btn) {
|
||||
color: var(--note-hover);
|
||||
border-bottom: .0625rem dashed var(--note-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--note-text);
|
||||
border-bottom-color: var(--note-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
padding-left: 2.5rem;
|
||||
|
||||
&::before {
|
||||
font-size: 1.5rem;
|
||||
left: .4rem;
|
||||
position: absolute;
|
||||
left: .5rem;
|
||||
top: calc(50% - 1.5rem);
|
||||
font-family-icons();
|
||||
font-size: 1.5rem;
|
||||
color: var(--note-text, var(--grey-6));
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: .1875rem;
|
||||
border-bottom: initial;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
table,
|
||||
pre,
|
||||
blockquote,
|
||||
img {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li::before {
|
||||
background: var(--note-text);
|
||||
top: .65rem;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
li:before {
|
||||
background: var(--note-text) !important;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
font-size: .45rem;
|
||||
line-height: .8rem;
|
||||
top: .4rem;
|
||||
left: -1.2rem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.default {
|
||||
--note-border: $default-border;
|
||||
--note-bg: $default-bg;
|
||||
--note-text: $default-text;
|
||||
--note-hover: $default-hover;
|
||||
|
||||
&::before {
|
||||
@extend .i-arrow-circle-right:before;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
--note-border: $primary-border;
|
||||
--note-bg: $primary-bg;
|
||||
--note-text: $primary-text;
|
||||
--note-hover: $primary-hover;
|
||||
|
||||
&::before {
|
||||
@extend .i-plus-circle:before;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
--note-border: $info-border;
|
||||
--note-bg: $info-bg;
|
||||
--note-text: $info-text;
|
||||
--note-hover: $info-hover;
|
||||
|
||||
&::before {
|
||||
@extend .i-info-circle:before;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
--note-border: $success-border;
|
||||
--note-bg: $success-bg;
|
||||
--note-text: $success-text;
|
||||
--note-hover: $success-hover;
|
||||
|
||||
&::before {
|
||||
@extend .i-check-circle:before;
|
||||
}
|
||||
@@ -129,26 +47,22 @@
|
||||
}
|
||||
|
||||
&.warning {
|
||||
--note-border: $warning-border;
|
||||
--note-bg: $warning-bg;
|
||||
--note-text: $warning-text;
|
||||
--note-hover: $warning-hover;
|
||||
|
||||
&::before {
|
||||
@extend .i-exclamation-circle:before;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.danger {
|
||||
--note-border: $danger-border;
|
||||
--note-bg: $danger-bg;
|
||||
--note-text: $danger-text;
|
||||
--note-hover: $danger-hover;
|
||||
|
||||
&::before {
|
||||
@extend .i-minus-circle:before;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-icon {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.md .tabs {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 0 2rem;
|
||||
shadow-box();
|
||||
|
||||
ul.nav {
|
||||
@@ -38,7 +39,7 @@
|
||||
&.active::before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom-color: var(--primary-color);
|
||||
border-bottom-color: var(--note-hover, var(--primary-color));
|
||||
}
|
||||
|
||||
}
|
||||
@@ -54,4 +55,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.show-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 2.875rem;
|
||||
height: 2.875rem;
|
||||
text-align: center;
|
||||
color: var(--grey-4);
|
||||
z-index: $zindex-1;
|
||||
|
||||
&::before {
|
||||
font-family-icons();
|
||||
@extend .i-arrow-up:before;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
@import 'list';
|
||||
@import 'note';
|
||||
@import 'quiz';
|
||||
@import 'links';
|
||||
@import 'note';
|
||||
@import 'collapse';
|
||||
@import 'label';
|
||||
@import 'tabs';
|
||||
@import 'links';
|
||||
@import 'container';
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.label {
|
||||
font-family: var(--mermaid-font-family);
|
||||
color: #333;
|
||||
color: var(--grey-7);
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
fill: var(--text-color);
|
||||
}
|
||||
|
||||
.node rect,
|
||||
@@ -31,13 +31,13 @@
|
||||
|
||||
.edgePath .path {
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 1..3125rem;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: #e8e8e8;
|
||||
background-color: var(--grey-2);
|
||||
rect {
|
||||
opacity: .9;
|
||||
opacity: .8;
|
||||
fill: var(--grey-2) !important;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: black;
|
||||
fill: var(--text-color);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
li {
|
||||
width: 25%;
|
||||
min-height: 1.875rem;
|
||||
the-transition();
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
@@ -20,6 +21,10 @@
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
li.percent {
|
||||
|
||||
@@ -126,18 +126,6 @@ dd {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--grey-1);
|
||||
background-image: linear-gradient(var(--grey-2), var(--grey-0), var(--grey-2));
|
||||
border: .0625rem solid var(--grey-4);
|
||||
border-radius: .2rem;
|
||||
box-shadow: .1rem .1rem .2rem var(--grey-9-a1);
|
||||
color: var(--primary-color);
|
||||
font-family: inherit;
|
||||
padding: .1rem .3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@@ -100,32 +100,3 @@ $default-bg = #f8f8f9;
|
||||
$default-text = #666;
|
||||
$default-hover = #333;
|
||||
|
||||
// Primary
|
||||
$primary-border = #ddc7da;
|
||||
$primary-bg = #fdf8ff;
|
||||
$primary-text = #875999;
|
||||
$primary-hover = #5e2786;
|
||||
|
||||
// Info
|
||||
$info-border = #a9d5de;
|
||||
$info-bg = #f8ffff;
|
||||
$info-text = #276f86;
|
||||
$info-hover = #0e566c;
|
||||
|
||||
// Success
|
||||
$success-border = #a3c293;
|
||||
$success-bg = #fcfff5;
|
||||
$success-text = #2c662d;
|
||||
$success-hover = #1a531b;
|
||||
|
||||
// Warning
|
||||
$warning-border = #c9ba9b;
|
||||
$warning-bg = #fffaf3;
|
||||
$warning-text = #573a08;
|
||||
$warning-hover = #794b02;
|
||||
|
||||
// Danger
|
||||
$danger-border = #e0b4b4;
|
||||
$danger-bg = #fff6f6;
|
||||
$danger-text = #9f3a38;
|
||||
$danger-hover = #912d2B;
|
||||
|
||||
@@ -280,6 +280,7 @@ const postBeauty = function () {
|
||||
});
|
||||
|
||||
// tab
|
||||
var first_tab
|
||||
$.each('div.tab', function(element, index) {
|
||||
var id = element.attr('data-id');
|
||||
var title = element.attr('data-title');
|
||||
@@ -288,7 +289,17 @@ const postBeauty = function () {
|
||||
box = document.createElement('div');
|
||||
box.className = 'tabs';
|
||||
box.id = id;
|
||||
box.innerHTML = '<div class="show-btn"></div>'
|
||||
|
||||
var showBtn = box.child('.show-btn');
|
||||
showBtn.addEventListener('click', function(event) {
|
||||
pageScroll(box)
|
||||
});
|
||||
|
||||
element.parentNode.insertBefore(box, element);
|
||||
first_tab = true;
|
||||
} else {
|
||||
first_tab = false;
|
||||
}
|
||||
|
||||
var ul = box.child('.nav');
|
||||
@@ -301,7 +312,8 @@ const postBeauty = function () {
|
||||
var li = ul.createChild('li', {
|
||||
innerHTML: title
|
||||
});
|
||||
if(index == 0) {
|
||||
|
||||
if(first_tab) {
|
||||
li.addClass('active');
|
||||
element.addClass('active');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user