60 | {title && layout !== 'IndexLayout' && {
72 | if (node.type === 'html') {
73 | // if (//.test(node.value)) return false;
74 | // const scriptValue = node.value.match(/(.*?)<\/script>/ig);
75 | // node.value.replace(/(.*?)<\/script>/, (te) => {
76 | // console.log('te:', te);
77 | // });
78 | }
79 | // 判断 上一个节点是否为
80 | if (node.type === 'code' && parent.children && parent.children.length > 0 && parent.children[index - 1]) {
81 | const parentNode = parent.children[index - 1];
82 | if (parentNode.type === 'html' && //.test(parentNode.value)) {
83 | node.value = `__dome__${node.value}`;
84 | }
85 | }
86 | return node;
87 | }}
88 | />
89 | ) : (
90 |
93 | );
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/web/Router.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { HashRouter, withRouter, Route, Switch } from 'react-router-dom';
3 | import lazyload from 'react-dynamic-loadable';
4 | import theme from 'rdoc-theme';
5 | import menuSource from './rdoc.tree.data.json';
6 |
7 | // 判断目录下是否存在 README.md
8 | // 存在返回路由属性，表示是一个路由
9 | function directoryIsRoute(arr, props = false) {
10 | if (!arr || arr.length === 0) return false;
11 | const index = arr.filter(item => item.name === 'README.md' && item.mdconf);
12 | if (index && index.length > 0) props = { ...index[0] };
13 | return props;
14 | }
15 | // 路由数据序列化
16 | function routeData(data, arrayRoute = [], routePath = '/', article) {
17 | data.forEach((item) => {
18 | const routeProps = directoryIsRoute(item.children);
19 | const routePropsCurrent = `${routePath}${item.name}`.replace(/.md$/, '');
20 | if (item.type === 'directory' && routeProps) {
21 | const { mdconf, ...otherItem } = routeProps;
22 | arrayRoute.push({
23 | path: routePropsCurrent,
24 | mdconf: mdconf || {},
25 | props: { ...otherItem },
26 | article: article || item.name,
27 | });
28 | } else {
29 | const { mdconf, ...otherItem } = item;
30 | arrayRoute.push({
31 | path: routePropsCurrent,
32 | mdconf: mdconf || { title: item.name },
33 | props: { ...otherItem },
34 | article: article || item.name,
35 | });
36 | }
37 | if (item.children && item.children.length > 0) {
38 | arrayRoute.concat(routeData(item.children, arrayRoute, `${routePropsCurrent}/`, article || item.name));
39 | }
40 | });
41 | return arrayRoute;
42 | }
43 |
44 |
45 | function menuSourceFormat(data, routePath, article) {
46 | const arr = [];
47 | data.forEach((item) => {
48 | const routePropsCurrent = `${routePath || ''}/${item.name}`.replace(/.md$/, '');
49 | if (item.type === 'directory') {
50 | const getDirReadmeProps = directoryIsRoute(item.children);
51 | if (item.children && item.children.length > 0 && getDirReadmeProps) {
52 | const { sort, title, mdconf, ...otherItem } = getDirReadmeProps;
53 | item.mdconf = mdconf || {};
54 | item.props = otherItem || { isEmpty: true };
55 | item.sort = mdconf.sort ? mdconf.sort : 0;
56 | item.children = menuSourceFormat(item.children, routePropsCurrent, article || item.name);
57 | } else {
58 | item.mdconf = { title: item.name };
59 | item.props = { isEmpty: true };
60 | item.sort = 0;
61 | item.children = [];
62 | }
63 | } else {
64 | item.title = item.mdconf && item.mdconf.title ? item.mdconf.title : item.name.replace(item.extension, '');
65 | item.sort = item.mdconf && item.mdconf.sort ? item.mdconf.sort : 0;
66 | if (!item.mdconf) {
67 | item.props = { isEmpty: true };
68 | }
69 | }
70 | item.routePath = routePropsCurrent;
71 | item.article = article || item.name;
72 | arr.push(item);
73 | });
74 | return arr;
75 | }
76 |
77 | const RoutersContainer = withRouter(({ ...props }) => {
78 | const passProps = {
79 | routeData: routeData(menuSource),
80 | menuSource: menuSourceFormat(menuSource),
81 | ...props,
82 | };
83 | return (
84 | {title}
} 61 | {markdownStr ? ( 62 |
63 |
69 |
64 |
68 | RDoc
65 | RDoc 是一个文档生成工具，用于生成文档网站或简单的博客网站。
简单到你只需写 Markdown 文件就可以帮助你生成网站。
同时可以方便的集成到你的项目工程中。
66 | 快速开始
67 | 简单到你只需写 Markdown 文件就可以帮助你生成网站。
同时可以方便的集成到你的项目工程中。
2 |
3 | 
4 |
5 |
17 | 
18 |
19 |
20 | ## 开始
21 |
22 | **rdoc** 使用非常简单，只需将其它作为模块安装并运行即可创建您的网站。
23 |
24 | 让我们开始吧！
25 |
26 | ### 安装
27 |
28 | 安装 `rdoc` 到你系统的全局，您需要在本地开发计算机上使用 `Node >= 8`。 您可以使用 [n](https://github.com/tj/n#installation) 轻松切换不同项目之间的 Node 版本。
29 |
30 |
31 | ```bash
32 | npm install rdoc -g
33 |
34 | # /usr/local/bin/rdoc -> /usr/local/lib/node_modules/rdoc/.bin/rdoc.js
35 | # /usr/local/bin/rdoc-cli -> /usr/local/lib/node_modules/rdoc/.bin/rdoc.js
36 | ```
37 |
38 | 增加了 `rdoc-cli` 命令来解决 Mac 集成 `rdoc` 命令冲突。
39 |
40 | 1. 初始化项目
41 |
42 | ```bash
43 | rdoc init my-project # Init project
44 | # 或者
45 | rdoc-cli init my-project
46 | ```
47 |
48 | 2. 运行网站
49 |
50 | ```bash
51 | cd my-project && npm install # 进入目录安装依赖
52 | npm start # 启动服务。
53 | ```
54 |
55 | 3. 编译输出静态HTML资源。
56 |
57 | ```bash
58 | npm run build
59 | ```
60 |
61 | 4. 在 `package.json` 中配置部署 `URL`。
62 |
63 | ```js
64 | {
65 | "scripts": {
66 | "deploy": "rdoc --publish
18 |
2 |
3 |
4 |
5 |
17 |
18 |
19 |
20 | ## Getting Started
21 |
22 | It's really easy to get started with **rdoc**. Just install it as a module and run it to create your website.
23 |
24 | Let's get you started!
25 |
26 | ### Install
27 |
28 | Install `rdoc` globally on your system. You’ll need to have Node >= 8 on your local development machine. You can use [n](https://github.com/tj/n#installation) to easily switch Node versions between different projects.
29 |
30 | ```bash
31 | npm install rdoc -g
32 |
33 | # /usr/local/bin/rdoc -> /usr/local/lib/node_modules/rdoc/.bin/rdoc.js
34 | # /usr/local/bin/rdoc-cli -> /usr/local/lib/node_modules/rdoc/.bin/rdoc.js
35 | ```
36 |
37 | Added `rdoc-cli` command to resolve Mac integration `rdoc` command conflicts.
38 |
39 | 1. Init Project
40 |
41 | ```bash
42 | rdoc init my-project # Init project
43 | # or
44 | rdoc-cli init my-project
45 | ```
46 |
47 | 2. Run website
48 |
49 | ```bash
50 | cd my-project && npm install # Install dependencies.
51 | npm start # Into the directory, start the service.
52 | ```
53 |
54 | 3. Compile output static HTML resources
55 |
56 | ```bash
57 | npm run build
58 | ```
59 |
60 | 4. Configure the deployment URL in `package.json`
61 |
62 | ```js
63 | {
64 | "scripts": {
65 | "deploy": "rdoc --publish
18 | -
46 | {
47 | menus.map((item, index) => {
48 | if (item.isEmpty) {
49 | return null;
50 | }
51 | if (item.children && item.children.length < 1) return null;
52 | if (item.props && item.props.visible === true) return null;
53 | if (/^README(.*)md$/.test(item.name)) return null;
54 | return (
55 |
-
56 | 57 | {item && item.props && (item.props.redirect || item.props.isEmpty) ?63 | {item.children && item.children.length > 0 && this.renderSubMenuItem(item.children)} 64 |{(item.mdconf && item.mdconf.title) || ''}: ( 58 | 59 | {item && item.mdconf.title ? item.mdconf.title : item.name} 60 | 61 | )} 62 |
65 | );
66 | })
67 | }
68 |
91 |
128 | );
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/conf/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | const autoprefixer = require('autoprefixer');
2 | const PATH = require('path');
3 | const UPATH = require('upath');
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 | const CreateSpareWebpackPlugin = require('create-spare-webpack-plugin');
6 | const CopyMarkdownImageWebpackPlugin = require('copy-markdown-image-webpack-plugin');
7 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
8 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
9 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
10 | const config = require('./webpack.config');
11 | const paths = require('./path');
12 |
13 | module.exports = function (cmd) {
14 | config.mode = 'production';
15 | config.entry = [paths.appIndexJs];
16 | config.output.filename = 'js/[hash:8].js';
17 | config.output.chunkFilename = 'js/[name].[hash:8].js';
18 | config.module.rules = config.module.rules.map((item) => {
19 | if (item.oneOf) {
20 | const loaders = [];
21 | loaders.push({
22 | // Process JS with Babel.
23 | test: /\.(js|jsx|mjs)$/,
24 | exclude: paths.getExcludeFoldersRegExp.concat(/\.(cache)/),
25 | use: [
26 | {
27 | loader: require.resolve('string-replace-loader'),
28 | options: {
29 | multiple: [
30 | { search: '__project_root__', replace: UPATH.normalizeSafe(paths.projectPath), flags: 'ig' },
31 | ],
32 | },
33 | },
34 | {
35 | loader: require.resolve('babel-loader'),
36 | options: require('../../.babelrc'), // eslint-disable-line
37 | },
38 | ],
39 | });
40 | // https://ilikekillnerds.com/2018/03/disable-webpack-4-native-json-loader/
41 | loaders.push({
42 | test: /rdoc\.tree\.data\.json$/,
43 | // 禁用Webpack 4本身的JSON加载程序
44 | type: 'javascript/auto',
45 | use: [
46 | {
47 | loader: require.resolve('raw-tree-replace-loader'),
48 | options: {
49 | include: /rdoc\.tree\.data\.json$/, // 检查包含的文件名字
50 | directoryTrees: { // 指定目录生成目录树，json
51 | dir: cmd.markdownPaths,
52 | mdconf: true,
53 | extensions: /\.md/,
54 | relativePath: true,
55 | },
56 | },
57 | },
58 | ],
59 | });
60 |
61 | loaders.push({
62 | test: /\.(css|less)$/,
63 | use: [
64 | MiniCssExtractPlugin.loader,
65 | {
66 | loader: require.resolve('css-loader'),
67 | options: {
68 | modules: true,
69 | localIdentName: '[name]-[hash:base64:5]',
70 | importLoaders: 1,
71 | },
72 | },
73 | {
74 | loader: require.resolve('postcss-loader'),
75 | options: {
76 | // Necessary for external CSS imports to work
77 | // https://github.com/facebookincubator/create-react-app/issues/2677
78 | ident: 'postcss',
79 | plugins: () => [
80 | require('postcss-flexbugs-fixes'), // eslint-disable-line
81 | autoprefixer({
82 | browsers: [
83 | '>1%',
84 | 'last 4 versions',
85 | 'Firefox ESR',
86 | 'not ie < 9', // React doesn't support IE8 anyway
87 | ],
88 | flexbox: 'no-2009',
89 | }),
90 | ],
91 | },
92 | },
93 | require.resolve('less-loader'),
94 | ],
95 | });
96 |
97 | item.oneOf = loaders.concat(item.oneOf);
98 | }
99 | return item;
100 | });
101 | config.optimization = {
102 | runtimeChunk: true,
103 | minimizer: [
104 | new UglifyJsPlugin({
105 | cache: true,
106 | parallel: true,
107 | sourceMap: true, // set to true if you want JS source maps
108 | }),
109 | new OptimizeCSSAssetsPlugin({}),
110 | ],
111 | splitChunks: {
112 | minSize: 0,
113 | chunks: 'initial',
114 | cacheGroups: {
115 | commons: {
116 | chunks: 'initial',
117 | minChunks: 2,
118 | maxInitialRequests: 5, // The default limit is too small to showcase the effect
119 | minSize: 2000, // This is example is too small to create commons chunks
120 | },
121 | vendor: {
122 | test: /node_modules/,
123 | chunks: 'initial',
124 | name: 'vendor',
125 | priority: 10,
126 | enforce: true,
127 | },
128 | },
129 | },
130 | };
131 |
132 | config.plugins = config.plugins.concat([
133 | new HtmlWebpackPlugin({
134 | inject: true,
135 | favicon: paths.defaultFaviconPath,
136 | template: paths.defaultHTMLPath,
137 | title: paths.rdocConf && paths.rdocConf.title ? paths.rdocConf.title : 'Rdoc',
138 | minify: {
139 | removeAttributeQuotes: true,
140 | collapseWhitespace: true,
141 | html5: true,
142 | minifyCSS: true,
143 | removeComments: true,
144 | removeEmptyAttributes: true,
145 | },
146 | }),
147 | new CopyMarkdownImageWebpackPlugin({
148 | dir: cmd.markdownPaths,
149 | toDir: config.output.path,
150 | }),
151 | new CreateSpareWebpackPlugin({
152 | // 备用文件目录，比对是否存在，不存在生成，根据sep 目录规则生成
153 | path: PATH.join(paths.catchDirPath, './md'),
154 | sep: '___', // 检查目标目录文件，文件名存储，文件夹+下划线间隔+文件名
155 | directoryTrees: { // 索引目录
156 | dir: cmd.markdownPaths,
157 | mdconf: true,
158 | extensions: /\.md$/,
159 | },
160 | }),
161 | // new webpack.optimize.DedupePlugin(),
162 | new MiniCssExtractPlugin({
163 | // Options similar to the same options in webpackOptions.output
164 | // both options are optional
165 | filename: 'css/[contenthash].css',
166 | chunkFilename: 'css/[id].css',
167 | }),
168 | ]);
169 | return config;
170 | };
171 |
--------------------------------------------------------------------------------
/theme/default/component/Header/index.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import classNames from 'classnames';
3 | import { Link } from 'react-router-dom';
4 | import PropTypes from 'prop-types';
5 | import styles from './index.less';
6 |
7 | const SVGGithub = (
8 |
11 | );
12 |
13 | const isString = val => typeof val === 'string';
14 |
15 | export default class Header extends PureComponent {
16 | renderTopMenu(menuSource, pathname) {
17 | if (menuSource.length > 1) {
18 | menuSource = menuSource.sort((a, b) => {
19 | if (a.sort < b.sort) return -1;
20 | if (a.sort > b.sort) return 1;
21 | return 0;
22 | });
23 | }
24 | return menuSource.map((item, index) => {
25 | if (!item) return null;
26 | if (item.mdconf && item.mdconf.visible === true) return null;
27 |
28 | const url = item.mdconf && (item.mdconf.github || item.mdconf.url);
29 | if (url) {
30 | return (
31 |
32 | {item.mdconf.github && SVGGithub}{item.mdconf.title && {item.mdconf.title}}
33 |
34 | );
35 | }
36 | if (item.props && item.props.isEmpty === true && (item.mdconf && !item.mdconf.redirect)) return null;
37 |
38 | const regx = new RegExp(`^/${item.name}`, 'g');
39 | const isActive = regx.test(pathname);
40 | return (
41 |
42 | {item.mdconf.title || item.name}
43 |
44 | );
45 | });
46 | }
47 | render() {
48 | const { location: { pathname }, menuSource, className, children, logo } = this.props;
49 | const { mdconf } = this.props.indexProps || {};
50 | return (
51 |
93 | {isChild && (
94 |
127 | {this.renderSubMenu(menuSource)}
95 | )}
96 |
101 |
102 | {routeData.map((item) => {
103 | // 重定向跳转
104 | if (item && item.mdconf && item.mdconf.redirect) {
105 | let redirectPath = `${item.path || ''}/${item.mdconf.redirect}`;
106 | redirectPath = redirectPath.replace(/^\/\//, '/');
107 | return (
108 | {
116 | const Comp = item.component;
117 | return
124 |
125 |
126 |
52 |
61 | );
62 | }
63 | }
64 |
65 | Header.propTypes = {
66 | logo: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
67 | menuSource: PropTypes.array,
68 | };
69 |
70 | Header.defaultProps = {
71 | logo: null,
72 | menuSource: [],
73 | };
74 |
--------------------------------------------------------------------------------
/templates/default/introduce/api/theme-api.md:
--------------------------------------------------------------------------------
1 |
5 |
6 | ## 全局变量
7 |
8 | 全局变量 `__project_root__` 通常用于模板中懒加载 `markdown` 文件，例如：
9 |
10 | > 生成的缓存序列化文件，将被存放到当前目录下的 `.cache/md` 目录中。
11 |
12 | ```js
13 | // 加载高亮库
14 | import hljs from 'highlight.js';
15 |
16 | // filename 处理很重要
17 | // Markdown文件被处理成 `doc___fed___react___component-and-props.md` 这样,
18 | // 路径以下划线间隔避免重复，所以 要获取路径得 通过 props.page.routeData 中获取 relative 路径来处理
19 | const filename = '';
20 | // 加载 Markdown 文件，
21 | import(`__project_root__/.cache/md/${filename}.md`).then((data) => {
22 | this.setState({
23 | markdown: data,
24 | }, () => {
25 | // 找到当前组件根节点，循环code,
26 | // 对code里面的代码进行高亮
27 | let code = ReactDOM.findDOMNode(this);
28 | code = code.getElementsByTagName('code');
29 | for (let i = 0; i < code.length; i += 1) {
30 | if (code[i].parentNode && code[i].parentNode.tagName === 'PRE') {
31 | hljs.highlightBlock(code[i]);
32 | }
33 | }
34 | });
35 | });
36 | ```
37 |
38 | ## Markdown 文件索引
39 |
40 | 那你需要建立一个 `替身` 文件 `rdoc.tree.data.json`，引用替身文件，就可以获取到目录索引内容，这个在编译的时候会自动返回文件索引的 `json`。
41 |
42 | > ⚠️ 替身文件名字，必须取名 `rdoc.tree.data.json`。
43 | > ⚠️ 这个文件是必须建立，引用，这样可以渲染菜单。
44 | > ⚠️ rdoc v1.3.0 以后版本不需要，如果你有同名文件会被替换成，Markdown 文件索引。
45 | > ⚠️ Markdown 文件索引，会在入口函数传入。
46 |
47 | ```js
48 | import menuSource from './rdoc.tree.data.json';
49 | ```
50 |
51 | ## 模板入口
52 |
53 | ```js
54 | import BaseLayout from './layout/BasicLayout';
55 | import Loading from './component/Loading';
56 |
57 | export default function (Lazyload, props) {
58 | if (props.routeData && props.routeData.length > 0) {
59 | props.routeData.map((item) => {
60 | item.component = Lazyload({
61 | component: () => import('./routes/Pages'),
62 | LoadingComponent: Loading,
63 | });
64 | return item;
65 | });
66 | }
67 | return
53 |
60 | {logo && 
}{mdconf.title}
54 | {menuSource && {this.renderTopMenu(menuSource, pathname)}
}
55 | {children && children.map((item, index) => {
56 | if (isString(item)) return item;
57 | return React.cloneElement(item, { key: index });
58 | })}
59 |