luban-h5

 en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.

 https://h5.luban.website/

📖中文文档 || 📖English Docs | README(en) || 论坛/社区 || DeepWiki || zread

鲁班H5

可视化搭建，拖拽生成移动端页面

Mobile Page Builder&Generator with Drag&Drop

目录

• 鲁班H5是什么？
• Demo
• Features
• 马上开始
• 更多说明
  • 前端组件说明
  • 技术栈（当前）
• 👨🏻‍💻👩🏻‍💻交流群

鲁班H5是什么？

1. 鲁班H5是基于Vue2.0开发、通过拖拽快速生成页面的平台
2. 类似 易企秀、Maka、百度 H5 等平台

Demo

在线访问地址

🔗Links/相关链接

源码	文档	教程	社区
GitHub	中文文档	视频-快速开始(哔哩哔哩)	论坛/社区(官方推荐)
Gitee (国内镜像)	English Docs	自定义组件教程(WIP)	Gitter
	README(En)	核心实现原理	中文社区/论坛(腾讯吐个槽)

🔗生态

后端集成	官方组件库	支撑/辅助组件	自定义组件	RoadMap
Strapi.js (官方后端API)	轮播图	图片库	自定义组件开发脚手架	RoadMap/开发计划
SpringBoot2-JPA	普通按钮	文本对齐	自定义组件开发教程
SpringBoot2-Mybatis-plus			视频教程(WIP)

快速体验

以下方式，任选其中一种即可

一、一键脚本（推荐！）

git clone https://github.com/ly525/luban-h5 && cd luban-h5
# 安装依赖，构建前后端（安装依赖会耗时略长，请耐心等待）
# 如果您遇到 sqlite3、node-gpy 等安装报错问题，请您执行 ./deploy/mirror.sh 配置npm 镜像为阿里云镜像(特别是为了解决二进制包安装问题)
./luban-h5.sh init

# 启动项目访问 http://localhost:1337 即可
./luban-h5.sh start

# ./luban-h5.sh stop

二、本地安装了 Node、Yarn

git clone https://github.com/ly525/luban-h5
cd luban-h5 # 项目根目录

# 后端
cd back-end/h5-api && yarn && yarn dev

# 前端
# 新开一个终端，在项目根目录执行如下命令
cd front-end/h5 && yarn && yarn build:engine && yarn dev

# 启动项目访问 http://localhost:1337 即可

• 更多细节，请参照 鲁班H5-在线文档 的 快速开始 章节，进行配置即可

• 如果遇到接口 403 问题，请参照 快速开始 章节，搜索关键字：403 即可.

  from  https://github.com/ly525/luban-h5 

markdown-folder-to-html

 Convert a folder with files and markdown documents to an HTML site。

Simplest zero-config way to generate html docs from markdown files.

Copies docs to _docs and compiles markdown files to html using docs/template.html.

Live example at chimeces.com/markdown-folder-to-html

Usage

Requires node.js >= 6

Given we have some docs:

1. mkdir -p docs
2. Add some docs echo "**Banana**" > docs/banana.md
3. Add some docs echo "**Apple**" > docs/index.md

In a project

1. Install npm install -D markdown-folder-to-html
2. Add docs to npm scripts {"scripts": {"docs": "markdown-folder-to-html"}}
3. 🎉 npm run docs and open _docs/index.html

Globally

1. Install npm install -g markdown-folder-to-html
2. 🎉 markdown-folder-to-html and open _docs/index.html

Conventions

Input/Output folder

You can pass an argument to the cli to change the input folder (by default docs). That will change the output folder too to _FOLDERNAME (by default _docs).

markdown-folder-to-html documentation
# Outputs site to _documentation

If you want to change the output folder name, just mv it to something else.

Custom HTML

The default HTML is extremely basic, but simple and pretty, and is the one used in the docs.

This is the basic template that would work:

<!doctype html>
<html>
<body>
<nav>
	<!--NAV-->
</nav>
<article>
	<!--CONTENT-->
</article>
</body>
</html>

Create your own in your docs folder docs/template.html to use that one instead. Feel free to include styles inline or CSS files (since all will be copied to output).

Order

You may have noticed that files are sorted alphabetically. There's a little trick where if you name your folders/files with XX-folder/XX-file (XX being a number of 1+ digits) those numbers won't show up on the index of the pages, giving you the ability to organize files both in the filesystem and in the generated HTML site.

Also, the root index.md file will always show up at the beginning of the index.

Site contents and information for custom templates

If you want to do things with a custom template HTML you need the information of the site. This will allow you to do things in the front-end UI, like adding search to the static site with lunrjs or other things like adding buttons for the next/previous article.

For this use cases, you will see a contents.json generated in your output folder. It contains the hierarchical paths of the files, and the contents with the original markup, the HTML, the original path and the transformed URL:

{
  "paths": [
    {
      "type": "file",
      "value": "index.md"
    },
    {
      "type": "file",
      "value": "1-banana.md"
    },
    {
      "type": "dir",
      "name": "a-folder",
      "children": [
        {
          "type": "file",
          "value": "a-folder/with-a-post.md"
        }
      ]
    }
    //...
  ],
  "contents": [
    {
      "path": "index.md",
      "url": "index.html",
      "content": "# markdown-folder-to-html\n\nSimplest zero-config ...",
      "html": "<h1>markdown-folder-to-html</h1>\n<p>Simplest zero-config ...",
      "id": 0
    },
    {
      "path": "1-banana.md",
      "url": "1-banana.html",
      "content": "**Banana**\n\nYou can have [nested folders](./n...",
      "html": "<p><strong>Banana</strong></p>\n<p>You can have <a h...",
      "id": 1
    }
    //...
  ]
}

See the JSON file of our documentation site for an example.

You can then fetch this JSON file with JS from your template, and go crazy with it, processing the contents to adapt them for search, looking for the previous/next articles to link to them, etc.

If you have working examples of a template that does something interesting, please let me know and I'll list them here!

Why

After quite a lot of research, I couldn't find a simple and straightforward solution to generating html docs from a folder full of markdown files that relied on simple concepts. That is what this tool does:

• Simply copy everything over, and translate .md files to .html with a pure HTML layout (feel free to add CSS, or JS, or precompile those assets if you need to)
• .md links are rewritten to .html so that you can reference files with their real path on your markdown files and they'll work on the HTML version too.
• Provide sensible defaults and zero-configuration. JUST WORK.
• Use know abstraction, like the file system, pure HTML, etc

Links

• https://github.com/joakin/markdown-folder-to-html
• https://npmjs.org/package/markdown-folder-to-html

from  https://github.com/joakin/markdown-folder-to-html