Skip to content

Modifying Content on VitePress

cynber edited this page Aug 22, 2024 · 4 revisions

VitePress

Pull Requests: Before opening a pull request, please check if the project builds successfully with npm run docs:build. Some issues will not be caught by the development server, but this command will catch them.

Using the installed plugins

Iconify

We are using Iconify to display icons on the site.

  1. Find an icon from their website
    • For most cases, you will need to set it to Vue and copy the code.
    • In some cases, such as the Vitepress Style Cards below, you will need to copy the short code only.
  2. Use the icon with text as follows:
<h3 class="text-with-icon">
    <Icon icon="ci:folders" width="1.2em" height="1.2em" />
    Relevant Projects
</h3>

Customization:

  • You can use the icon-left, icon-right, and icon-middle classes to change the position of the icon. For example: <h3 class="text-with-icon icon-right">.
  • You can change other properties of the icon by using the menus on the Iconify website.

Note

Custom Components Before you can use icons in custom components, you need to add the following code:

<script>
import { Icon } from "@iconify/vue"; // [!code ++]
// ...

export default {
  // ...
  components: {
    Icon, // [!code ++]
  },
  // ...
}

Medium Zoom

We are using Medium Zoom to allow for zooming in on images. You can see it in action on the Places to Visit page and the Study Spots page.

To use it, you need to add the data-zoomable attribute to the image you want to zoom in on. For example:

![image](/img/campus/ubc-sights/blossoms.jpg){ data-zoomable }
Clone this wiki locally