Giter Club home page Giter Club logo

vuepress-skeleton's Introduction

Vuepress

VuePress 是一个 静态网站生成器,使用它我们一方面可以专注输出技术类文档,也可以使用基于Vue的开发方式来开发我们其它的静态网站。 每一个由 VuePress 生成的静态页面都是经过服务端渲染(SSR)而来,因此由 VuePress 生成的页面在加载性能和搜索引擎优化(SEO)上有很明显的优势。

组成部分

通常而言,一个由 VuePress 生成的网站,它是用 VueVue-routerWebpack 以及利用服务端渲染(SSR)而来,它不仅支持 Vue 组件的写法,还内置 Stylus 语法。

安装

全局安装(推荐)

通常而言,全局安装 VuePress 会非常省心,可以通过如下命令进行全局安装

npm install -g vuepress

本地安装

区别于全局安装,本地安装会把 npm 包安装在本项目上,生成一个叫 node_modules 目录,可以通过如下命令进行本地安装(需同时安装 vuepresswebpack-dev-middleware

npm install vuepress webpack-dev-middleware --save-dev

首页配置说明

home: true
heroText: God bless You, God love You
heroImage: /images/logo.png
actionText: Get Start →
actionLink: /guide/
features:
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2020 Charsen

在首页的YAML格式配置中,我们填写了一些配置,下面我们将详细描述每一个配置的具体含义

  • home:true:标记此页面是否为首页
  • lang:zh-CN:表示本页面的语言为zh-CN(简体中文)
  • heroText: 首页的标题内容
  • heroImage: 首页的标题图片,其中全路径为 docs/.vuepress/public/logo.jpg,默认去 public 目录下找静态资源
  • actionText: 首页跳转按钮的内容
  • actionLink: 首页跳转按钮挑战的路径,其中全路径为docs/interview/readme.md,默认 readme 命名的文件可以省略不写链接的后面内容,省略后的链接如上
  • features: 表明首页的特征,固定的格式为 title + details,以三栏流式布局的方式展示 footer: 为底部内容,与普通的网页一样,我们可以在 footer 里面写版权信息

vuepress-skeleton's People

Contributors

charsen avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.