Как редактировать HTML и CSS исходного кода Weebly?

Weebly предлагает элемент «Вставить код» для добавления пользовательского кода HTML, CSS и JavaScript в содержимое вашей страницы. Но иногда необходимо изменить исходный HTML / CSS вашего сайта. Weebly позволяет как бесплатным, так и премиальным пользователям редактировать исходный код HTML / CSS сайта, чтобы стимулировать добавление дополнительных настроек и сделать сайт красивым с необходимыми функциями. Вот пошаговое руководство о том, как редактировать исходный HTML или CSS на бесплатном сайте Weebly и о том, что вы можете делать с помощью редактора кода Weebly.

Обратите внимание: ниже приведен тот же процесс, если вы используете Weebly с SiteGround, Bluehost или любыми другими платными хостинговыми платформами.

Обзор параметров редактора кода Weebly:

  1. Верхняя панель инструментов с кнопками для поиска, включения / отключения автоматического предварительного просмотра и т. Д.
  2. Вы можете изменить название текущей темы, дважды щелкнув по ней.
  3. Тип заголовка – макеты страниц по умолчанию Weebly, содержащие коды HTML для отдельных макетов.
  4. Раздел Styles содержит определение внешнего стиля всех элементов в формате .less.
  5. Раздел Partials, содержащий файлы, относящиеся к блогам, электронной коммерции и т. Д.
  6. Раздел Assets содержит все файлы темы, такие как скрипты и изображения.
  7. Экспорт темы – загрузите тему Weebly на локальный компьютер.
  8. Просмотрите код для текущего выбранного макета или файла.
  9. Предварительный просмотр сайта, включите автоматический предварительный просмотр на верхней панели инструментов, чтобы мгновенно просмотреть изменения кода.
  10. Всплывающее окно для проверки вашего сайта во всплывающем окне.
  11. Сохраните или отмените внесенные изменения.

Как редактировать исходный код Weebly?

Войдите в свою учетную запись Weebly и отредактируйте сайт, на котором хотите изменить исходный код. Вариант для «Редактировать HTML / CSS“Доступен в разделе”Тема»В редакторе Weebly, как показано ниже:

Редактирование исходного HTML и CSS в Weebly

Если вы не видите кнопку, уменьшите масштаб, чтобы уменьшить размер экрана и увидеть его четко. Как только вы нажмете на кнопку, вы перейдете в редактор кода Weebly.

Что я могу делать с редактором кода?

Редактор кода Weebly имеет следующие функции:

Редактор кода Weebly
Редактор кода Weebly

Ниже приведены некоторые важные вещи, которые вы можете делать в редакторе кода Weebly.

1. Верхняя панель инструментов

Вы можете использовать инструменты на верхней панели инструментов для инвертирования цвета, поиска, проверки документации и автоматического предварительного просмотра изменений. По умолчанию любые изменения, внесенные в код, будут немедленно отображаться под окном предварительного просмотра. Вы также можете просмотреть свои изменения во всплывающем окне и проверить справочную документацию редактора кода Weebly по редактированию темы. Рекомендуем отключить «Автоматический просмотр», Чтобы избежать загрузки предварительного просмотра при каждом внесении изменений. При отключении «Автоматический просмотр«, Будет новый»Обновить»Появится кнопка. Вы можете использовать это, чтобы обновить окно предварительного просмотра, чтобы увидеть эффект от изменений вашего кода.

2. Название темы

Вы можете изменить название своей темы, дважды щелкнув по ней. Измененная тема будет отображаться в разделе «Тема> Изменить тему> Галерея тем> Пользовательский». Каждый раз, когда вы меняете тему, Weebly сохраняет ее новую копию с другим именем, например дочерней темой. Любые изменения дочерней темы не повлияют на исходную тему, и вы можете в любой момент вернуться к исходной теме Weebly.

Weebly использует тему для всей вашей учетной записи, что означает, что несколько сайтов под одной учетной записью могут использовать одну измененную тему. Изменение CSS или макетов страниц повлияет на все сайты, использующие эту измененную тему.

Рабочая модель Weebly Theme
Рабочая модель Weebly Theme

Заметка: Если вы хотите изменить одну и ту же тему с разным дизайном для двух разных сайтов, сохраните ее с двумя разными именами и используйте на соответствующих сайтах.

3. Изменить / добавить макет страницы

Под “Тип заголовка»Вы можете найти исходный HTML-код для всех макетов страниц по умолчанию, предлагаемых Weebly. Вы также можете добавить или загрузить свой собственный макет страницы, нажав «+Кнопка. Узнайте больше о макетах страниц Weebly. С появлением Weebly 4 все макеты страниц объединены в три типа: заголовок, без заголовка и заставка.

Типы заголовков Weebly
Типы заголовков Weebly

4. Стили

Все внешние таблицы стилей доступны в «Стили» раздел. В настоящее время Weebly использует файлы LESS для различных разделов сайта, таких как «_blog.less», «_nav.less» и т. Д. Основной внешней таблицей стилей является «main.less», в которую все остальные стили импортируются с использованием правила «@import». .

Заметка: Раньше имя основной таблицы стилей было «main_style.css», теперь доступно как «main.less». Позже он может измениться с другими расширениями, однако вы должны найти имена файлов, такие как «main» или «style». Насколько мы проверили, все адаптивные темы Weebly используют таблицы стилей .less вместо файлов .css.

4.1 Редактирование исходного CSS и добавление пользовательских внешних таблиц стилей

Weebly имеет одну таблицу стилей для каждой темы, которую вы можете увидеть в редакторе кода под названием «main.less” под “Стили” раздел. Щелкните файл CSS, чтобы увидеть код в редакторе рядом, и вы можете добавить сюда свои собственные коды CSS. Любой код, добавленный в основную таблицу стилей, будет действовать на всем сайте, поскольку «main.less»Таблица стилей будет автоматически связана со всеми типами заголовков по умолчанию.

Вы также можете загрузить дополнительные файлы CSS, например style.css, и связать их с нужной страницей в разделе «Страницы> Выберите страницу> Настройки SEO> Код заголовка», Используя следующий код:

<link rel="stylesheet" type="text/css" href="https://yoursite.com/files/theme/style.css">

Внешние листы CSS, ссылки на которые находятся в разделе «Настройки> SEO> Код заголовка»Будет загружен на всех страницах, которые вы можете увидеть, щелкнув правой кнопкой мыши и выбрав«Просмотреть исходный код страницы»В браузере.

5. Частичные

Как указано в названии «Частичные»Содержит часть файлов шаблонов (с расширением .tpl), которые будут использоваться в сочетании с другими файлами. Файлы шаблонов для страницы блога, электронной торговли, навигации, членства и поля поиска доступны в разделе «Частичные»Раздел для модификации.

Раздел Partials в редакторе кода Weebly
Раздел Partials в редакторе кода Weebly

6. Активы

Значок «Активы»Содержит все исходные файлы, такие как изображения и скрипты, используемые в вашей теме. Вы можете редактировать и загружать файлы в разделе «Активы»И используйте его в редакторе сайта с помощью«Код для вставкиЭлемент или под элементом «Код заголовка” и “Код нижнего колонтитула»Разделы. Файлы можно загрузить, нажав «+», А затем выберите«Загрузить файлы)…»Вариант.

6.1 Загрузка файлов сценария

Вы можете загрузить файл JavaScript (.js) в разделе «Активы»И свяжите файл с определенной страницей либо непосредственно внутри«Код для вставкиЭлемент или под элементом «Страницы> Выберите страницу> Дополнительно> Код нижнего колонтитула”Используя приведенный ниже код:

<script src="https://yoursite.com/files/theme/JavaScript.js/"></script>
6.2 Загрузка изображений

Подобно файлам .css и .js, вы также можете загружать файлы изображений с такими расширениями, как .jpg, .png, .bmp, .gif и т. Д. Weebly хранит файлы изображений, загруженные в редактор кода, в разделе «https://yoursite.com/files/theme/», Но файлы изображений, загруженные в редактор сайта с использованием элементов изображения, слайд-шоу или галереи, хранятся в другом каталоге« загрузки ». Преимущество загрузки изображений в редактор кода заключается в том, что они могут быть связаны с URL-адресом в любом месте ваших страниц.

Заметка:

  1. Все файлы, загруженные в редактор кода, могут быть связаны с относительным URL-адресом на вашем сайте. Например, если вы загрузили изображение «myimage.jpg«, Его можно связать с помощью«/files/theme/myimage.jpg“Внутри”Код для вставки“Элемент и под”Код заголовка” или же “Код нижнего колонтитула»Разделы.
  2. Вы также можете щелкнуть правой кнопкой мыши и получить прямой URL с помощью «weebly.com/…/»И разместите ссылку в любом месте вашего сайта.
  3. Хотя могут быть загружены все типы файлов, некоторые файлы, такие как .php, могут не работать должным образом.

7. Экспорт темы

Это возможность экспортировать всю тему Weebly на локальный ПК или Mac. После внесения любых изменений рекомендуется сохранить и экспортировать вашу тему, чтобы вы могли восстановить ее, когда она потребуется. Узнайте, как импортировать и экспортировать тему Weebly.

8. Просмотр и редактирование кода

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

9. Область предварительного просмотра

Изменения, внесенные в код, можно просмотреть в области предварительного просмотра. Предварительный просмотр выполняется автоматически, когда значок «Автоматический просмотр»На верхней панели инструментов отмечен флажок, в противном случае вы можете нажать«Обновить», Чтобы просмотреть изменения.

10. Всплывающий вид

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

11. Отменить / сохранить изменения

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

Заключение

Weebly – одна из платформ, позволяющих бесплатно редактировать исходный код. Хотя вы можете добавлять CSS, загружать JavaScript и изображения, мы рекомендуем вам использовать разделы кода верхнего и нижнего колонтитула. Это поможет вам вставить код без изменения темы.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *