Работа с файловия мениджър в cPanel

Помощен център

Работа с файловия мениджър в cPanel

Тази статия е продължение от Структура на файловия мениджър в cPanel и сега ще използваме почти всички налични функции за да превърнем един HTML темплейт в персонализирана уеб страница.

Изтегляме архив на темплейта [1] от URL https://github.com/BlackrockDigital/startbootstrap-heroic-features/archive/gh-pages.zip на нашия компютър.

В примера ще използваме домейна icn-demo.net, който е конфигуриран да зарежда сайт от директория със същото име icn-demo.net:

file manager example

Качваме архива на темплейта в директорията на хостинга като кликнем Upload:

file manager example

Кликаме линка в дъното на прозореца за да се върнем във ФМ.

Маркираме архива и кликаме Extract:

file manager example

Диалоговия прозорец ни дава възможност да изберем в коя директория да разархивираме файла - в примера само потвърждаваме действието и кликаме Extract File(s):

file manager example

В следващия прозорец Extraction Results файловия мениджър ни предоставя информация за процеса на разархивиране и съдържанието на архива:

file manager example

Кликаме Close за да затворим прозореца.

Вече нямаме нужда от архива затова маркираме файла и кликаме Delete. В прозореца можем да изберем дали файла да бъде унищожен или запазен в кошчето.

file manager example

Запазваме файла в кошчето - ако се наложи да започнем работата с темплейта отначало само възстановяме архива (Restore), разархивираме и продължаваме.

Кликаме Confirm за да потвърдим изтриването и да затворим прозореца Trash.

Отваряме директорията на архива като кликаме два пъти върху иконата:

file manager example

Отваряме директорията на сайта и в панела File Explorer за да имаме визуална представа за структурата на темплейта.

От всички файлове в директорията само index.html е работен файл от темплейта, всички останали са помощни файлове, които можем да изтрием.

Натискаме и задържаме бутона Ctrl в клавиатурата (Windows PC) и кликаме внимателно върху всички файлове без index.html:

file manager example

Кликаме Delete:

file manager example

Кликаме Confirm.

Сега трябва да преместим съдържанието на директорията startbootstrap-heroic-features-gh-pages в директорията на сайта icn-demo.net за да се зарежда темплейта от URL http://icn-demo.net, а не от URL http://icn-demo.net/startbootstrap-heroic-features-gh-pages/.

Кликаме Select All за да маркираме цялото съдържание на директорията и кликаме Move:

file manager example

В прозореца Move изтриваме името на директорията на темплейта (както е показано в следващото изображение) и кликаме Move File(s):

file manager example

file manager example

Директорията на темплейта е празна и можем да я изтрием като я маркираме и кликнем Delete:

file manager example

Кликаме Confirm за да затворим прозореца Trash.

Приключихме с почисването на архива и преместването на важните файлове в коректната директория:

file manager example

Нека заредим домейна в браузер:

file manager example

Така изглежда нашия темплейт.

Сега с помощта на инструментите във файловия мениджър трябва да превърнем този темплейт в красива, функционална и персонализирана уеб страница.

Промените, които решихме да направим са следните:

  • Ще добавим фоново изображение в hero секцията.
  • Ще променим заглавието на сайта в head секцията, в менюто и в самия сайт, разбира се.
  • Вместо заместителните изображения ще качим подходящи снимки.
  • Ще сменим имената на линковете в менюто и на заглавията на панелите.
  • Ще направим незначителни промени в долната хоризонтална лента (популярна като footer).

Първо трябва да изберем тема за нашата страница - решихме да бъде нещо музикално, свързано със шоу, концерти, инструменти, техника, изпълнители. След кратко проучване се спряхме на заглавието The Show Goes On като лека препратка към хита на Queen (Show must go on).

Изтеглихме подходящи изображения от https://pixabay.com/, защото лиценза на снимките позволява свободното им използване в бизнес продукти като нашата уеб страница:

CC0 Creative Commons
Free for commercial use 
No attribution required

Почти няма случай, в който дадено изображение да няма нужда от корекция за да бъде използвано в уеб страница. Тъй като cPanel не предлага програма за обработка на изображения ние използвахме други инструменти за да променим изображенията.

Създадохме архив с всички изображения, който е готов за качване на хостинга.

Тъй като темплейта използва заместители на изображения (динамично генерирани изображения) вместо реални снимки трябва да създадем директория, в която да качим нашите изображения.

В директорията на сайта кликаме +Folder:

file manager example

Въвеждаме за име на директорията images и кликаме бутона Create New Folder.

Тъй като на практика повтаряме точно стъпките от качването на темплейта сега само ще повторим реда на действията:

  • Влизаме в директорията images и кликаме Upload.
  • Качваме архива от локалния компютър в директорията.
  • Кликаме Extract за да разархивираме файла и да имаме достъп до изображенията.

Тъй като нашата страница се състои от един единствен файл index.html всички останали промени свързани с текста на страницата ще бъдат направени в този файл с помощта на текстовия редактор за код.

Маркирайте файла index.html и кликнете Edit за да отворите файла в редактора:

file manager example

Ето промените в кода на темплейта ако желаете да повторите описаните в статията стъпки:

Промяна на заглавието на страницата (вижда се в бутона на брауъзера и в търсещите машини): <title>The Show Goes On</title>

Промяна на заглавието в хоризонталното меню: <a class="navbar-brand" href="#">The Show Goes On</a>

Промяна на имената на линковете в менюто: <a class="nav-link" href="#">Performers</a>

<header class="jumbotron my-4" style="background: url('images/msc0.jpg') 
no-repeat 0 0; max-width: 1920px; width:100%; height: auto;">
<h1 class="display-3" style="font-weight: bold">The Show Goes On</h1>
<p class="lead" style="width: 60%; font-style: italic">

Промяна текста на бутона: <a href="#" class="btn btn-primary btn-lg">Welcome to the Show!</a>

Промяна на изображенията в панелите и на заглавията: <img class="card-img-top" src="images/msc1.jpg" alt=""> <h4 class="card-title">Equipment</h4>

Промяна текста на бутоните в панелите: <a href="#" class="btn btn-primary">More details</a>

<p class="m-0 text-center text-white"><a href="#">About</a><a href="#" 
style="padding:0 1em">Contact</a> © www.showgoeson.com 2017</p>

Накрая кликаме бутона Save Changes и затваряме редактора като кликаме бутона Close.

Рефрешваме страницата с темплейта и в браузера се зарежда нашата нова страница:

file manager example

Многократно в статиите сме подчертавали колко е важно да пазим собствен актуален архив на сайтовете.

За да създадем пълен архив на нашата страница кликаме Up One Level за да се придвижим от директорията на сайта в директория от по-високо ниво - public_html.

Маркираме директорията на сайта и кликаме Compress:

file manager example

Избираме вида на архива - тъй като HTML сайтовете са много малки като размер няма нужда от компресиране - опциите Zip Archive и Tar Archive са подходящи и няма разлика коя ще изберете.

Кликнете Compress File(s) за да стартирате архивирането.

Отново ще се зареди прозорец Compress Results с информация за архивирането:

file manager example

Кликнете Close за да затворите прозореца.

Архива icn-demo.net.tar е успешно създаден, но добрите практики подсказват към името на архива да добавим и датата на създаване.

Затова маркираме архива (припомняме, че архивния файл се намира в public_html) и кликаме Rename:

file manager example

Маркираме архива и кликаме Download за да изтеглим архива на локалния компютър:

file manager example

Нека създадем robots.txt файл за да информираме търсещите машини, че не желаем да индексират съдържанието на директориите, а само index.html файла.

Влизаме отново в директорията на сайта и кликаме +Files:

file manager example

Селектираме файла и кликаме (... кое беше?) - точно така - Edit и въвеждаме следния код:

User-agent: *
Disallow: /css/
Disallow: /images/
Disallow: /vendor/
Disallow: /bootstrap/
Disallow: /jquery/
Disallow: /bootstrap/css/
Disallow: /bootstrap/js/

Тъй като целта на статията е да покажем в реални условия как се използват иструментите във файл мениджъра, досега в примера не сме използвали три функции - Copy, Restore и Permissions.

Copy

Функцията Copy работи почти като Move с една разлика:

  • Move премества обекта от директория А в директория Б като обекта изчезва от директория А.
  • Copy копира обекта от директория А в директория Б като оригиналния обект се запазва в директория А.

Нека създадем архив на директория images.

Маркираме директорията и кликаме Copy:

file manager example

Новата директория images-copy съдържа същите файлове като директория images:

file manager example

Restore

Възстановяваме изтрит файл като кликнем View Trash, маркираме файл или директория и кликаме Restore:

file manager example

При кликане на бутона Restore File(s) възстановихме оригиналната директория на темплейта, която по-рано изтрихме:

file manager example

Permissions

Правата на директории и файлове са мощен инструмент и не препоръчаме да се променят без ясното разбиране какво точно искате да постигнете с промяната.

Нека променим правата на директорията images от 755 на 644 (каквито са правата на файловете) - маркираме директорията и кликаме Permissions:

file manager example

Заредете отново сайта като рефрешнете браузера с Shift+F5 (Windows):

file manager example

Всички изображения изчезнаха!

Възстановете правата на директорията за да се зарежда страницата коректно.

Заключение

Поздравление за всички, които прочетохте статията до края.

Надяваме се, че информацията ще ви помогне да използвате пълноценно инструментите във файловия мениджър.

[1] Софтуера се предоставя с MIT License.