Способы составления списка всех значений краткого текстового списка при содержательном использовании GatsbyJs - PullRequest
Новая
       44

Способы составления списка всех значений краткого текстового списка при содержательном использовании GatsbyJs

0 голосов
/ 19 июня 2020

category list

У меня есть блог с 2 категориями, использующими Contentful Short Text List, но когда я показываю их на своем сайте с помощью Gatsby, кажется, что 2 категории складываются рядом друг с другом. как указано выше. Они должны быть Dropshipping Tips Product Selection вместо Dropshipping Tipsproduct Selection.

Вот поле содержимого contentful category field

Есть способ исправить это? Я использую Gatsby в качестве SSG.

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

Contentful DevRel здесь. ?

К сожалению, я не могу дать здесь подробный совет. Contentful предоставляет вам способы определения и структурирования вашего контента. Тогда вам решать, как его использовать и создавать с его помощью вещи / сайты / продукты.

Gatsby извлекает чистые данные в процессе сборки и создает веб-сайт. В этом случае шаблон Gatsby отображает список тегов на странице. Вероятно, в этом и заключается проблема. Сначала я бы проверил две вещи:

  • - это шаблон, отображающий правильный список тегов (в HTML ul > li)
  • есть ли исправление CSS (добавить некоторые margin/padding к пунктам списка)

Надеюсь, это поможет, удачи!

1 голос
/ 19 июня 2020

Это больше похоже на html, css, проблему реакции, чем на что-либо, связанное с contentful или gatsby.

Вот как вы могли бы создать компонент тегов. 

// App.js

import React from "react";
import Tags from "./Tags";
import "./styles.css";

const tagsArray = [
  { title: "dropshipping tips" },
  { title: "product selection" },
  { title: "other tag 1" },
  { title: "other tag 2" }
];

export default function App() {
  return (
    <>
      <h1>My article</h1>
      <Tags data={tagsArray} />
    </>
  );
}

// Tags.js

import React from "react";

export default function Tags({ data }) {
  return (
    <ul className="tags">
      {data.map((tag, index) => (
        <li key={index} className="tag">
          {titleCase(tag.title)}
        </li>
      ))}
    </ul>
  );
}

function titleCase(str) {
  return str
    .split(" ")
    .map(
      ([firstChar, ...rest]) =>
        firstChar.toUpperCase() + rest.join("").toLowerCase()
    )
    .join(" ");
}

/*  styles.css */

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.tag {
  margin: 0 0.5em 0.5em 0;
  padding: 0.7em;
  background: LemonChiffon;
  border-radius: 0.2em;
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3);
}

titleCase helper, взятый из этот ответ

...