V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
yilin12
V2EX  ›  分享创造

Kokk — 优美的单页文档生成工具

  •  
  •   yilin12 ·
    luyilin · 2018-03-12 18:49:30 +08:00 · 4791 次点击
    这是一个创建于 2432 天前的主题,其中的信息可能已经有所发展或是发生改变。

    DEMO

    Github 地址

    img

    Kokk 可以把一个 markdown 文件渲染为一个单页的文档,⚠️注意这里的单页就是一页,不是单页面 2333

    除了这个,你还可以引入 Vue 的组件,然后把它渲染到文档里的某个地方。比如这个例子就用了 kokk 和 vue-juri 来生成文档并展示 demo。

    项目灵感来自于 Ant Design,我非常喜欢这个项目,第一次看代码时简直惊艳,项目结构、代码规范都做的非常之好,文档也很棒,生成文档用的是 bisheng,我一开始以为是必胜的意思,想着诶这个程序员也蛮中二的啊,后来看了 wiki 才发现指的是毕升 😂 我才不会说我本来想写一个 bisheng for Vue.js 但是失败了所以先写个这个试试

    kokk 和 vue-juri 名字都来自刻刻,推荐一下最喜欢的一月新番,今天有更新啊写完这个要回家追番了!

    第 1 条附言  ·  2018-03-12 20:26:10 +08:00
    才发现 demo 地址贴错了 emmmm 正确的 demo 地址: https://luyilin.github.io/kokk/
    用例: https://vue-cute-rate.netlify.com/
    13 条回复    2018-03-24 20:25:42 +08:00
    mokeyjay
        1
    mokeyjay  
       2018-03-12 20:30:55 +08:00
    一个建议——行间距是不是大过头了?
    viko16
        2
    viko16  
       2018-03-12 20:52:02 +08:00 via Android
    “把一个 markdown 文件渲染为一个单页的文档”
    额,相当于 marked + 漂亮 css ?
    yilin12
        3
    yilin12  
    OP
       2018-03-12 21:38:32 +08:00
    @mokeyjay 样式参考的这个 https://up.docs.apex.sh/ ,其实这种风格蛮好看的,性冷淡风?
    trendzi
        4
    trendzi  
       2018-03-12 21:44:27 +08:00
    想问一下:
    Kokk 可以把一个 markdown 文件渲染为一个单页的文档。
    你的 demo 例子中,没看到 markdown 文件在那里。

    渲染,可以在后端做吗?
    yilin12
        5
    yilin12  
    OP
       2018-03-12 21:45:02 +08:00
    @viko16 对 😂 但是还有生成侧边栏和插入自定义组件,比如你可以这样 https://user-images.githubusercontent.com/12069729/37286779-f027a5e0-263d-11e8-9712-c8005edee5e4.png
    这个 demo 展示的部分就是一个 Vue 的组件,你可以 import 这个组件,然后插入到文档的某个地方,写这个的初衷就是想能同时渲染 markdown 和展示 demo,就像 ant.design 的文档那样。
    yilin12
        6
    yilin12  
    OP
       2018-03-12 21:54:49 +08:00
    @trendzi 在文档的 quick start 部分有例子的哈,如果不需要插入自定义组件的话,就只需要一个 html 文件和一个 markdown 文件,这两个放在一个目录下,比如都放在 docs/ 目录,然后在 html 文件用 script 标签引入 kokk.js ,初始化 const doc = new Kokk() doc.start('#app') 就可以了。然后 serve docs/ 目录就能访问生成的文档,比如用
    GitHub Pages 展示时,source 选择 docs/ 目录,然后就可以访问文档了
    yilin12
        7
    yilin12  
    OP
       2018-03-12 22:00:04 +08:00
    @trendzi demo 里有例子的,https://github.com/luyilin/kokk/tree/master/docs demo 就是 serve 的 docs 目录里的
    index.html 和 README.md 。然后 docs 目录里的 components docs dev 这三个目录的内容是引入自定义插件的例子 😅
    v2gg
        8
    v2gg  
       2018-03-13 08:32:18 +08:00 via iPad
    @yilin12 这是 ant.design 嘛?
    v2gg
        9
    v2gg  
       2018-03-13 08:33:06 +08:00 via iPad
    @yilin12 噗没看 demo 就来评论了 打我吧 2333
    yilin12
        10
    yilin12  
    OP
       2018-03-13 13:29:16 +08:00
    @v2gg 23333 配合 https://github.com/luyilin/vue-juri 一起食用效果更佳
    Elven
        11
    Elven  
       2018-03-16 08:43:47 +08:00 via iPhone
    很棒棒呀,准备拿这个写文档~
    yilin12
        12
    yilin12  
    OP
       2018-03-16 22:13:41 +08:00 via Android
    @Elven 嘻嘻 have fun !
    v2gg
        13
    v2gg  
       2018-03-24 20:25:42 +08:00
    @yilin12 哇这个好棒!去试试 qvq
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   988 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:48 · PVG 04:48 · LAX 12:48 · JFK 15:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.