-
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
- опциональное поле. здесь задается любая ссылка. если поле присутствует, то фрагмент текста становится кликабельным.
Представляет собой элемент с типом table
. Поле data
представляет собой объект, содержащий следующие поля:
-
columns
- массив, содержащий колонки таблицы. каждая колонка представляет собой объект с полямиid
- идентификатор колонки (любая строка, уникальный) иname
- отображаемое имя колонки:
"columns": [
{
"id": "member",
"name": "Участник"
},
{
"id": "action",
"name": "Действие"
},
{
"id": "result",
"name": "Ожидаемый результат"
}
]
-
rows
- массив, содержащий строки таблицы. каждая строка представляет собой объект вида ключ-значение (идентификатор колонки - значение колонки). Т.к. в данном примере есть 3 колонки с идентификаторамиmember
,action
,result
, объекты из массива строк содержат 3 соответствующих поля:
"rows": [
{"member": "Студент", "action": "Формирует личную веб-страницу", "result": "Личная веб-страница на хостинге <имя>.github.io"},
{"member": "Студент", "action": "Описывает выбранный прецедент", "result": "Описание прецедента на хостинге <имя>.github.io"},
{"member": "Студент", "action": "Формирует диаграмму Use Case", "result": "Диаграмма прецедента на хостинге <имя>.github.io"}
]