-
Notifications
You must be signed in to change notification settings - Fork 1
Modifying Content on VitePress
cynber edited this page Aug 22, 2024
·
4 revisions
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.
We are using Iconify to display icons on the site.
- 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.
- 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
, andicon-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 ++] }, // ... }
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 }