Skip to content

[Гайд]Изменение динамических данных в шаблоне личной страницы на AngularJS

Vasily M edited this page Feb 16, 2020 · 6 revisions

Изменение списка разделов на главной странице

Список разделов хранится в файле topics/topics.json. Данный файл представляет из себя json-массив, элементы которого описывают отдельные разделы.

[
    {
        "id": 1,
        "title": "UML Use Case",
        "description": "Диаграмма прецедента",
        "preview": "img/use-case-diagram.png"
    },
    {
        "id": 2,
        "title": "UML Class",
        "description": "Диаграмма классов",
        "preview": "img/class-diagram.png"
    }
]

Как можно заметить, каждый элемент состоит из следующих полей:

  • id - идентификатор раздела
  • title - заголовок
  • description - краткое описание
  • preview - ссылка на картинку-превью

Чтобы добавить новый раздел, достаточно добавить новый элемент в этот массив со всеми необходимыми полями:

[
    {
        "id": 1,
        "title": "UML Use Case",
        "description": "Диаграмма прецедента",
        "preview": "img/use-case-diagram.png"
    },
    {
        "id": 2,
        "title": "UML Class",
        "description": "Диаграмма классов",
        "preview": "img/class-diagram.png"
    },
    {
        "id": 3,
        "title": "Новый раздел",
        "description": "Описание нового раздела",
        "preview": "img/new-diagram.png"
    }
]

В качестве preview можно указывать ссылку на картинку, находящуюся в папке img проекта или ссылку на любую картинку в сети, например https://img.youtube.com/vi/dQw4w9WgXcQ/1.jpg

Изменение содержимого раздела

Содержимое каждого раздела хранится в файле topics/id.json, где id - идентификатор раздела, используемый в topics/topics.json Например, содержимое раздела с id: 1 хранится в файле 1.json.

Внутри файла с содержимым находится объект, содержащий поля title и items.

{
    "title": "UML Class",
    "items": [
        
    ]
}

Массив items содержит элементы, из которых формируется тело раздела. Каждый элемент содержит следующий поля:

  • type - тип элемента
  • data - содержимое, структура различается в зависимости от типа
{
    "type": "text",
    "data": []
}

В настоящий момент реализовано 3 вида элементов:

  • текст - "type": "text"
  • картинка - "type": "image"
  • список - "type": "list"

Текст

Для элемента с типом text поле data представляет собой массив, состоящий из отдельных элементов, содержащих фрагменты текста. При отображении все фрагменты собираются в отдельный параграф. Такая структура предусмотрена для того, чтобы можно было менять стиль отдельных фрагментов текста.

Clone this wiki locally