从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

这篇具有很好参考价值的文章主要介绍了从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

接上一节:从零用VitePress搭建博客教程(4) – 如何自定义首页布局和主题样式修改?

上一节其实我们也简单说了自定义页面模板,这一节更加详细一点说明,开始之前我们要知道在vitePress中,.md的文件是可以直接编写vue的代码的。

比如我们现在来自定义一个前端网址导航页面

八、自定义一些页面模板

1、编写组件代码

想自定义页面模板样式,该如何做呢?
我们先在theme/components下新建siteList.vue文件,编写模板,代码如下:

<template>
  <!-- 网址分类模块 -->
  <section class="site-section">
     <!-- 标题 -->
    <h2 class="title">{{ props.title }}</h2>
    <!-- 网址列表 -->
    <ul class="list">
      <li class="item" v-for="(v, index) in props.data" :key="v.name">
        <a class="link" :href="v.link" target="_blank">
          <span class="num">{{ index + 1 }}</span>
          <h4 class="name">{{ v.name }}</h4>
          <p class="desc">{{ v.desc }}</p>
        </a>
      </li>
    </ul>
  </section>
</template>
<script setup>
const props = defineProps({
  title: String,
  data: {
    type: Array,
    default: [],
  },
});
 
</script>
<style lang="scss" scoped>
/*单行文本省略号*/
@mixin single-ellipsis {
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site-section {
  .title {
    color: #222;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    .item {
      width: 212px;
      margin: 15px 15px 0 0px;
      background: #fff;
      position: relative;
      .link {
        width: 210px;
        display: block;
        border: 1px solid #e3e3e3;
        padding-bottom: 8px;
        border-radius: 6px;
        .num {
          display: block;
          width: 24px;
          height: 18px;
          line-height: 18px;
          position: absolute;
          color: #666;
          font-size: 14px;
          text-align: center;
          right: 5px;
          top: 5px;
        }
        .name {
          width: 80%;
          height: 26px;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 600;
          color: #06a4fa;
          margin-top: 15px;
          @include single-ellipsis;
        }
        .desc {
          font-size: 12px;
          margin: 10px 10px 0;
          color: #b1b1b1;
          height: 36px;
          line-height: 18px;
          @include single-ellipsis;
        }
        &:hover {
          text-decoration: none;
          border: 1px solid var(--vp-c-brand);
          filter: brightness(1.15);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
          transform: rotateY(-0.1deg) scale(1.001) translateZ(0);
          transition: all 0.24s ease;
          .name {
            color: var(--vp-c-brand);
          }
          .num {
            background: var(--vp-c-brand);
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

 文章来源地址https://www.toymoban.com/news/detail-710956.html

2、注册组件

上面我们写好组件代码后,需注册为全局组件,如下theme/index.js的配置,把SiteList注册为全局组件,然后在页面引用即可。

// https://vitepress.dev/guide/custom-theme
import { h } from "vue";
import siteList from "./components/siteList.vue";
 
import DefaultTheme from "vitepress/theme";
import "./styles/custom.scss";
import "./styles/site.scss";
import "./styles/rainbow.css";
 
export default {
  ...DefaultTheme,
  NotFound: () => "404", // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
    app.component("SiteList", siteList);
  },
};

 

3、如何给页面添加自定义类className

官方就有最简单的配置方法,向特定页面添加额外的类名pageClass:比如给page.md页面配置,只需如下即可

---
pageClass: site-layout
---

  然后在下面写样式即可

.site-layout {
  ...
}

  当然还有一种方法是:我们还可以在theme/index.js,通过js添加(Layout配置),这个一个页面可以添加多个className了。

// https://vitepress.dev/guide/custom-theme
import { useData } from "vitepress";
import siteList from "./components/siteList.vue";
 
import DefaultTheme from "vitepress/theme";
import "./styles/custom.scss";
import "./styles/site.scss";
import "./styles/rainbow.css";
 
export default {
  ...DefaultTheme,
  NotFound: () => "404", // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
    // 注册全局组件
    app.component("SiteList", siteList);
  },
  // 自定义布局配置
  Layout: () => {
    const props = {};
    // 获取 frontmatter
    const { frontmatter } = useData();
 
    /* 添加自定义 class */
    if (frontmatter.value?.layoutClass) {
      props.class = frontmatter.value.layoutClass;
    }
  },
};

 

  然后同样的page.md页面,我们可以通过layoutClass设置另一个className了,如下

---
layoutClass: site-page
pageClass: site-layout
---

  

4、页面使用组件

同样还是上面的page.md,我们使用组件如下

---
pageClass: site-layout
---
 
<SiteList v-for="model in siteData" :key="model.title" :title="model.title" :data="model.items" />
<script setup>
// 网址导航页面的数据
import siteData from "./data/page.js";
</script>

 

效果

从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

 

 

5、如何使页面标题变成侧边目录呢?

从上面图中可以看出,我们发现右边没有侧边导航,那么如何使页面标题变成侧边目录呢?

这个时候需要用到@mdit-vue/shared,siteList.vue组件修改代码如下

<template>
  <!-- 网址分类模块 -->
  <!-- <backTop></backTop> -->
  <section class="site-section">
    <!-- 瞄点标题 -->
    <h2 class="title" :id="createTitle">
      {{ props.title }}
      <a class="anchor" :href="`#${createTitle}`" aria-hidden="true"></a>
    </h2>
    <!-- 网址列表 -->
    <ul class="list">
      <li class="item" v-for="(v, index) in props.data" :key="v.name">
        <a class="link" :href="v.link" target="_blank">
          <span class="num">{{ index + 1 }}</span>
          <h4 class="name">{{ v.name }}</h4>
          <p class="desc">{{ v.desc }}</p>
        </a>
      </li>
    </ul>
  </section>
</template>
<script setup>
import { computed } from "vue";
import { slugify } from "@mdit-vue/shared";
const props = defineProps({
  title: String,
  data: {
    type: Array,
    default: [],
  },
});
 
// 生成侧边栏markdown的目录
const createTitle = computed(() => {
  return slugify(props.title);
});
</script>

发现目录已经有了,效果如下:  

从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

 

这个时候目录是在页面右边的,那么如何变成在左侧边栏呢?我们通过样式调整即可,site.scss

/**
  网址导航页面样式
**/
 
.site-layout {
  /*布局调整*/
  .VPDoc {
    .container {
      max-width: 100% !important;
      justify-content: flex-start !important;
      .aside {
        order: 1;
      }
      .content {
        order: 2;
        max-width: 100% !important;
        .content-container {
          max-width: 100% !important;
        }
      }
      .main {
        height: auto;
        overflow: hidden;
        .vp-doc h2 {
          margin: 0;
        }
      }
    }
  }
  /* 隐藏底部的在 github 上编辑此页模块*/
  .VPDocFooter {
    display: none;
  }
}

  从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

6、如何自定义页面的底部?

我们新建一个siteFooter.vue组件,然后在theme/index.js通过h函数配置即可,这里使用到doc-after插槽,

默认主题布局中可用插槽的完整列表:https://process1024.github.io/vitepress/guide/theme-introduction

<template>
  <div class="site-footer">
    网址导航自定义底部信息
  </div>
</template>
mport { h } from "vue";
import siteFooter from "./components/siteFooter.vue";
 
import DefaultTheme from "vitepress/theme";
 
export default {
  ...DefaultTheme,
  NotFound: () => "404", // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
    // 注册全局组件
  },
  // 自定义布局配置
  Layout: () => {
    return h(DefaultTheme.Layout, props, {
      // 自定义文档底部,使用doc-after插槽
      "doc-after": () => h(siteFooter),
    });
  },
};

从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

github项目地址:https://github.com/msyuan/vitePress-project

在线预览效果:https://msyuan.github.io/vitePress-project

原文地址:http://www.qianduan8.com/2048.html

 

到了这里,关于从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 5分钟使用VitePress + GithubAction搭建个人博客

    ✅作者:TuNan ✨个人主页:图南的个人主页 😉欢迎关注🔎点赞😍收藏⭐留言💌 先决条件 Node.js 版本 16 或更高版本。 用于通过命令行界面(CLI)访问 VitePress 的终端。 具有 Markdown 语法支持的文本编辑器。推荐使用 VSCode) 以及官方 Vue 扩展。 VitePress 可以单独使用,也可以安

    2024年02月04日
    浏览(42)
  • 10分钟 使用VitePress和GitHub Actions快速搭建发布个人博客

    VitePress官网Getting Started | VitePress VitePress 是一个静态站点生成器 (SSG),旨在构建快速、以内容为中心的网站。 Node.js (nodejs.org)Node版本18或更高版本 **使用 node -v **查看node版本 创建文件夹并进入到项目的目录 初始化项目 这里会带有设置向导 安装项目所需的 vitepress 依赖 在

    2024年02月03日
    浏览(71)
  • 百度小程序开发平台源码系统:海量模板,定义移动时代的最佳体验 附带完整的搭建教程

    移动互联网的飞速发展,小程序成为了众多企业和开发者的新宠。今天来给大家分享一个百度小程序的开发平台,带完整的搭建教程。 以下是部分代码示例: 系统特色功能一览:     1.海量模板,快速搭建 百度小程序开发平台源码系统提供了海量的模板,涵盖了各种行业和

    2024年01月18日
    浏览(41)
  • 【Web 三件套】个人简单博客系统页面搭建(附源码)

    以下为个人搭建的一个简单博客系统页面,以后会不断改进,并且与后端结合,形成一个完整的博客系统 该博客系统页面是由 HTML + CSS + JavaScript 搭建的,如果没有了解过这些知识的友友,可以通过本人之前写好的几篇相关文章入门 文章一: 《超多动图带你入门 HTML》 文章二

    2024年02月02日
    浏览(48)
  • HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    登录页面 门户页面 博客页面 技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建 安装指令 ELement 在 node 下载后,会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

    2024年02月05日
    浏览(86)
  • 博客园如何设置自定义主题?

    作者:西瓜程序猿 主页传送门:https://www.cnblogs.com/kimiliucn 写博客也有一个月了,发现博客园自带的主题都不太好看,然后搜索了一下发现这款主题【Cnblogs-Theme-SimpleMemory】界面还挺好看的,也是开源的。那[西瓜程序猿]就以这个主题来介绍一下如何在博客园中进行配置,跟着

    2024年02月10日
    浏览(48)
  • 搭建个人博客详细教程

    由于国外的github page访问总是非常慢的,本文选择国内开源代码托管平台码云,因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站。自己亲手勉强搭起个人博客,首先感谢木千之博主的详细教程,给了清晰的思路,写下这篇博客将详细过程记录,希望帮助更多的人,减

    2023年04月08日
    浏览(47)
  • gitee搭建个人博客教程

    基础环境: gitee账号、git、node.js、npm、Typora(需要版本高一点) 个人博客 创建账号同名的仓库 获取账号名方式如下,去掉@号的部分。 创建一个和你gitee账号同名的仓库,这样就可以用https://账号名.gitee.io/来访问。 填写仓库名称即可,但建议勾选上设置模板----Readme文件。

    2024年02月09日
    浏览(44)
  • Hexo+Github博客搭建教程

    注意,这篇文章篇幅较长,主要针对新手,每一步很详细,所以可能会显得比较啰嗦,所以建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看,不要文章没看,上来先喷一下!谢谢*[Math Processing Error]⊙o⊙*。 教程内容随意复制使用,引用的话请加一个参考链接,谢

    2024年01月16日
    浏览(51)
  • 【博客693】alertmanager如何自定义告警template

    template功能: https://prometheus.io/blog/2016/03/03/custom-alertmanager-templates/ 默认的template: https://github.com/prometheus/alertmanager/blob/main/template/default.tmpl 配置template: 自定义template模版: 效果: 告警触发 告警恢复

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包