-
Notifications
You must be signed in to change notification settings - Fork 14
[Гайд]Изменение динамических данных в шаблоне личной страницы на AngularJS
Список разделов хранится в файле 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
представляет собой массив, состоящий из отдельных элементов, содержащих фрагменты текста. При отображении все фрагменты собираются в отдельный параграф. Такая структура предусмотрена для того, чтобы можно было менять стиль отдельных фрагментов текста.
Содержимое отдельного элемента с текстом:
{
"text": "Разработка диаграммы",
"class": "md-title",
"style": {
"font-style": "italic",
"color": "red"
},
"link": "https://plantuml.com"
}
-
text
- непосредственно сам фрагмент текста -
class
- опциональное поле. css класс, который будет использован для применения стиля к фрагменту текста. можно создать свой класс в файлеstyle.css
и использовать его или же использовать существующие классы для текста из библиотеки AngularJS Material:md-subhead
,md-title
,md-headline
,md-display-1
,md-display-2
,md-display-3
. -
style
- опциональное поле. объект со стилем, в котором можно использовать стили css для дополнительной стилизации текста. -
link
- опциональное поле. здесь задается любая ссылка. если поле присутствует, то фрагмент текста становится кликабельным.
Для элемента с типом image
поле data
представляет собой строку, содержащую ссылку на изображение. Изображения рекомендуется загружать в папку img
.
{
"type": "image",
"data": "img/use-case-diagram.png"
}
Для элемента с типом list
поле data
представляет собой массив, содержащий пункты списка. Каждый пункт также в свою очередь представляет собой массив, содержащий фрагменты текста для отображения в этом пункте. Фрагмент текста содержит следующую структуру (аналогичную описанной в разделе "текст"):
{
"text": "Разработка диаграммы",
"class": "md-title",
"style": {
"font-style": "italic",
"color": "red"
},
"link": "https://plantuml.com"
}
-
text
- непосредственно сам фрагмент текста -
class
- опциональное поле. css класс, который будет использован для применения стиля к фрагменту текста. можно создать свой класс в файлеstyle.css
и использовать его или же использовать существующие классы для текста из библиотеки AngularJS Material:md-subhead
,md-title
,md-headline
,md-display-1
,md-display-2
,md-display-3
. -
style
- опциональное поле. объект со стилем, в котором можно использовать стили css для дополнительной стилизации текста. -
link
- опциональное поле. здесь задается любая ссылка. если поле присутствует, то фрагмент текста становится кликабельным.