Typora Misty 主题使用教程
1. 项目的目录结构及介绍
Typora Misty 主题的目录结构如下:
typora-misty-theme/
├── README.md
├── gulpfile.js
├── package.json
├── src/
│ ├── _base.scss
│ ├── _colors.scss
│ ├── _fonts.scss
│ ├── _mixins.scss
│ ├── _reset.scss
│ ├── _variables.scss
│ ├── mistys.scss
│ ├── mistyd.scss
│ ├── mistyl.scss
│ └── misty.scss
└── dist/
├── mistys.css
├── mistyd.css
├── mistyl.css
└── misty.css
目录介绍
README.md
: 项目说明文件,包含项目的基本信息和使用方法。gulpfile.js
: Gulp 配置文件,用于自动化构建任务。package.json
: 项目的依赖和脚本配置文件。src/
: 源代码目录,包含所有的 SCSS 文件。_base.scss
: 基础样式文件。_colors.scss
: 颜色定义文件。_fonts.scss
: 字体定义文件。_mixins.scss
: 混合器定义文件。_reset.scss
: 重置样式文件。_variables.scss
: 变量定义文件。mistys.scss
,mistyd.scss
,mistyl.scss
,misty.scss
: 不同主题的 SCSS 文件。
dist/
: 编译后的 CSS 文件目录。mistys.css
,mistyd.css
,mistyl.css
,misty.css
: 编译后的 CSS 文件。
2. 项目的启动文件介绍
Typora Misty 主题的启动文件主要是 gulpfile.js
和 package.json
。
gulpfile.js
gulpfile.js
是 Gulp 的配置文件,用于定义自动化构建任务。主要任务是编译 SCSS 文件为 CSS 文件。
// gulpfile.js 示例代码
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
gulp.task('build', function () {
return gulp.src('src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist'));
});
package.json
package.json
是项目的依赖和脚本配置文件。主要包含项目的依赖包和构建脚本。
{
"name": "typora-misty-theme",
"version": "1.0.0",
"description": "Yet another elegant Typora theme designed with aesthetics in mind",
"scripts": {
"build": "gulp build"
},
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^4.1.0"
}
}
3. 项目的配置文件介绍
Typora Misty 主题的配置文件主要是 src/
目录下的 SCSS 文件。
SCSS 文件介绍
_base.scss
: 定义基础样式,如盒模型、文本排版等。_colors.scss
: 定义主题的颜色方案。_fonts.scss
: 定义字体样式和字体堆栈。_mixins.scss
: 定义可重用的样式混合器。_reset.scss
: 重置浏览器默认样式。_variables.scss
: 定义全局变量,如字体大小、行高等。mistys.scss
,mistyd.scss
,mistyl.scss
,misty.scss
: 定义不同主题的具体样式。
通过修改这些 SCSS 文件,可以自定义主题的样式。编译后的 CSS 文件位于 dist/
目录下,可以直接在 Typora 中使用。