DevonThink Heti 项目教程

42 0 0

DevonThink Heti 项目教程

devonthink-heti基于赫蹏为 DEVONthink 的 Markdown 和 RSS 阅读器制作的样式，支持黑暗模式、中英文混排、标点挤压等排版优化。项目地址:https://gitcode.com/gh_mirrors/de/devonthink-heti

1. 项目的目录结构及介绍

DevonThink Heti 项目的目录结构如下：

devonthink-heti/ ├── package.json ├── src/ │ ├── css/ │ │ ├── main.scss │ │ └── ... │ ├── js/ │ │ ├── main.js │ │ └── ... │ └── index.html ├── README.md └── ...

目录结构介绍

package.json: 项目的配置文件，包含依赖项、脚本等信息。
src/: 源代码目录。
- css/: 存放样式文件。
  - main.scss: 主样式文件。
- js/: 存放 JavaScript 文件。
  - main.js: 主 JavaScript 文件。
- index.html: 项目的主 HTML 文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 index.html 和 main.js。

index.html

index.html 是项目的主 HTML 文件，包含了页面的基本结构和引入的资源文件。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DevonThink Heti</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <script src="js/main.js"></script>
</body>
</html>

main.js

main.js 是项目的主 JavaScript 文件，负责初始化页面和处理用户交互。


document.addEventListener('DOMContentLoaded', function() {
    // 初始化代码
});

3. 项目的配置文件介绍

项目的配置文件主要是 package.json。

package.json

package.json 包含了项目的元数据和依赖项信息。


{
  "name": "devonthink-heti",
  "version": "1.0.0",
  "description": "基于赫蹏为 DEVONthink 的 Markdown 和 RSS 阅读器制作的样式",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "heti": "^0.8.2",
    "normalize.css": "^8.0.1"
  },
  "devDependencies": {
    "node-sass": "^4.14.0",
    "node-sass-package-importer": "^5.3.2",
    "sass-module-importer": "^1.4.0",
    "stylelint": "^13.3.3",
    "stylelint-config-recommended-scss": "^4.1.0",
    "stylelint-config-standard": "^19.0.0",
    "stylelint-scss": "^3.17.1"
  },
  "stylelint": {
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-recommended-scss"
    ],
    "rules": {
      "no-descending-specificity": [true, ["ignore": ["selectors-within-list"]]],
      "selector-type-no-unknown": [true, ["ignore": ["custom-elements"]]]
    }
  }
}