如何用markdown編寫技術網站文檔

A library named Markdown CMS for markdown rendering with markdown cms for editing

🏠 Homepage

Demo

Prerequisites

  • node >=8.0.0

Install

* npm install --save @openapplus/markdown-cms

Usage

The demo below use umi framework refer https://umijs.org

article component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { MainContent } from '@openapplus/markdown-cms';
import { connect } from 'dva';
@connect(({ article }) => ({
    localizedPageData: article.localizedPageData,
    menuItems: article.menuItems,
    pathname:article.pathname,
}))
export default class Article extends MainContent {

    componentWillMount() {
        const {
            location: {
                pathname
            },
            dispatch
        } = this.props;
        dispatch({
                type: "article/fetchInit",
                payload: { pathname: pathname.replace('/article/','') },
            });
    }

}

article model

import { message } from 'antd';
import router from 'umi/router';
import { Render } from '@openapplus/markdown-cms';

export default {
    namespace: "article",
    state: {
        localizedPageData: {
            meta:{
                title:"",
                subtitle:"",
                filename:""
            },
            toc:null
        },
        menuItems: [],
        pathname:""
    },
    effects: {
        *fetchInit({ payload: { pathname } }, { call, put }) {
            const pageDataPath = pathname.split('/');
            const responseMenu = yield call(Render.getMenuItem, pageDataPath[0]);
            const responseData = yield call(Render.getPageData, pathname);
            if (responseMenu
                && responseData
            ) {
                yield put({
                    type: 'saveInit',
                    payload: {
                        localizedPageData: responseData,
                        menuItems: responseMenu,
                        pathname:pathname
                    },
                });
            }
        },
    },
    reducers: {
        saveInit(state, {payload}) {
            return {
                ...state,
                ...payload,
            };
        }
    },
}
import { Link } from 'react-router';
import {Render, Config} from '@openapplus/markdown-cms';
Config.setConfigByKey('components', {
    Link:Link
  });
  • configure the request url
import {Render, Config} from '@openapplus/markdown-cms';
Config.setConfigByKey("detailURL","/api/cms/content/detail");
Config.setConfigByKey("menuItemsURL","/api/cms/content/menuItems");
  • the request repsonse format

api: /api/cms/content/menuItems?fullName=docs
repsonse:

{"code":200,"success":true,"data":[{"title":"介紹","filename":"/docs/introduce.md","type":"file","children":null},{"title":"小程序框架","filename":null,"type":"category","children":[{"title":"小程序框架","filename":"/docs/framework/overview.md","type":"file","children":null}]}],"msg":"操作成功"}

api: /api/cms/content/detail?filename=docs%2Fdownload.md
repsonse:

{"code":200,"success":true,"data":{"id":"1278994423081050113","createUser":null,"createDept":null,"createTime":"2020-07-03 10:10:08","updateUser":null,"updateTime":"2020-07-03 10:10:08","status":1,"isDeleted":0,"tenantId":"000000","title":"介紹","content":"---\norder: 0\ntitle: \n  zh-CN: 介紹\n  en-US: 介紹\n---\n\n\n\n# 概述\n\nOpenApp+ 一個小程序容器,配置簡單、功能完善、界面流暢、開箱即用!使用OpenApp+可以快速擴展你的APP,使其擁有與微信一樣的功能擴展可能,讓App的所有的功能都通過小程序來實現,動態更新,更快的響應用戶需求。其擁有的管理具備版本管理功能,讓功能發佈更加隨心。\n\n## 誰在使用\n\n如果你和你的組織使用了這個產品,歡迎到 [Github](https://github.com/linwaiwai/openapplus/issues/3) 留言。\n\n\n### For 開發者\n\n如果你是工程師,請詳細閱讀開發文檔,具體介紹請查看 [使用文檔](/docs/introduction)。\n\n\n## 如何貢獻\n\n我們歡迎任何形式的貢獻,有任何建議或意見,請給我們 [提問]()。\n","filename":"introduce","categoryId":"1278","categoryName":"文檔"},"msg":"操作成功"}

Markdown template

---
order: 4
title: 
  zh-CN: 資源下載
  en-US: 資源下載
---
OpenApplus將爲專業版本以上客戶提供的自定義API功能的。提供的自定義API功能的能夠在IDE上編寫mock接口,在客戶端環境調用本地API。

使用的協議爲:
wx.api.setNavigationBarTitle({title:"hello", success:function(){}, fail:function(){}});

Run tests

yarn run test

License

/*

  • GPLv3 License
  • A library named Markdown CMS for markdown rendering with markdown cms for editing
  • Copyright (C) 2020 linwaiwai([email protected])
  • This program is free software: you can redistribute it and/or modify
  • it under the terms of the GNU General Public License as published by
  • the Free Software Foundation, either version 3 of the License, or
  • (at your option) any later version.
  • This program is distributed in the hope that it will be useful,
  • but WITHOUT ANY WARRANTY; without even the implied warranty of
  • MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  • GNU General Public License for more details.
  • You should have received a copy of the GNU General Public License
  • along with this program. If not, see https://www.gnu.org/licenses/.
  • Note:
  • This library is using opensource license GPLv3.
  • If your want to have it for commerce use, please contract author to be granted.
  • All the income will be donated to support the work of doctor at Wuhan Province in China until the epidemic of Wuhan ends.
  • Commerce authorization package will include frontend and backend solution, in which The frontend solution includes Markdown reader component and a micro frontend service which contains admin tools for json configuration, the backend is a SDK tool based on the SpringBoot.
  • All this will cost you only 500 yuan/year for public welfare. What a good deal.
  • Demo Link: http://www.openapplus.com/docs/introduce
  • 如果您想使用該庫作爲商業用途,需要聯繫作者([email protected])進行授權。
  • 所有的收入將會被捐獻給武漢抗疫直至疫情結束。
  • 商業授權包含前後端的解決方案,即包含Markdown Render組件以及後臺配置界面。後端代碼基於Spring Boot。
  • 每年授權費用500元人民幣用於公益用途,十分划算。
  • 前端演示地址: http://www.openapplus.com/docs/introduce

*/

Author

👤 linwaiwai

🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章