GHOST CMS - Editor編輯器

Editor

The open-source Ghost editor is robust and extensible.

開源Ghost編輯器是健壯的和可擴展的。

Overview

More than just a formatting toolbar, the rich editing experience within Ghost allows authors to pull in dynamic blocks of content like photos, videos, tweets, embeds, code and markdown.

For these author-specified options to work, themes need to support the HTML markup and CSS classes that are output by the {{content}} helper. The following guide explains how these options interact with the theme layer and how you can ensure your theme is compatible with the latest version of the Ghost editor.

Ghost不僅僅是一個格式化工具欄，它還提供豐富的編輯體驗，允許作者將照片、視頻、推文、嵌入、代碼和標記等動態內容塊拖進來。

要使這些作者指定的選項工作，主題需要支持由{{content}} helper輸出的HTML標記和CSS類。下面的指南將解釋這些選項如何與主題層交互，以及如何確保主題與最新版本的Ghost編輯器兼容。

<figure> and <figcaption>

Images and embeds will be output using the semantic <figure> and <figcaption>elements. For example:

圖像和嵌入將使用語義<figure>和< figcaption>元素輸出。例如:

Output

<figure class="kg-image-card"> <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg"> <figcaption>An example image</figcaption> </figure>

The following CSS classes are used:

• .kg-image-card is used on the <figure> element for all image cards
• .kg-image is used on the <img> element for all image cards
• .kg-embed-card is used on the <figure> element on all embed cards

This is only relevant when authors use the built-in image and embed cards, and themes must also support images and embeds that are not wrapped in <figure> elements to maintain compatibility with the Markdown and HTML cards.

只有當作者使用內置的圖像和嵌入卡時，這才是相關的，並且主題還必須支持圖像和嵌入，而不是包裝在<figure>元素中，以保持與Markdown和HTML卡的兼容性。

Image size options

The editor allows three size options for images: normal, wide and full width. These size options are achieved by adding kg-width-wide and kg-width-full classes to the <figure> elements in the HTML output. Here's an example for wide images:

Output

<figure class="kg-image-card kg-width-wide"> <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg"> </figure>

Normal width image cards do not have any extra CSS classes.

Image size implementations

The specific implementation required for making images wider than their container width will depend on your theme's existing styles. The default Ghost theme Casper uses flexbox to implement layout using the following HTML and CSS:

Output

<div class="content"> <article> <h1>Image size implementation</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.</p> <figure class="kg-image-card kg-width-full"> <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-2.jpg"> <figcaption>A full-width image</figcaption> </figure> <p>Fusce interdum velit tristique, scelerisque libero et, venenatis nisi. Maecenas euismod luctus neque nec finibus.</p> <figure class="kg-image-card kg-width-wide"> <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg"> <figcaption>A wide image</figcaption> </figure> <p>Suspendisse sed lacus efficitur, euismod nisi a, sollicitudin orci.</p> </article> </div> <footer>An example post</footer>

And the CSS:

style.css

.content { width: 70%; margin: 0 auto; } article { display: flex; flex-direction: column; align-items: center; } article img { display: block; max-width: 100%; } .kg-width-wide img { max-width: 85vw; } .kg-width-full img { max-width: 100vw; } article figure { margin: 0; } article figcaption { text-align: center; } body { margin: 0; } header, footer { padding: 15px 25px; background-color: #000; color: #fff; } h1 { width: 100%; }

Negative margin and transforms example

Traditional CSS layout doesn't support many elegant methods for breaking elements out of their container. The following example uses negative margins and transforms to achieve breakout. Themes that are based on Casper use similar techniques.

style.css

.content { width: 70%; margin: 0 auto; } article img { display: block; max-width: 100%; } .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin: auto calc(50% - 50vw); transform: translateX(calc(50vw - 50%)); } .kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } article figure { margin: 0; } article figcaption { text-align: center; } body { margin: 0; } header, footer { padding: 15px 25px; background-color: #000; color: #fff; }

Gallery card

The image gallery card requires some CSS and JS in your theme to function correctly. Themes will be validated to ensure they have styles for the gallery markup:

• .kg-gallery-container
• .kg-gallery-row
• .kg-gallery-image

Example gallery HTML:

Output

<figure class="kg-card kg-gallery-card kg-width-wide"> <div class="kg-gallery-container"> <div class="kg-gallery-row"> <div class="kg-gallery-image"> <img src="/content/images/1.jpg" width="6720" height="4480"> </div> <div class="kg-gallery-image"> <img src="/content/images/2.jpg" width="4946" height="3220"> </div> <div class="kg-gallery-image"> <img src="/content/images/3.jpg" width="5560" height="3492"> </div> </div> <div class="kg-gallery-row"> <div class="kg-gallery-image"> <img src="/content/images/4.jpg" width="3654" height="5473"> </div> <div class="kg-gallery-image"> <img src="/content/images/5.jpg" width="4160" height="6240"> </div> <div class="kg-gallery-image"> <img src="/content/images/6.jpg" width="2645" height="3967"> </div> </div> <div class="kg-gallery-row"> <div class="kg-gallery-image"> <img src="/content/images/7.jpg" width="3840" height="5760"> </div> <div class="kg-gallery-image"> <img src="/content/images/8.jpg" width="3456" height="5184"> </div> </div> </div> </figure>

For a better view of how to support the gallery card in your theme, use the Casper implementation, which is a generic solution that works for most themes.

Bookmark card

The bookmark card requires some minor CSS in your theme to ensure the metadata is easier to digest:

style.css

.kg-bookmark-card { width: 100%; position: relative; } .kg-bookmark-container { display: flex; flex-wrap: wrap; flex-direction: row-reverse; color: currentColor; font-family: inherit; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.1); } .kg-bookmark-container:hover { text-decoration: none; } .kg-bookmark-content { flex-basis: 0; flex-grow: 999; padding: 20px; order: 1; } .kg-bookmark-title { font-weight: 600; } .kg-bookmark-metadata, .kg-bookmark-description { margin-top: .5em; } .kg-bookmark-metadata { align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kg-bookmark-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .kg-bookmark-icon { display: inline-block; width: 1em; height: 1em; vertical-align: text-bottom; margin-right: .5em; margin-bottom: .05em; } .kg-bookmark-thumbnail { display: flex; flex-basis: 24rem; flex-grow: 1; } .kg-bookmark-thumbnail img { max-width: 100%; height: auto; vertical-align: bottom; object-fit: cover; } .kg-bookmark-author { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .kg-bookmark-publisher::before { content: "•"; margin: 0 .5em; }

Here's an example of the HTML structure that's created by the editor:

Output

<figure class="kg-card kg-bookmark-card"> <a href="https://ghost.org/" class="kg-bookmark-container"> <div class="kg-bookmark-content"> <div class="kg-bookmark-title">The bookmark card</div> <div class="kg-bookmark-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.</div> <div class="kg-bookmark-metadata"> <img src="/content/images/author-icon.jpg" class="kg-bookmark-icon"> <span class="kg-bookmark-author">David Darnes</span> <span class="kg-bookmark-publisher">Ghost</span> </div> </div> <div class="kg-bookmark-thumbnail"> <img src="/content/images/article-image.jpg"> </div> </a> </figure>

Embed card

If a video is used with the theme then some CSS will be needed in order to maintain a good aspect ratio.

Example HTML:

<figure class="kg-card kg-embed-card"> <iframe ...></iframe> <!-- <iframe> represents card content --> </figure>

The CSS:

.fluid-width-video-wrapper { position: relative; overflow: hidden; padding-top: 56.25%; } .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Summary

You have discovered how to ensure your theme is compatible with the full range of extensible features in the Ghost editor. For further support with themes, head to the forum.