# Структура каталогов
VuePress следует принципу «Соглашение лучше, чем конфигурация», рекомендуемая структура сайта следующая:
...
├── docs
│ ├── .vuepress (необязательно)
│ │ ├── components (необязательно)
│ │ ├── theme (необязательно)
│ │ │ └── Layout.vue
│ │ ├── public (необязательно)
│ │ ├── styles (необязательно)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (необязательно, зона опасности)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (необязательно)
│ │ └── enhanceApp.js (необязательно)
│ │
│ ├── posts (необязательно, папка для страниц сайта)
│ │ ...
│ │
│ ├── README.md
│ └── about.md
│
└── package.json
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ПРИМЕЧАНИЕ
Обратите внимание на заглавную букву имени каталога.
docs/.vuepress: используется для хранения глобальной конфигурации, компонентов, статических ресурсов и т. д.
docs/.vuepress/components: компоненты Vue в этом каталоге будут автоматически зарегистрированы как глобальные компоненты.
docs/.vuepress/theme: используется для хранения локальной темы.
docs/.vuepress/styles: Хранит файлы, связанные со стилем.
docs/.vuepress/styles/index.styl: автоматически применяемые глобальные файлы стилей, созданные в конце файла CSS, имеют более высокий приоритет, чем стиль по умолчанию.
docs/.vuepress/styles/palette.styl: палитра используется для переопределения цветовых констант по умолчанию и для установки цветовых констант Stylus.
docs/.vuepress/public: каталог статических ресурсов.
docs/.vuepress/templates: хранить файлы шаблонов HTML.
docs/.vuepress/templates/dev.html: файл шаблона HTML для среды разработки.
docs/.vuepress/templates/ssr.html: файл шаблона HTML на основе Vue SSR во время сборки.
docs/.vuepress/config.js: входной файл конфигурации, также может быть yml или toml.
docs/.vuepress/extensionApp.js: повышение уровня приложения.
ПРИМЕЧАНИЕ
При настройке templates/ssr.html или templates/dev.html лучше всего редактировать его на основе файлов шаблонов по умолчанию, в противном случае это может вызвать сбой сборки.
# Структура папок для отдельных страниц
Если статьи, размещаемые на сайте, содержат в себе дополнительный контент, то размещать его в папке docs/.vuepress/public может оказаться неудобным по некоторым причинам:
- много статей неудобно хранить в корневой папке
docs. - весь статический контент (например рисунки) будут храниться ещё большей кучей в папке
public. - замена, удаление или редактирование страниц приведет к усложнению дальнейшего сопровождения.
- сложность генерации pdf контента или использовании исходников страниц в других проектах
Для решения поставленных буден хранение страниц сайта с прилагающимся контентом в отдельных папках:
posts (папка в которой содержаться все статьи)
├── post_example1 (папка с названием страницы)
│ ├── images (папка с картинками)
│ │ ├── image_1.png
│ │ ├── image_2.png
│ │ └── image_3.png
│ └── readme.md (документ с основным текстом)
│
├── post_example2 (папка с названием страницы)
│ ├── images (папка с картинками)
│ │ ├── image_4.png
│ │ └── image_5.png
│ └── readme.md (документ с основным текстом)
...
2
3
4
5
6
7
8
9
10
11
12
13
14
Ссылки на картинки в документе должны быть подобными: , тогда при сборке проекта, когда все картинки переносятся в папку assets/img/ пути к картинкам автоматически переписываются и будут корректно отображаться на страницах.
В дальнейшем при поддержке сайта: для добавления, редактирования или удаления определенной страницы достаточно обратиться с интересующей папке и внести необходимые изменения.