Ручной «Хомяк» – наглядное пособие по Hamster CMS. Глава 3

TomoTomoTan · Чт мар 27, 2025 6:44 pm

Доступ к сайту через FTP, редактирование шаблона

Начиная с этой главы, предполагается, что читатель уже немного освоился с html и css. Для кого-то главы будут слишком простые, для кого-то слишком непонятные. Надеюсь, мне удастся найти баланс, чтобы первые не заскучали, а вторые не запутались.
Если не знаете, с чего начать изучение html и css, то в качестве учебника советую вот эти сайты:

Сама ими пользовалась, а в htmlbook заглядываю до сих пор, если что-то забываю.

Вот смотрю я на свой сайт и думаю – чего-то не хватает. Хочу не чёрный фон в шаблоне, а лиловый. И чтоб буквы были чёрные, а не белые, иначе сливаться будут. Но где же мне найти этот шаблон? Как он выглядит, как его изменить?

Для этого мне понадобится зайти на сайт через FTP. Если честно, именно так я чаще всего сайт и обновляю, просто потому что привыкла. Это можно сделать сразу несколькими способами:

WebFTP, то есть какой-нибудь веб-клиент для работы с FTP;
FileZilla или какой либо ещё подобный ему клиент. Отличие от WebFTP в том, что клиент устанавливается на компьютер;
Средства самой Windows. Правда, нужный компонент, скорее всего, отключён. Включается он через «Свойства: Интернет».

: image19.png (29.82 КБ) 30 просмотров

Отмечу, что для всех вариантов необходимо указать сетевой адрес, имя пользователя и пароль. В некоторых случаях (например, FileZilla) также потребуется указать и порт подключения.

Сетевой адрес: ftp://w10.host
Порт: 21
Имя и пароль (те же, что и при регистрации)

Поскольку сайт я разрабатываю на виртуальной машине под Windows XP, то последний вариант для меня наиболее простой, потому предпочитаю именно его. Впрочем, если не хочется разбираться с Windows, скачивать FileZilla или искать WebFTP-клиент, то на сайте хостинга есть собственный WebFTP, который помимо доступа к файлам позволяет их редактировать. Ссылка на WebFTP находится вверху страницы хостинга Web 1.0.

: изображение_2025-03-27_212324811.png (192.65 КБ) 30 просмотров

Если перейти по ссылке, то перед нами откроется такое окно.

: image21.png (36.99 КБ) 30 просмотров

Не обращаем внимания и нажимаем Save cookie choice. После этого видим окно ввода логина и пароля.

: image22.png (58.49 КБ) 30 просмотров

В поля Username и Password вводим логин и пароль из почты, нажимаем кнопку Login и попадаем на наш сайт. Теперь мы можем скачивать, загружать, а также редактировать файлы прямо в окне браузера.

Изначально на сайте нет почти ничего. До того, как мы впервые зайдём в Конструктор сайтов, там вообще лежит только index.html, а все основные файлы и папки копируются только после входа. К слову, они копируются каждый раз, когда мы заходим в Конструктор. Так сделано для того, чтобы пользователь при желании мог быстро откатить настройки, или на тот случай, если он случайно удалит какой-либо файл. Именно удалит, а не изменит.

Итак, мы видим следующие файлы и папки:

: изображение_2025-03-27_212859196.png (2.28 КБ) 30 просмотров

Нас интересует папка templates, так как именно в ней находятся все шаблоны. Чтобы открыть её, нажимаем на её название. Если вдруг мы ошиблись и нам нужно вернуться назад, то нажимаем Up…

: image23.png (98.57 КБ) 30 просмотров

Для каждого шаблона создана соответствующая подпапка с его названием, внутри которой находится файл index.html (собственно, сама страница-шаблон) и различные файлы и папки, которые этот шаблон использует. Файл index.html обязательно должен присутствовать в папке и иметь такое название, иначе Хомяк его попросту не признает шаблоном. Сейчас хочу я изменить шаблон win95. Перемещаемся в эту папку.

: изображение_2025-03-27_213305672.png (112.88 КБ) 30 просмотров

Поскольку мы работаем через WebFTP, то скачивать файл “index.html” не обязательно, мы можем отредактировать код прямо в браузере. Для этого нажимаем на кнопку Edit рядом с нужным нам файлом, после этого перед нами откроется окно редактора. При этом, в коде я меняю цвет всех надписей на чёрный, а фон – на бледно-лиловый.

: изображение_2025-03-27_213925054.png (187.35 КБ) 30 просмотров

Чтоб было удобнее, можно поменять вид и посмотреть, что примерно получится. Имеющийся визуальный, конечно, не Frontpage 2003 (он больше похож на Frontpage Express), но какое-никакое визуальное представление даёт. Вид меняется (хотя многие, наверное, уже догадались) с помощью меню с выпадающим списком.

: image26.png (17.85 КБ) 30 просмотров

В нём всего четыре опции – две для текстового представления, две для визуального. Те, что для визуального, имеют в скобках надпись WYSIWYG – Что Видишь, То И Получаешь. Опция с припиской code editor используется для того, чтобы представить текст в виде строчек кода. Это может быть особенно полезно, если мы редактируем сценарий или html-файл, поскольку в нём будет проще ориентироваться именно с помощью такого представления.

Выбираем опцию CKEditor и видим, как примерно будет выглядеть наш шаблон на сайте.

: image27.png (51.61 КБ) 30 просмотров

К сожалению, редактор не отображает цвет фона.

Чтобы сохранить изменения, нажимаем на дискету. Если вдруг кто-то не знает, что это такое, то это картинка между стрелочкой и выпадающим меню. Чтобы выйти из редактора и вернуться назад, нажимаем на стрелочку.

: изображение_2025-03-27_213651284.png (82.91 КБ) 30 просмотров

Теперь, если я открою главную страницу сайта, то увижу такую картину:

: image28.png (81.16 КБ) 30 просмотров

Примечание:
В этой главе я немного рассказала о WebFTP и показала, как в него заходить. Многого сказать я о нём не могу (тем более, что тема – не WebFTP, а Хомяк), поэтому оставлю ссылку на инструкция по его использованию:

https://web1.0hosting.net/net2ftp/modul ... -user.html

Страницу справки можно открыть, если нажать на круглую кнопку со знаком вопроса вверху страницы. Справка доступна только на английском языке, но никто не мешает включить в браузере переводчик.

: изображение_2025-03-27_214134682.png (33.38 КБ) 30 просмотров

При работе с редактором стоит учесть, что он читает и создаёт файлы только формата Юникод. Вследствие этого, если вы захотите отредактировать файл, имеющий кодировку отличную от Юникода, то при открытии файла окно редактора окажется пустым. Кроме того, при открытии файла может выпасть следующая ошибка:

: image29.png (75.56 КБ) 30 просмотров

Данная ошибка, как я полагаю, является типичной. Чтобы её убрать, просто попробуйте ввести логин и пароль ещё раз, либо вернуться на предыдущую страницу и попытаться открыть файл снова.