Layouts
Customize the layout of your app by overwriting or modifying the default layout.
Custom Layout
Evidence will use any +layout.svelte file in the /pages directory to override the default layout.
The recommended approach is to copy and edit the default layout file
cp .evidence/template/src/pages/+layout.svelte pagesThis file can also be found in the Evidence GitHub repo.
You can customize the EvidenceDefaultLayout with the options below, or replace the contents of the file with an entirely new layout. If you include a +layout.svelte file in a directory, markdown files in that directory (and its subdirectories) will use this layout file instead of the default layout.
You can also add your own HTML elements to the default page layout.
Examples
Hide sidebar on all pages
<EvidenceDefaultLayout {data} hideSidebar=true >
<slot slot="content" />
</EvidenceDefaultLayout>Add a custom logo
With a logo file in ./static/my-logo.png.
<EvidenceDefaultLayout {data} logo="/my-logo.png" >
<slot slot="content" />
</EvidenceDefaultLayout>If you want to use a different logo in light and dark mode, use the lightLogo and darkLogo props instead of logo.
Options
The EvidenceDefaultLayout component includes a number of features on every page that can be removed or customized via props
Page Settings
App title that will replace the Evidence Logo.
- Options:
- Any string
Link to an image which will replace the Evidence logo. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory.
- Options:
- /logo.png
Link to an image which will replace the Evidence logo in light mode. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory.
- Options:
- /lightLogo.png
Link to an image which will replace the Evidence logo in dark mode. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory.
- Options:
- /darkLogo.png
Name of the home page in the sidebar.
- Options:
- Any string
- Default:
- Home
Sets the width of the app content in pixels. The default layout is about 1,280 px wide.
- Options:
- Any number
Hide Elements
Social Links & Search
Link to a Github Repo which will appear in the header using the Github Logo
- Default:
- https://github.com/evidence-dev/evidence
Link to an X (Twitter) profile which will appear in the header using the X Logo
- Default:
- https://twitter.com/evidence_dev
Link to a Bluesky profile which will appear in the header using the Bluesky Logo
- Default:
- https://bsky.app/profile/evidence.dev
Link to a slack community which will appear in the header using the slack Logo
- Default:
- https://slack.evidence.dev
Object containing Algolia docsearch credentials
- Options:
- {{appId: 'xxx', apiKey: 'xxx', indexName: 'xxx'}}