README
easy-github-pages | 一分钟搭建 GitHub Pages 的 Vue 组件
介绍
一个 Vue 组件, 用于小项目快速搭建 GitHub Pages 和 单页博客, 页面的样式布局和代码高亮已经都封装好了, 开箱即用
效果演示
创作原因
因为最近一直在写 Vue 相关的 GitHub 开源项目, 每个项目都需要有说明文档, 所以这里就直接开源出来一个快速搭建 GitHub Pages 的 Vue 组件。
示例
安装
npm install easy-github-pages --save-dev
使用
// 局部引入
import EasyGithubPages from 'easy-github-pages'
export default {
components: {
EasyGithubPages
}
}
// 全局引入
import EasyGithubPages from 'easy-github-pages'
Vue.component(EasyGithubPages.name, EasyGithubPages)
模板
- 代码部分, 标签必须转为字符实体, 例如 < 必须转为 < , 可以使用转码网站
- 默认支持 html、css、js 的语法高亮, 如果需要其他语言的高亮, 请去prismjs 官网下载相应的语言包, 并引入即可
- 如果需要 prismjs 的插件功能, 直接引入相应的插件即可, 无需再引入 prismjs
<easy-github-pages
:menus="[
{
title: '介绍',
href: 'intro'
},
{
title: '安装',
href: 'install'
},
{
title: '使用',
href: 'usage'
}
]"
author="zhangchaojie"
homepage="https://github.com/dream2023"
githubUrl="https://github.com/dream2023/easy-github-pages"
title="easy-github-pages | 快速搭建 GitHub Pages 的 Vue 组件"
>
<section id="intro">
<h2>介绍</h2>
<p>xxx</p>
</section>
<section id="install">
<h2>安装</h2>
<p>
<blockquote>npm install xxx</blockquote>
</p>
</section>
<section id="usage">
<h2>使用</h2>
<p>
<blockquote>
<pre class="language-html">
<code class="language-html">
<easy-github-pages> 内容xxx(注意标签必须转换为字符实体, 例如 < 必须转为 <, 可以使用网站转码 https://www.sojson.com/rehtml ) </easy-github-pages>
</code>
</pre>
</blockquote>
</p>
</section>
</easy-github-pages>
Props 参数
props: {
// 文章标题
title: String,
// 文章对应的GitHub项目
githubUrl: String,
// 作者名称
author: String,
// 作者的个人主页或者GitHub主页(这里如果不填的话, 则使用githubUrl)
homepage: String,
// menu 导航菜单
menus: {
type: Array,
default () {
return []
}
}
}