6.93330046.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{374:function(n,e){n.exports='\x3c!--\ntitle: 主题定制 \nsort: 10\n--\x3e\n\n通过自定义主题来定义网站前端内容。下面定义主题的步骤：\n\n## 创建主题\n\n```bash\nmkdir rdoc-theme-load-react # 创建主题目录\nnpm init -y # 生成配置文件 package.json\n```\n\n⚠️ 注意事项：主题必须以 `rdoc-theme-` 开头，否则会报错。\n\n生成 `package.json` 内容：\n\n```json\n{\n  "name": "rdoc-theme-load-react",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "keywords": [],\n  "author": "",\n  "license": "MIT"\n}\n```\n\n## 添加主题文件\n\n```bash\n├── README.md  # 说明文档\n├── lib        # 主题文件编译后的文件\n├── package.json \n└── src        # 没有编译的js文件\n```\n\n可以将默认主题拷贝到 `src` 目录中，基于[默认主题](https://github.com/jaywcjlove/rdoc/tree/master/theme/default)来改一个新的主题。\n\n## 添加编译命令\n\n主题文件建立好之后，通过 `babel` 来编译你的主题，将编译后的文件存储到 `lib` 目录中，添加编译命令，通过 `npm run build` 去编译你的代码。\n\n安装依赖\n\n```shell\nnpm install --save-dev babel-cli babel-core babel-eslint babel-plugin-syntax-dynamic-import babel-plugin-transform-async-to-generator babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread babel-plugin-transform-runtime babel-preset-env babel-preset-react\n```\n\n\n```diff\n{\n  "name": "rdoc-theme-load-react",\n  "version": "1.0.0",\n  "description": "",\n+  "main": "lib/index.js",\n-  "main": "index.js",\n  "scripts": {\n+    "build": "BABEL_ENV=production babel --ignore=src/**/__test__ --plugins transform-runtime src --out-dir lib --copy-files ",\n-    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "keywords": [],\n  "author": "",\n+  "devDependencies": {\n+    "babel-cli": "^6.26.0",\n+    "babel-core": "^6.26.3",\n+    "babel-eslint": "^8.2.3",\n+    "babel-plugin-syntax-dynamic-import": "^6.18.0",\n+    "babel-plugin-transform-async-to-generator": "^6.24.1",\n+    "babel-plugin-transform-class-properties": "^6.24.1",\n+    "babel-plugin-transform-object-rest-spread": "^6.26.0",\n+    "babel-plugin-transform-runtime": "^6.23.0",\n+    "babel-preset-env": "^1.6.1"\n+  },\n  "license": "MIT"\n}\n```\n\n添加babel配置文件 `.babelrc`。\n\n```json\n{\n  "presets": [\n    "env",\n    "react"\n  ],\n  "plugins": [\n    "transform-object-rest-spread",\n    "syntax-dynamic-import",\n    "transform-async-to-generator",\n    "transform-class-properties",\n    "transform-runtime"\n  ]\n}\n```\n\n通过运行命令编译主题\n\n```bash\nnpm run build\n```\n\n## 添加实时编译命令\n\n添加监听模式下开发你的主题，你不能写一句代码，运行一下 `npm run start` 去编译你的代码，要实时编译你的代码，所以你要添加一个实时编译参数。\n\n```diff\n{\n  "name": "rdoc-theme-load-react",\n  "version": "1.0.0",\n  "description": "",\n  "main": "lib/index.js",\n  "scripts": {\n    "build": "BABEL_ENV=production babel --ignore=src/**/__test__ --plugins transform-runtime src --out-dir lib --copy-files ",\n+    "dev": "BABEL_ENV=production babel -w --ignore=src/**/__test__ --plugins transform-runtime src --out-dir lib --copy-files ",\n+    "start": "npm run dev"\n  },\n  "keywords": [],\n  "author": "",\n  "devDependencies": {\n    "babel-cli": "^6.26.0",\n    "babel-core": "^6.26.3",\n    "babel-plugin-syntax-dynamic-import": "^6.18.0",\n    "babel-plugin-transform-async-to-generator": "^6.24.1",\n    "babel-plugin-transform-class-properties": "^6.24.1",\n    "babel-plugin-transform-object-rest-spread": "^6.26.0",\n    "babel-plugin-transform-runtime": "^6.23.0",\n    "babel-preset-env": "^1.6.1"\n  },\n  "license": "MIT"\n}\n```\n\n通过运行命令，实时编译主题\n\n```bash\nnpm run start\n```\n\n## 添加代码检测\n\n安装代码检测依赖工具\n\n```bash\nnpm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch\n```\n\n添加对应的代码检测命令\n\n```diff\n{\n  "name": "rdoc-theme-load-react",\n  "version": "1.0.0",\n  "description": "",\n  "main": "lib/index.js",\n  "scripts": {\n    "build": "BABEL_ENV=production babel --ignore=src/**/__test__ --plugins transform-runtime src --out-dir lib --copy-files ",\n    "dev": "BABEL_ENV=production babel -w --ignore=src/**/__test__ --plugins transform-runtime src --out-dir lib --copy-files ",\n-    "start": "npm run dev"    \n+    "start": "npm run dev & npm run lint:watch",\n+    "lint": "NODE_ENV=production eslint src",\n+    "lint:watch": "esw -w src",\n+    "test": "npm run lint"\n  },\n  "keywords": [],\n  "author": "",\n  "devDependencies": {\n    "babel-cli": "^6.26.0",\n    "babel-core": "^6.26.3",\n    "babel-plugin-syntax-dynamic-import": "^6.18.0",\n    "babel-plugin-transform-async-to-generator": "^6.24.1",\n    "babel-plugin-transform-class-properties": "^6.24.1",\n    "babel-plugin-transform-object-rest-spread": "^6.26.0",\n    "babel-plugin-transform-runtime": "^6.23.0",\n    "babel-preset-env": "^1.6.1",\n+    "eslint": "^4.19.1",\n+    "eslint-config-airbnb": "^16.1.0",\n+    "eslint-plugin-import": "^2.11.0",\n+    "eslint-plugin-jsx-a11y": "^6.0.3",\n+    "eslint-plugin-react": "^7.7.0",\n+    "eslint-watch": "^3.1.4"\n  },\n  "license": "MIT"\n}\n```\n\n添加代码检查 ESLint 的配置文件 `.babelrc`。\n\n```json\n{\n  "parser": "babel-eslint",\n  "extends": "airbnb",\n  "env": {\n    "browser": true,\n    "node": true,\n    "es6": true,\n    "mocha": true,\n    "jest": true,\n    "jasmine": true\n  },\n  "plugins": [\n    "react",\n    "import"\n  ],\n  "parserOptions": {\n    "parser": "babel-eslint"\n  },\n  "rules": {\n    "linebreak-style": 0,\n    "func-names": 0,\n    "sort-imports": 0,\n    "arrow-body-style": 0,\n    "prefer-destructuring": 0,\n    "max-len": 0,\n    "consistent-return": 0,\n    "comma-dangle": [ "error", "always-multiline" ],\n    "function-paren-newline": 0,\n    "class-methods-use-this": 0,\n    "react/sort-comp": 0,\n    "react/prop-types": 0,\n    "react/jsx-first-prop-new-line": 0,\n    "react/require-extension": 0,\n    "react/jsx-filename-extension": [ 1, { "extensions": [ ".js", ".jsx" ] } ],\n    "import/extensions": 0,\n    "import/no-unresolved": 0,\n    "import/no-extraneous-dependencies": 0,\n    "import/prefer-default-export": 0,\n    "jsx-a11y/no-static-element-interactions": 0,\n    "jsx-a11y/anchor-has-content": 0,\n    "jsx-a11y/click-events-have-key-events": 0,\n    "jsx-a11y/anchor-is-valid": 0,\n    "jsx-a11y/label-has-for": 0,\n    "jsx-a11y/no-noninteractive-element-interactions": 0,\n    "jsx-a11y/mouse-events-have-key-events": 0,\n    "react/no-danger": 0,\n    "react/jsx-no-bind": 0,\n    "react/forbid-prop-types": 0,\n    "react/require-default-props": 0,\n    "react/no-did-mount-set-state": 0,\n    "react/no-array-index-key": 0,\n    "react/no-find-dom-node": 0,\n    "react/no-unused-state": 0,\n    "react/no-unused-prop-types": 0,\n    "react/default-props-match-prop-types": 0,\n    "react/jsx-curly-spacing": 0,\n    "react/no-render-return-value": 0,\n    "object-curly-newline": 0,\n    "no-param-reassign": 0,\n    "no-return-assign": 0,\n    "no-redeclare": 0,\n    "no-restricted-globals": 0,\n    "no-restricted-syntax": 0,\n    "no-underscore-dangle": 0,\n    "no-unused-expressions": 0\n  }\n}\n```\n\n## 开发模式调试主题\n\n在你通过上面步骤建立的主题目录下运行命令\n\n```bash\n# 进入目录\ncd rdoc-theme-load-react\n# 将 rdoc-theme-load-react 安装到全局目录中\nnpm link\n# /lib/node_modules/rdoc-theme-load-react -> ~/rdoc/rdoc-theme-load-react\n```\n\n生成一个 `rdoc` 文档工程\n\n```bash\nnpm install -g rdoc # 全局安装 rdoc 工具\nrdoc init dochelp   # 生成一个叫 dochelp 的工程\n```\n\n安装你自定义的主题 `rdoc-theme-load-react`\n\n```bash\nnpm link rdoc-theme-load-react\n```\n\n在 `dochelp` 工程的 `package.json` 中添加配置\n\n```diff\n{\n  "name": "dochelp",\n  "version": "1.0.0",\n  "description": "Describe rdoc-theme-load-react here",\n  "private": true,\n  "scripts": {\n    "deploy": "rdoc --publish <your repo url>",\n    "build": "rdoc -d home,introduce,faq,about,github --clean --build",\n    "start": "rdoc -d home,introduce,faq,about,github --clean"\n  },\n  "keywords": [],\n+  "rdoc": {\n+    "theme": "rdoc-theme-load-react"\n+  },\n  "dependencies": {\n    "rdoc": "1.4.x"\n  },\n  "author": "",\n  "license": "MIT"\n}\n```\n\n## 主题发布到npm\n\n如果主题发布到外网，你可以将主题作为一个依赖来使用主题，首先你需要注册一个账号 http://npmjs.org/ ，在命令行中登录你的账号，或者直接在命令行通过 `npm` 命令注册账号。\n\n```bash\n# 登录 npm 账号\nnpm login\n# 进入主题的根目录\ncd rdoc-theme-load-react\n# 上传你的主题包，上传记得编译好你的主题哦\nnpm publish\n```\n'}}]);