easy-github-pages | 一分钟搭建 GitHub Pages 的 Vue 组件

介绍

一个 Vue 组件, 用于小项目快速搭建 GitHub Pages 和 单页博客, 页面的样式布局和代码高亮已经都封装好了, 开箱即用

效果演示

创作原因

因为最近一直在写 Vue 相关的 GitHub 开源项目, 每个项目都需要有说明文档, 所以这里就直接开源出来一个快速搭建 GitHub Pages 的 Vue 组件。

示例

• easy-github-pages
• easy-affix
• vue-auto-text
• easy-go-top

安装

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)

模板

• 代码部分, 标签必须转为字符实体, 例如 < 必须转为 &lt; , 可以使用转码网站
• 默认支持 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">
&lt;easy-github-pages&gt;  内容xxx(注意标签必须转换为字符实体, 例如 < 必须转为 &lt;, 可以使用网站转码 https://www.sojson.com/rehtml )  &lt;/easy-github-pages&gt;
          </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 []
    }
  }
}

相关技术

• 整体风格参照了阮一峰老师的博客
• 代码高亮使用了 prismjs