Начало > Помощен център > Споделен Хостинг Linux > Контролен Панел > Работа с файловия мениджър в cPanel

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

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

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

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

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

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

Директорията на сайта във файловия мениджър

Качване на файлове

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

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

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

Разархивиране на архив

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

Разархивиране на архива с темплейта

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

Диалогов прозорец Extract Files

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

Резултат от разархивирането в прозореца Extraction Results

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

Изтриване на файлове

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

Изтриване на архивния файл

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

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

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

Изглед на директорията на архива

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

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

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

Маркиране на помощните файлове

Кликаме Delete:

Потвърждаваме изтриването на помощните файлове

Кликаме 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:

Маркиране на директориите и файловете в директорията на темплейта

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

Редактиране на пътя до директорията на сайта

Преместване на директориите и файловете в директорията на сайта

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

Изтриване на празната директория на темплейта

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

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

Структура на директориите и файловете на сайта

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

Зареждане на сайта в браузър

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

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

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

  • Ще добавим фоново изображение в 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:

Създаване на нова директория

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

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

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

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

Редактиране на файл

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

Отваряне на файла в текстов редактор

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

Промяна на заглавието на страницата (вижда се в бутона на брауъзера и в търсещите машини):

<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.

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

Изглед на сайта в браузър

Архивиране на директория

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

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

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

Създаване архив на сайта

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

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

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

Резултат от архивирането в прозореца Compression Results

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

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

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

Преименуване на архива

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

Изтегляне на архива на локалния компютър

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

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

Създаване на нов файл robots.txt

Избираме файла, кликаме Edit и въвеждаме следния код:

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

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

Копиране на файлове

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

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

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

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

Копиране на директория images

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

Копираната директория съдържа същите файлове

Възстановяване на изтрити файлове от Trash.

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

Възстановяване на директория

Ако файловете са изтрити от друг интерфейс, можете да ги възстановите като използвате възстановяване на файлове през R1Soft

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

Възстановената директория на темплейта

Промяна на права на файлове

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

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

Промяна правата на директория images

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

Сайта се зарежда без изображения

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

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

Заключение

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

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

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