Designed for GitHub Pages (especially for /docs option).
A demo: Docs of Ark
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction to Ark</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"/>
<style>
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo {
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
line-height: 30px;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: white;
text-align: center;
}
.layout-nav {
width: 255px;
margin: 0 20px 0 auto;
}
#markdown {
font-size: 1.2em;
}
</style>
</head>
<body>
<div id="app">
<div class="layout">
<Layout>
<Header style="position: fixed;top:0;height: 60px;width: 100%">
<i-menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo">Ark</div>
<div class="layout-nav">
<menu-item name="1">
An universal framework for PHP 7
</menu-item>
</div>
</i-menu>
</Header>
<Layout>
<Sider hide-trigger :style="{background: '#fff', minHeight:'80vh',position:'fixed',left:0,top:'60px'}">
<i-menu theme="light" @on-select="onMenuSelected" width="auto">
<template v-for="(menuGroupItem,menuGroupKey) in menuGroupList">
<Submenu v-if="menuGroupItem.type=='sub-menu'" :key="menuGroupKey"
:name="menuGroupItem.title">
<template slot="title">
{{ menuGroupItem.title }}
</template>
<menu-item v-for="(menuItem,menuKey) in menuGroupItem.items" :key="menuKey"
:name="menuItem.name">
{{ menuItem.title }}
</menu-item>
</Submenu>
<menu-item v-if="menuGroupItem.type=='menu'" :key="menuGroupKey" :name="menuGroupItem.name">
{{ menuGroupItem.title }}
</menu-item>
</template>
</i-menu>
</Sider>
<Layout :style="{padding: '0 24px 24px',marginLeft:'200px',marginTop:'60px'}">
<Content :style="{margin: '24px 0',padding: '24px', minHeight: '70vh', background: '#fff'}">
<div id="markdown" class="markdown-body" v-html="compiledMarkdown" v-highlight></div>
</Content>
<Footer style="text-align: center">
Copyright 2018 <a href="mailto:e.joshua.s.e@gmail.com">Sinri Edogawa</a>
</Footer>
</Layout>
</Layout>
</Layout>
</div>
</div>
<script>
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
});
let app = new Vue({
el: '#app',
data: {
markdownContent: '> LOADING...',
menuGroupList: [],
},
computed: {
compiledMarkdown: function () {
return marked(this.markdownContent, {sanitize: true})
}
},
methods: {
onMenuSelected: function (name) {
console.log("onMenuSelected", name);
axios.get("./markdown/" + name + ".md")
.then((response) => {
this.markdownContent = response.data;
})
.catch((error) => {
this.markdownContent = "# Page '" + name + "' is not found";
});
}
},
mounted: function () {
axios.get("./menu.json")
.then((response) => {
console.log(response.data);
let menuGroupList = [];
for (let k1 in response.data) {
if (!response.data.hasOwnProperty(k1)) continue;
let item1 = response.data[k1];
if (typeof item1 === 'string') {
menuGroupList.push({
type: 'menu',
name: k1,
title: item1,
});
} else {
let submenu = {
type: 'sub-menu',
title: k1,
items: []
};
for (let k2 in item1) {
if (!item1.hasOwnProperty(k2)) continue;
let item2 = item1[k2];
submenu.items.push({
name: k2,
title: item2,
});
}
menuGroupList.push(submenu);
}
}
this.menuGroupList = menuGroupList;
this.onMenuSelected('introduction');
}).catch((error) => {
this.markdownContent = "# Menu is not found";
});
}
});
</script>
<!--
This docs index.html, menu.json and markdown files would be also a good sample for GitHub Pages, ha ha ha~
-->
</body>
</html>
menu.json
{
"path": "title-of-first-level-page",
"title-of-sub-menu": {
"path": "title-of-second-level-page"
}
}
The path might be foo or foo/bar, which would each be linked to ./markdown/foo.md or ./markdown/foo/bar.md.
Directory markdown
Your contents here stored inside as .md files to be referred.