Git Product home page Git Product logo

vitepress-nav-template's Introduction

vitepress-nav-template

home

基于 VitePress 的个人前端导航页面模板

基础教程 | 作者博客


预览地址

功能

  • 新增 layout-class 方便更好的自定义样式
  • 默认中文
  • 自带前端导航模块
  • 支持访客统计
  • 支持 giscus 评论
  • 支持日夜颜色模式自适应切换
  • 支持 Github Pages 直接部署上线
      1. 开启 github actions
      1. 配置 Pages 为 gh-pages 分支
      1. 访问地址为 https://<username>.github.io/<repository>/
  • 支持 tailwindcss
  • 支持查看 vue 示例组件源码(使用 vite-plugin-markdown-preview

开启访客统计

需在 docs/.vitepress/config.ts 中配置 themeConfig.visitor

export default defineConfig({
  themeConfig: {
    /* 访客统计 */
    visitor: {
      /** 统计 id(单独页面的统计会作为前缀使用)*/
      badgeId: 'maomao1996.vitepress-nav-template',
    },
  },
})

开启 giscus 评论

需在 docs/.vitepress/config.ts 中配置 themeConfig.comment

export default defineConfig({
  themeConfig: {
    /**
     * giscus 评论配置
     *  请根据 https://giscus.app/zh-CN 生成内容填写
     */
    comment: {
      /** github 仓库地址 */
      repo: '',
      /** giscus 仓库 ID */
      repoId: '',
      /** Discussion 分类 */
      category: '',
      /** giscus 分类 ID */
      categoryId: '',
    },
  },
})

在指定页面关闭评论

需在指定页面的 markdown 文件中添加如下 frontmatter 配置

---
comment: false
---

# 功能测试页

docs: 更新 README

说明

前端导航模块由 茂茂 | maomao 开发,如有引用、借鉴的请保留版权声明:https://github.com/maomao1996/vitepress-nav-template

vitepress-nav-template's People

Contributors

maomao1996 avatar rainbreezemf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vitepress-nav-template's Issues

布局可以改为左右结构吗

链接组件里面,可以把图片放左边,名称和描述放右边,这样左右布局吗?不懂编程,照抄过来修改好难。

请求指教:如何做到内部跳转呢

即主页md跳转到另一个md页面

在ts文件中 link 无法直接引入md文件,否则会不渲染;

不带md后缀,虽然进页面了,但也会因为路由问题404一下后,强制进入,过渡非常生硬

请问我需要怎样才可以做到呢,非常感谢

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.