Page Content

Format publication content, including adding features and links

Format publication content, including adding features and links

Start with Page YAML

As outlined in Page Types & Structure, in Quire, a content or .md file will always start off with a YAML block at the top of the page. For example, The markdown file for this page starts with the following YAML:

---
title: Page Content
layout: essay
order: 206
---

Format Text Content with Markdown

The main content of your page comes after the YAML block at the top, and will be formatted in Markdown. Markdown is a very simple, plain text markup language that uses a few text rules to structure content for easy conversion into HTML. For example, a hash or pound sign at the beginning of a line makes a heading, and asterisks wrapping text turns it italic.

You can read all about Markdown syntax and how it is used in Quire in the YAML & Markdown section of this guide. If your source files are Microsoft Word files then we recommend using Pandoc for conversion into Markdown. We also recommend reviewing our Manuscript Prep guide when using Pandoc.

Use Shortcodes to Add Features

Quire adds a number of specialty which extend the functionality and possibilities of plain Markdown. A shortcode is a simple snippet of code inserted in a Markdown file. The shortcode pulls in information from your data (.yaml) files using identifiers. This means that, in most cases, when you edit the YAML file, these changes will be automatically be reflected in all Markdown files that include the respective shortcode. Shortcodes are always formatted with a combination of curly brackets and the percentage sign with the shortcode type and id value listed inside within single quotes: {% shortcode-type 'figure-id' %}. Additional values can be added to the shortcode such as grid or class which you can learn more about in the Figure Images section of this guide. The example below inserts a figure and any related data that corresponds with the id 3.1 as provided in the figures.yaml file.

{% figure '3.1' %}

The following shortcodes are currently available in Quire. You’ll find more about them in their respective sections of the guide, as well as in the shortcodes API reference.

  • {% accordion %}: Creates a collapsible section for content that may otherwise too long and unweildy, or that is an aside to the current topic. Also available is the {% accordionGlobalControls %} shortcode.
  • {% cite %}: Adds a linked Author Date citation reference to the text, and an in-text (or hover pop-up) citation. It also adds the citation to a map of cited works, which can then be output as a page-level bibliography on essay and entry type pages.
  • {% contributors %}: Can be used to create a page of contributor biographies, a section of bios for a single page, a simple list of contributors, a byline for a particular page, or other similar outputs.
  • {% figure %}: Inserts a formatted figure image (including audio and video) and caption using data from the project’s figures.yaml file, or from values supplied directly in the shortcode.
  • {% figuregroup %}: Like {% figure %}, but with handling for multiple images at once.
  • There is an additional shortcode that is use to format backmatter. You can use the pairing of {% backmatter %} and {% endbackmatter %} to wrap bibliographies, appendices, and other related content at the end of an article or page. Whatever falls inside those two shortcodes will match the default footnote styling. In order for the shortcode to work, there must be a line break before and after the word or words that you are styling.
{% backmatter %}

## Notes

{% endbackmatter %}

Use HTML to Add Styles

You can also use HTML markup to wrap a block of text and apply certain styles to that text. The example below adds the class “alert” to the the phrase “Text goes here”.

<div class="alert">

Text goes here

</div>

Learn more about adding styles in the Style Customization section of this guide.

A link is created by combining the text of the link in brackets with the url of the link in parentheses: [Link text](Link URL) There are several types of linking that can be applied to text on your page. Stylization such as bolding, italics, underlining, and more can also be applied to linked text.

External links can be included through the following Markdown formatting:

[Link text](http://www.linkaddress.com)
[Getty Museum](https://www.getty.edu/museum/)

Internal links between pages in your Quire publication can be included through the following Markdown formatting using the file name of the page and the directory name of the section it is in.

[Link text](/name-of-section-if-any/nameofpage/)
[Pea Pickers](/catalogue/2/)
More info in our [about](/about/) page.

There are several types of linking between features, text, or objects on a single page that can be included through the following Markdown formatting:

This linking can be applied to a piece of text that when clicked upon will take a user to the location of the corresponding figure on the page. Figure IDs can be found on the figures.yaml page as explained in the Figure Images chapter of this guide. They are proceeded by the # symbol when used as a link address.

[number or name of figure](#figureid)
[fig. 1](#1.1)

Links to Other Page Elements

An ID and the # symbol is also used for other kinds of elements on the same page. The IDs for these elements can be found using the following method:

  • Use the Inspect Element tool when right clicking a page or specific element. For Safari users, refer to this guide to enable this feature.

  • In the page’s code, certain elements will include a piece of code, id="idnamehere" that designates the ID of that element. If the name of the element has a space that will be represented with a dash -.

  • For example, the ID of a heading will often be the name of that heading.

[referencetolink](#element-id)  
See [heading 1](#heading-1).

Links to Elements on a Separate Page

Following the formula for internal links between pages, you can also specify an element on a separate page as a link destination by adding the # symbol and the element’s ID on to the end of a page link.

[referencetolink](/nameofpage/#idname)
See the introduction [notes](/introduction/#notes)

Linked Footnotes

When creating footnotes with Markdown, links are automatically created between the footnote number in the text and the note itself at the bottom of the page. To link to a note from other locations, you can use its automatically generated ID, which always follows the format fn# where # is the number of the footnote.

[referencetolink](#fn#)
Also in regards to [note 21](#fn21)
See [note 3, chapter 2](/chapter-2/#fn3)

Citations

When the {% cite %} shortcode is used, and corresponds to the short and full bibliographic information provided in the references.yaml file, an in-page bibliography will be generated and linked. This linking is completed automatically.

When the shortcode is used in the page, the text will appear linked and when clicked upon will take a user to its corresponding bibliography entry on the same page. However, this cannot be done in reverse as the bibliography at the bottom of the page contains no links.

For more information see the Citations & Bibliographies section of this guide.

Improve this page