4bd9c6ca20
Signed-off-by: blacklight447 <niek@privacyguides.org> Signed-off-by: kimg45 <138676274+kimg45@users.noreply.github.com> Signed-off-by: Daniel Gray <dngray@privacyguides.org>
8.5 KiB
| title | description |
|---|---|
| Admonitions | A guide for website contributors on creating admonitions. |
Admonitions (or "call-outs") are a choice writers can use to include side content in an article without interrupting the document flow.
Example Admonition
This is an example of an admonition. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
Example Collapsible Admonition
This is an example of a collapsible admonition. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
Formatting
To add an admonition to a page, you can use the following code:
<div class="admonition TYPE" markdown>
<p class="admonition-title">TITLE</p>
ENCLOSED TEXT
</div>
<details class="TYPE" markdown>
<summary>TITLE</summary>
ENCLOSED TEXT
</details>
The TITLE must be specified, if you don't want a specific title you can set it to the same text as the TYPE (see below) in title case, e.g. Note. The ENCLOSED TEXT should be Markdown formatted.
Regular types
Replace TYPE in the examples above with one of the following:
note
Note
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
abstract
Abstract
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
info
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
tip
Tip
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
success
Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
question
Question
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
warning
Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
failure
Failure
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
danger
Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
bug
Bug
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
example
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
quote
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Special Types
recommendation
This format is used to generate recommendation cards. Notably it is missing the <p class="admonition-title"> element.
<div class="admonition recommendation" markdown>
{ align=right }
**PhotoPrism** is a self-hostable platform for managing photos. It supports album syncing and sharing as well as a variety of other [features](https://photoprism.app/features). It does not include E2EE, so it's best hosted on a server that you trust and is under your control.
[:octicons-home-16: Homepage](https://photoprism.app){ .md-button .md-button--primary }
[:octicons-eye-16:](https://photoprism.app/privacy){ .card-link title="Privacy Policy" }
[:octicons-info-16:](https://photoprism.app/kb){ .card-link title=Documentation}
[:octicons-code-16:](https://github.com/photoprism){ .card-link title="Source Code" }
<details class="downloads" markdown>
<summary>Downloads</summary>
- [:simple-github: GitHub](https://github.com/photoprism)
</details>
</div>
{ align=right }
PhotoPrism is a self-hostable platform for managing photos. It supports album syncing and sharing as well as a variety of other features. It does not include E2EE, so it's best hosted on a server that you trust and is under your control.
:octicons-home-16: Homepage{ .md-button .md-button--primary } :octicons-eye-16:{ .card-link title="Privacy Policy" } :octicons-info-16:{ .card-link title=Documentation} :octicons-code-16:{ .card-link title="Source Code" }
Downloads
downloads
This is a special type of collapsible admonition, used to generate the download links section. It is only used within recommendation cards, as shown in the example above.
<details class="downloads" markdown>
<summary>Downloads</summary>
- [:simple-googleplay: Google Play](https://play.google.com/store/apps/details?id=ch.protonmail.android)
- [:simple-appstore: App Store](https://apps.apple.com/app/id979659905)
- [:simple-github: GitHub](https://github.com/ProtonMail/proton-mail-android/releases)
- [:fontawesome-brands-windows: Windows](https://proton.me/mail/bridge#download)
- [:simple-apple: macOS](https://proton.me/mail/bridge#download)
- [:simple-linux: Linux](https://proton.me/mail/bridge#download)
- [:octicons-browser-16: Web](https://mail.proton.me)
</details>
Old Format
Throughout the site, you may see some admonitions formatted similarly to these examples:
!!! note
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Note
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
??? example "Custom Title"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Custom Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
This format is no longer used going forward, because it is incompatible with newer versions of our translation software at Crowdin. When adding a new page to the site, only the newer HTML-based format should be used.
There is no rush to convert admonitions with the old format to the new format. Pages currently using this formatting should continue to work, but we will be updating them to use the newer HTML-based format above over time as we continue to update the site.