Moved to mdbook.
@ -1,12 +1,12 @@
|
||||
# TypeScript 学习记录
|
||||
|
||||
你可以直接在 xfoss.com 阅读本书:[ts-lang.xfoss.com](https://ts-lang.xfoss.com/)。xfoss.com 还有其他书籍:
|
||||
你可以直接在 xfoss.com 阅读本书:[ts.xfoss.com](https://ts.xfoss.com/)。xfoss.com 还有其他书籍:
|
||||
|
||||
- [Rust 编程语言](https://rust-lang.xfoss.com),Rust 官方教程中文翻译
|
||||
|
||||
- [Java 编程语言](https://java-lang.xfoss.com),"Head First Java" 书中文翻译
|
||||
- [Java 编程语言](https://java.xfoss.com),"Head First Java" 书中文翻译
|
||||
|
||||
- [60天通过CCNA考试](https://ccna.xfoss.com),一本基础的网络通讯书,翻译自国外经典 CCNA 60 days
|
||||
- [60天通过CCNA考试](https://ccna60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d.xfoss.com),一本基础的网络通讯书,翻译自国外经典 CCNA 60 days
|
||||
|
||||
|
||||
|
||||
|
36
SUMMARY.md
@ -1,36 +0,0 @@
|
||||
# 目录
|
||||
|
||||
## 入门
|
||||
|
||||
|
||||
* [TypeScript手册](README.md)
|
||||
* [tsconfig.json](00_tsconfig-json.md)
|
||||
* [基本数据类型](01_basic_data_types.md)
|
||||
* [变量声明](02_variables_declaration.md)
|
||||
* [类](03_classes.md)
|
||||
* [接口](04_interfaces.md)
|
||||
* [函数](05_functions.md)
|
||||
|
||||
## 进阶
|
||||
|
||||
|
||||
* [泛型](06_generics.md)
|
||||
* [枚举](07_enums.md)
|
||||
* [类型推导](08_type_inference.md)
|
||||
* [类型兼容性](09_type_compatibility.md)
|
||||
* [高级类型](10_advanced_types.md)
|
||||
* [符号](11_symbols.md)
|
||||
|
||||
## 高级特性
|
||||
|
||||
|
||||
* [迭代器与生成器](12_iterators_and_generators.md)
|
||||
* [模块](13_modules.md)
|
||||
* [命名空间](14_namespaces.md)
|
||||
* [模块与命名空间](15_modules_and_namespaces.md)
|
||||
* [模块解析](16_module_resolution.md)
|
||||
* [声明的融合](17_declaration_merging.md)
|
||||
* [JSX](18_jsx.md)
|
||||
* [装饰器](19_decorators.md)
|
||||
* [混入Mixins](20_mixins.md)
|
||||
* [三斜杠指令](21_triple-slash_directives.md)
|
@ -1 +0,0 @@
|
||||
theme: jekyll-theme-slate
|
91
book.json
@ -1,91 +0,0 @@
|
||||
{
|
||||
"author": "Translated by Peng Hailin, laxers@gmail.com",
|
||||
"description": "这是一本TypeScript编程语言手册",
|
||||
"generator": "xfoss.com 网站",
|
||||
"pdf": {
|
||||
"fontSize": 12,
|
||||
"footerTemplate": null,
|
||||
"headerTemplate": null,
|
||||
"margin": {
|
||||
"bottom": 36,
|
||||
"left": 62,
|
||||
"right": 62,
|
||||
"top": 36
|
||||
},
|
||||
"pageNumbers": false,
|
||||
"paperSize": "a4"
|
||||
},
|
||||
"plugins": [
|
||||
"highlight-code",
|
||||
"include-codeblock@^3.0.2",
|
||||
"tbfed-pagefooter@^0.0.1",
|
||||
"sectionx@^3.1.0",
|
||||
"sitemap",
|
||||
"code",
|
||||
"page-toc-button",
|
||||
"-lunr",
|
||||
"-search",
|
||||
"-sharing",
|
||||
"cuav-chapters",
|
||||
"add-js-css",
|
||||
"heading-anchors",
|
||||
"navigation",
|
||||
"splitter",
|
||||
"search-pro2"
|
||||
],
|
||||
"pluginsConfig": {
|
||||
"page-toc-button": {
|
||||
"maxTocDepth": 2,
|
||||
"minTocSize": 2
|
||||
},
|
||||
"fontsettings": {
|
||||
"theme": "white",
|
||||
"family": "sans",
|
||||
"size": 2
|
||||
},
|
||||
"include-codeblock": {
|
||||
"template": "ace",
|
||||
"unindent": true,
|
||||
"edit": false
|
||||
},
|
||||
"tbfed-pagefooter": {
|
||||
"copyright": "Copyleft @ ts-lang.xfoss.com 2022 - now",
|
||||
"modify_label": "该文件修订时间:",
|
||||
"modify_format": "YYYY-MM-DD HH:mm:ss"
|
||||
},
|
||||
"sectionx": {
|
||||
"tag": "b"
|
||||
},
|
||||
"add-js-css": {
|
||||
"css": [ "./custom_style.css" ],
|
||||
"js": [ "./custom_script.js" ]
|
||||
},
|
||||
"navigation": {
|
||||
"navigatorList": [
|
||||
{
|
||||
"url": "https://rust-lang.xfoss.com",
|
||||
"name": "Rust 编程语言 · ⚙️"
|
||||
},
|
||||
{
|
||||
"url": "https://java.xfoss.com",
|
||||
"name": "Java 编程语言 · ☕"
|
||||
},
|
||||
{
|
||||
"url": "https://ccna60d.xfoss.com",
|
||||
"name": "“网络通信” 技术 CCNA · 🖧"
|
||||
},
|
||||
{
|
||||
"url": "https://snippets.xfoss.com",
|
||||
"name": "代码 snippets 与技术笔记 · ✨"
|
||||
},
|
||||
{
|
||||
"url": "https://xfoss.com",
|
||||
"name": "捐助,donation · 💰"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sitemap": {
|
||||
"hostname": "https://ts.xfoss.com/"
|
||||
}
|
||||
}
|
||||
}
|
@ -1,53 +0,0 @@
|
||||
div.book-header {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #e4e4e4;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
li.nav-item>a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-weight: bold;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
||||
.page-toc-menu {
|
||||
background-color: #555555 !important;
|
||||
color: #cccccc !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
div.book-header {
|
||||
top: 30px;
|
||||
}
|
||||
.nav-list .nav-item a {
|
||||
font-size: small !important;
|
||||
}
|
||||
.nav-list .nav-item a:hover {
|
||||
color: #f59542 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
ul.nav-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.book-headr {
|
||||
top: 5px;
|
||||
}
|
||||
}
|
@ -1,15 +0,0 @@
|
||||
require(['gitbook', 'jQuery'], function(gitbook, $) {
|
||||
var honkit_link = $('a[class=gitbook-link]');
|
||||
|
||||
var text = honkit_link.text();
|
||||
honkit_link.parent().html(`<span style="align: center;">${text}</span>`);
|
||||
|
||||
//
|
||||
gitbook.events.bind('page.change', function() {
|
||||
|
||||
setTimeout(() => {
|
||||
var el = $('div.book-body');
|
||||
el.attr('style', '');
|
||||
}, 300);
|
||||
});
|
||||
});
|
@ -1,57 +0,0 @@
|
||||
div.book-header {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #e4e4e4;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
li.nav-item>a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
font-weight: bold;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
||||
.page-toc-menu {
|
||||
background-color: #555555 !important;
|
||||
color: #cccccc !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
div.book-header {
|
||||
top: 30px;
|
||||
}
|
||||
.nav-list .nav-item a {
|
||||
font-size: small !important;
|
||||
}
|
||||
.nav-list .nav-item a:hover {
|
||||
color: #f59542 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
ul.nav-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.book-headr {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
a.navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
13
git-push.sh
@ -1,13 +0,0 @@
|
||||
#!/bin/bash
|
||||
git add .
|
||||
|
||||
if [ "$1" = "" ]
|
||||
then
|
||||
echo "没有commit -m的输入,请输入commit -m内容,以[ENTER]结束:"
|
||||
read msg
|
||||
git commit -m "$msg"
|
||||
git push
|
||||
else
|
||||
git commit -m "$1"
|
||||
git push
|
||||
fi
|
6350
package-lock.json
generated
51
package.json
@ -1,51 +0,0 @@
|
||||
{
|
||||
"name": "typescript-learnings",
|
||||
"version": "0.1.0",
|
||||
"description": "TypeScript Learning stuffs.",
|
||||
"main": "/dist/main.js",
|
||||
"scripts": {
|
||||
"gulp": "gulp",
|
||||
"start": "live-server dist/",
|
||||
"sl-checkout": "sl pull && sl go master",
|
||||
"sl-push": "sl add . && sl commit -m \"Updated.\" && sl push",
|
||||
"git-push": "git add . && git commit -m \"Updated.\" && git push",
|
||||
"serve": "npx honkit serve --port=10447 --lrport=35713 &"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/gnu4cn/ts-learnings.git"
|
||||
},
|
||||
"keywords": [
|
||||
"TypeScript"
|
||||
],
|
||||
"author": "Peng Hailin, unisko@gmail.com",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/gnu4cn/ts-learnings/issues"
|
||||
},
|
||||
"homepage": "https://github.com/gnu4cn/ts-learnings#readme",
|
||||
"devDependencies": {
|
||||
"gitbook-plugin-add-js-css": "^0.0.1",
|
||||
"gitbook-plugin-back-to-top-button": "^0.1.4",
|
||||
"gitbook-plugin-cuav-chapters": "^1.0.3",
|
||||
"gitbook-plugin-fontsettings": "^2.0.0",
|
||||
"gitbook-plugin-heading-anchors": "^1.0.3",
|
||||
"gitbook-plugin-highlight-code": "^1.0.0",
|
||||
"gitbook-plugin-navigation": "^0.1.1",
|
||||
"gitbook-plugin-page-toc-button": "^0.1.1",
|
||||
"gitbook-plugin-search-pro2": "^1.0.2",
|
||||
"gitbook-plugin-sharing": "^1.0.2",
|
||||
"gitbook-plugin-theme-comscore": "^0.0.3",
|
||||
"gitbook-plugin-yh-changyan": "^1.0.0",
|
||||
"honkit": "^4.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"gitbook-plugin-ace": "^0.3.2",
|
||||
"gitbook-plugin-code": "^0.1.0",
|
||||
"gitbook-plugin-include-codeblock": "^3.2.3",
|
||||
"gitbook-plugin-sectionx": "^3.1.0",
|
||||
"gitbook-plugin-sitemap": "^1.2.0",
|
||||
"gitbook-plugin-splitter": "^0.0.8",
|
||||
"gitbook-plugin-tbfed-pagefooter": "^0.0.1"
|
||||
}
|
||||
}
|
173
src/README.md
Normal file
@ -0,0 +1,173 @@
|
||||
# TypeScript 学习记录
|
||||
|
||||
你可以直接在 xfoss.com 阅读本书:[ts.xfoss.com](https://ts.xfoss.com/)。xfoss.com 还有其他书籍:
|
||||
|
||||
- [Rust 编程语言](https://rust-lang.xfoss.com),Rust 官方教程中文翻译
|
||||
|
||||
- [Java 编程语言](https://java.xfoss.com),"Head First Java" 书中文翻译
|
||||
|
||||
- [60天通过CCNA考试](https://ccna60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d.xfoss.com),一本基础的网络通讯书,翻译自国外经典 CCNA 60 days
|
||||
|
||||
|
||||
|
||||
|
||||
你可以在 https://github.com/gnu4cn/ts-learnings 上 fork 本项目,并提交你的修正。
|
||||
|
||||
|
||||
|
||||
ECMAScript 2015 (ES6)已经正式发布,所有浏览器均已支持,同时许多项目,如Angular, Ionic, Electron框架等,均已在往ES6迁移。故需要学习掌握这一新版的Javascript。
|
||||
|
||||
## 变更日志
|
||||
|
||||
+ 2019-3-27, 重新整理`package.json`、`tsconfig.json`与`gulpfile.js`文件,让`.gitignore`生效,令到项目大小得以缩小
|
||||
|
||||
## ES6与 Javascript
|
||||
|
||||
ES6仍然是Javascript, 只不过是在我们已经熟悉的Javascript上加入了一些新的东西。使得Javascript更为强大,可以应对大型程序的要求。
|
||||
|
||||
## ES6的实现
|
||||
|
||||
ES6只是新一代Javascript的规范,几大公司、各个浏览器引擎等都有具体的实现。微软TypeScript、社区的CoffeeScript等都是ES6的具体实现。
|
||||
|
||||
参考链接:
|
||||
|
||||
- https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow
|
||||
- http://blog.ionicframework.com/ionic-and-typescript-part-1/
|
||||
|
||||
鉴于Angular与Ionic都是使用了微软的TypeScript, 因此在学习ES6时,将学习TypeScript这一实现。
|
||||
|
||||
## 关于TypeScript
|
||||
|
||||
TypeScript是Javascript的超集,有着以下优势:
|
||||
|
||||
- 可选的静态类型(关键就是这里的“可选”, Optional static typing, the key here is optional)
|
||||
- 类型推理,此特性在并没有使用到类型的情况下,带来那些类型的诸多益处(Type Inference, which gives some of the benefits of types, without actually using them)
|
||||
- 可在主流浏览器尚未对ES6/ES7提供支持之前,通过TypeScript用上ES6及ES7的特性
|
||||
- TypeScript有着将程序向下编译到所有浏览器都支持的某个Javascript版本的能力
|
||||
- IntelliSense提供了极好的工具支持
|
||||
|
||||
因为TypeScript带给如你一样的开发者这些不错的特性及巨大优势,Ionic是以TypeScript编写的,而不是ES6(这里就表明了**TypeScript并不是ES6**)。
|
||||
|
||||
### 关于可选的静态类型
|
||||
|
||||
可能TypeScript最能打动人心的,就是其所提供到的可选静态类型系统了。将给变量、函数、属性等加上类型。这将帮到编译器,且在app尚未运行时,就给出有关代码中任何潜在错误的警告。在使用到库及框架时,类型也有帮助,这是由于类型可令到开发者准确知悉那些APIs期望何种类型的数据。而关于类型系统,你首先要记住的是它是可选的。TypeScript并不强制要求开发者在他们不想添加的上必须添加类型。但随着应用变得越来越大、越来越复杂,类型确实可以提供到一些很棒的优势。
|
||||
|
||||
关于 IntelliSense:
|
||||
|
||||
> 一种 Microsoft 技术,这种技术通过在光标悬停在函数上时显示类定义和注释,从而让您可以分析源代码。当您在 IDE 中键入函数名时,IntelliSense 还可以完成这些名称。
|
||||
|
||||
TypeScript的一大优势,就是其代码补全与IntelliSense了。IntelliSense在敲入代码时,提供有用的提示。因为Ionic本身就是用TypeScript写就的,代码编辑器就可以展示出所有可用的方法,以及这些方法所期望的参数。当今所有最好的集成开发环境,比如VScode、Atom、Sublime text,甚至那些诸如Vim/Neovim等命令行的编辑器,都有对代码补全的支持。
|
||||
|
||||
TypeScript的许多优势,带来了一种好得多的app开发体验。因此,Ionic将全力压注到TypeScript上,而不提供ES6的启动器。
|
||||
|
||||
摘录自:
|
||||
|
||||
> [TypeScript的优势](https://ionicframework.com/docs/developer-resources/typescript/)
|
||||
|
||||
## 本教程特色
|
||||
|
||||
针对新特性的详细讨论,并与与实例代码结合。TypeScript是在Javascript的基础上,引入了诸多新特性,本教程将逐一讨论这些新特性,并同时编写相应代码加以验证。
|
||||
|
||||
## 环境的建立
|
||||
|
||||
环境的建立主要由三个文件构成:
|
||||
|
||||
+ `package.json` -- NodeJS 的项目文件,该文件包含了项目的各种信息与包依赖,比如项目名称、所有者信息、许可证、git地址等信息,包含各种依赖包等。
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "typescript-learnings",
|
||||
"version": "0.1.0",
|
||||
"description": "TypeScript Learning stuffs.",
|
||||
"main": "/dist/main.js",
|
||||
"scripts": {
|
||||
"gulp": "gulp &",
|
||||
"start": "live-server dist/",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/gnu4cn/ts-learnings.git"
|
||||
},
|
||||
"keywords": [
|
||||
"TypeScript"
|
||||
],
|
||||
"author": "Peng Hailin, unisko@gmail.com",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/gnu4cn/ts-learnings/issues"
|
||||
},
|
||||
"homepage": "https://github.com/gnu4cn/ts-learnings#readme",
|
||||
"devDependencies": {
|
||||
"@types/reflect-metadata": "^0.1.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-sourcemaps": "^2.6.1",
|
||||
"gulp-typescript": "^5.0.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"live-server": "^1.2.0",
|
||||
"typescript": "^3.4.1"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
```
|
||||
|
||||
`package.json`文件是所有NodeJS项目都有的文件,有了该文件,就可以使用`npm -i`命令,在本地安装项目依赖包。于是项目就可以运行起来了。
|
||||
|
||||
+ `tsconfig.json` 文件
|
||||
|
||||
该文件表明此NodeJS项目是一个 TypeScript项目,其中包含了`files`、`include`、`exclude`、`compilerOptions`等属性,用于将 TypeScript代码编译为 JavaScript目标代码过程。
|
||||
|
||||
```json
|
||||
{
|
||||
"include": [
|
||||
"src/*.ts"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": true,
|
||||
"target": "es5",
|
||||
"outDir": "dist/",
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"types": [
|
||||
"reflect-metadata"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
+ `gulpfile.js` 文件
|
||||
|
||||
该文件是 Gulp 自动化工具的配置文件。利用 Gulp 来自动化处理有关编译、打包及SourceMap相关工作。在上面的`package.json`文件中包含了对 `gulp`、`gulp-typescript`的依赖,其中`gulp-typescript`就是 Gulp中的 TypeScript编译器。
|
||||
|
||||
```javascript
|
||||
var gulp = require('gulp');
|
||||
var ts = require('gulp-typescript');
|
||||
|
||||
var tsProject = ts.createProject('tsconfig.json');
|
||||
|
||||
let paths = {
|
||||
pages: ["src/*.html"]
|
||||
};
|
||||
|
||||
gulp.task("copy-html", ()=>{
|
||||
return gulp.src(paths.pages)
|
||||
.pipe(gulp.dest("dist"))
|
||||
});
|
||||
|
||||
gulp.task('tsc', () => {
|
||||
return gulp.src('src/*.ts')
|
||||
.pipe(tsProject())
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
// 这里 watch 里必须使用 gulp.series
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch('src/*.ts', gulp.series('tsc'));
|
||||
});
|
||||
|
||||
|
||||
// 这里必须要有一个 default 任务
|
||||
gulp.task('default', gulp.series('copy-html', 'tsc', 'watch'));
|
||||
```
|
||||
|
||||
有了这三个文件,就意味着环境建立起来了,可以开始TypeScript代码的编写了。`src`目录下的所有`.ts`代码,都将被编译到 `dist`目录下。
|
37
src/SUMMARY.md
Normal file
@ -0,0 +1,37 @@
|
||||
|
||||
# 入门
|
||||
|
||||
|
||||
[TypeScript手册](README.md)
|
||||
- [tsconfig.json](00_tsconfig-json.md)
|
||||
- [基本数据类型](01_basic_data_types.md)
|
||||
- [变量声明](02_variables_declaration.md)
|
||||
- [类](03_classes.md)
|
||||
- [接口](04_interfaces.md)
|
||||
- [函数](05_functions.md)
|
||||
|
||||
---
|
||||
## 进阶
|
||||
|
||||
|
||||
- [泛型](06_generics.md)
|
||||
- [枚举](07_enums.md)
|
||||
- [类型推导](08_type_inference.md)
|
||||
- [类型兼容性](09_type_compatibility.md)
|
||||
- [高级类型](10_advanced_types.md)
|
||||
- [符号](11_symbols.md)
|
||||
|
||||
---
|
||||
## 高级特性
|
||||
|
||||
|
||||
- [迭代器与生成器](12_iterators_and_generators.md)
|
||||
- [模块](13_modules.md)
|
||||
- [命名空间](14_namespaces.md)
|
||||
- [模块与命名空间](15_modules_and_namespaces.md)
|
||||
- [模块解析](16_module_resolution.md)
|
||||
- [声明的融合](17_declaration_merging.md)
|
||||
- [JSX](18_jsx.md)
|
||||
- [装饰器](19_decorators.md)
|
||||
- [混入Mixins](20_mixins.md)
|
||||
- [三斜杠指令](21_triple-slash_directives.md)
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 182 KiB After Width: | Height: | Size: 182 KiB |
@ -1,288 +0,0 @@
|
||||
body {
|
||||
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
|
||||
letter-spacing: .2px;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.book-summary {
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:hover::-webkit-scrollbar-thumb {
|
||||
background: hsla(0, 0%, 53%, 0.4);
|
||||
}
|
||||
|
||||
:hover::-webkit-scrollbar-track {
|
||||
background: hsla(0, 0%, 53%, 0.1);
|
||||
}
|
||||
.markdown-section a{
|
||||
color: #EE8866;
|
||||
}
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section h5,
|
||||
.markdown-section h6 {
|
||||
margin-bottom: .5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.markdown-section p {
|
||||
line-height: 2;
|
||||
}
|
||||
.markdown-section img {
|
||||
padding: 8px;
|
||||
background: #e4e4e478;
|
||||
transition: all 1s;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px #dcdcdc;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
max-width: 95%;
|
||||
}
|
||||
.markdown-section img:hover {
|
||||
box-shadow: 0 0 10px #bbb
|
||||
}
|
||||
|
||||
.exc-trigger {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-nav-space {
|
||||
height: 24px;
|
||||
}
|
||||
.book-summary{
|
||||
bottom: inherit;
|
||||
}
|
||||
.book-summary,
|
||||
.book-body {
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.book-header {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
left: -10px;
|
||||
top: 40px;
|
||||
}
|
||||
.book-summary ul.summary li.active {
|
||||
border-right: 3px solid #EE8866;
|
||||
background: #f3f1f1;
|
||||
}
|
||||
|
||||
.book-summary ul.summary li.active > a {
|
||||
color: #EE8866;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.book-summary ul.summary li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-inner {
|
||||
max-width: none;
|
||||
padding: 20px 374px 40px 40px;
|
||||
}
|
||||
|
||||
.header-inner #book-search-input {
|
||||
float: right;
|
||||
width: 300px;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: .25rem;
|
||||
background: #EE8866;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header-inner #book-search-input input[type="text"] {
|
||||
width: 80%;
|
||||
background: #f4f5f5;
|
||||
border-top-left-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.header-inner #book-search-input #searchBtn {
|
||||
color: #ffffff;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-inner #book-search-input #searchBtn:hover {
|
||||
color: #eae8e8;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
width: 100%;
|
||||
padding: 10px 30px;
|
||||
border-bottom: 1px solid #dededede;
|
||||
margin: auto;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.header-inner:before,
|
||||
.header-inner:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.header-inner:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.header-inner .logo {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 221px;
|
||||
background: url('./logo.svg');
|
||||
background-size: 221px 50px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.header-inner .logo img {
|
||||
display: block;
|
||||
height: inherit;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.header-inner .title {
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
margin-left: 10px;
|
||||
color: #575656;
|
||||
}
|
||||
|
||||
/* 导航 */
|
||||
.header-inner .header-nav {
|
||||
list-style: none;
|
||||
margin: 10px 20px 0 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.header-inner .header-nav li {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
min-width: 50px;
|
||||
margin-right: 20px;
|
||||
padding: 8px 10px 8px 10px;
|
||||
}
|
||||
|
||||
.header-inner .header-nav li a {
|
||||
color: #5d6778;
|
||||
font-weight: 500;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.header-inner .header-nav li a:hover,
|
||||
.header-inner .header-nav li a.active {
|
||||
color: #EE8866;
|
||||
}
|
||||
|
||||
.header-inner .header-nav li a.active:hover {
|
||||
cursor: #EE8866;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.book-summary,
|
||||
.book-body {
|
||||
top: 101px;
|
||||
}
|
||||
.header-inner #book-search-input {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.book-anchor {
|
||||
overflow-y: auto;
|
||||
width: 307px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 104px;
|
||||
right: 30px;
|
||||
padding: 0 10px 10px 10px;
|
||||
z-index: 999;
|
||||
user-select: none;
|
||||
border-left: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.book-anchor-title {
|
||||
line-height: 38px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.book-anchor a {
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
color: #656565;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.book-anchor a:hover {
|
||||
color: #EE8866;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.book-anchor .selected {
|
||||
color: #EE8866;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.book-anchor .anchor-h1 {}
|
||||
|
||||
.book-anchor .anchor-h2 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: black;
|
||||
z-index: 999;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.book-anchor .anchor-h3{
|
||||
padding-left: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 1020px) {
|
||||
.book-anchor {
|
||||
display: none;
|
||||
}
|
||||
.page-inner {
|
||||
max-width: none;
|
||||
padding: 20px 5px 5px 5px;
|
||||
}
|
||||
.book-body {
|
||||
top: 120px;
|
||||
}
|
||||
.header-nav {
|
||||
display: none;
|
||||
}
|
||||
body-inner {
|
||||
position: absolute;
|
||||
min-height: calc(100% - 50px);
|
||||
}
|
||||
}
|