Article Layouts

Introduce how to make your article layout

By using a custom Article Layout, developers are able to change the layout of articles and apply their preferred component styles. After deploying, writer will be able to preview their articles in the custom layout.

ย 

Creating a article layout


You can create an article layout by putting a file vue SFC <layout name>.vue under /templates/article-layouts directory

๐Ÿ‘‰
Your layout name must start with an alphabet and only contains A-Za-z0-9 and -_

Below is the basic structure for an article layout, to see a more complex example, please reference our starter theme

<script setup>
import { useArticle } from '@storipress/karbon/article/utils'

// useArticle can be used to get the content of an editor's article, such as the title, blurb and article content. 
const article = useArticle()
</script>

<template>
  <div>
		<p>{{ article.desk.name }}</p>
		

Please reference link and Components for the details usage of each API

๐Ÿ‘‰
Itโ€™s important to use components with Article prefix in article layout to ensure they will be editable in the live preview on the editor. Donโ€™t worry, itโ€™s easy to apply style on these components by just attach style or class on it.
ย 

Recommended Articles

To implement article recommendation sidebars, you can use the useRecommendArticle composable.

<script lang="ts" setup>
  const article = useArticle();
  const recommendArticles = useRecommendArticle(article, { count: 10 });
</script>

<template>
  <ul>
    <li
      v-for="recommendArticle of recommendArticles"
      :key="recommendArticle.id"
    >
      <NuxtLink :to="recommendArticle.url">
        {{ recommendArticle.title }}</NuxtLink
      >
    </li>
  </ul>
</template>
ย 

Using article layout in Editor

๐Ÿ’ก
Before using them in you editor, please read Deploying to Storipress to understand how to upload your layouts to Storipress

ย 

Go to Editor

  1. Edit title and blurb
    1. Notion image
  1. Edit body
    1. Notion image
  1. Click preview
    1. Notion image
  1. Your will see added layout and changed value
    1. Notion image
ย 

Last updated on February 3, 2023