Каждая запись в вашем блоге Weebly также будет отображаться на странице блога. Вы можете выбрать количество последних сообщений для отображения на странице блога от 1 до 25 в разделе «». Предположим, что у вас есть последние 10 сообщений для отображения на странице блога, и каждое сообщение содержит более 600 слов более длинного содержания. В таком случае на странице блога будут отображаться последние 10 сообщений, каждое из которых занимает много места. Это приведет к плохому взаимодействию с пользователем, поскольку у пользователей почти не будет возможности просматривать содержимое более старых сообщений.
Что такое Подробнее Перерыв?
Поскольку страница блога играет жизненно важную роль, являясь частью навигации, хорошей идеей будет сделать страницу привлекательной, а элемент « » поможет в этом. Вы можете использовать элемент «», если не хотите отображать весь длинный контент на странице блога. Это ограничит содержание и будет отображаться до перерыва на странице вашего блога. Пользователи могут щелкнуть ссылку или кнопку «Подробнее», чтобы прочитать сообщение в блоге полностью. Это отличный способ избавиться от беспорядка на странице вашего блога и мягко подтолкнуть пользователей к сообщению в блоге.
Как добавить Read More Break в Weebly?
Редактор Weebly показывает элементы перетаскивания на боковой панели, которые вы можете вставить в любое место на своем сайте. Однако, когда вы редактируете сообщение блога в редакторе блогов Weebly, элементы боковой панели автоматически меняются. Вы найдете дополнительные элементы блога, которые можно использовать только на странице блога Weebly или в публикации. Вы можете увидеть « », отображаемый в категории « » элементов. После того, как вы перетащите элемент, появится текст-заполнитель с упоминанием «», как показано на рисунке ниже.
Например, добавьте «» после первого абзаца всех ваших сообщений в блоге. Это помогает отображать только первый абзац сообщений на странице блога с возможностью для пользователей щелкнуть ссылку или кнопку «», чтобы прочитать дальнейшее содержание каждого сообщения. Ниже показано, как кнопка «Подробнее» может выглядеть на странице вашего блога Weebly.
Это делает страницу блога более привлекательной в пределах прокручиваемой длины и показывает только введение каждого сообщения. При нажатии на кнопку или ссылку «Читать дальше» Weebly покажет всю запись в блоге со скрытым содержимым под линией разрыва.
На что следует обратить внимание при использовании перерыва для чтения
Хотя в блоге Weebly легко использовать перерыв для чтения, помните следующие моменты, чтобы избежать путаницы.
Настройка ссылки «Подробнее» на странице блога Weebly
Если ваша тема игнорирует элемент разрыва «подробнее», тогда единственный вариант — изменить тему, которая показывает кнопку или текстовую ссылку. Для текстовых и кнопочных ссылок Weebly не предлагает никаких настроек по умолчанию для настройки внешнего вида. Это нехорошо, так как ссылка « » не отображается должным образом в некоторых темах, из-за чего пользователи думают, что в сообщении мало содержания. Хорошая часть заключается в том, что вы можете настроить цвет и выравнивание элемента, отредактировав файлы темы Weebly.
Сначала откройте страницу своего блога в новом окне браузера. Щелкните правой кнопкой мыши страницу и выберите параметр «Проверить», чтобы открыть инструменты разработчика. Проверьте исходный код, чтобы найти имя класса CSS, используемого для вашей ссылки «Подробнее».
Как вы видите на приведенном выше экране, Weebly использует следующий код, чтобы выровнять ссылку «Читать дальше» с правой стороны. В вашем случае это может быть слева с помощью «text-align:left;» Что вам нужно, так это изменить стили этого класса CSS, чтобы настроить ссылку «Читать далее» на странице вашего блога Weebly.
.blog-post .blog-read-more { text-align: right; }
Добавление пользовательского CSS-кода «Подробнее» в Weebly
Перейдите на вкладку «Темы» и нажмите кнопку «Редактировать HTML / CSS», чтобы открыть редактор кода Weebly.
Каждая тема Weebly использует разный набор исходных кодов, поэтому поиск класса CSS будет сложной задачей. Например, некоторые темы используют в то время как несколько других тем используют или частичные. Если вы найдете код, легко изменить выравнивание по левому или правому краю по центру и добавить дополнительные стили. Однако не беспокойтесь, если вы не смогли найти класс CSS. Просто перейдите в файл в разделе «Стили» и добавьте свой код CSS в конце редактора.
Вы можете добавить стили CSS, чтобы настроить внешний вид ссылки «» на странице блога. Ниже приведен пример кода для создания ссылки внутри поля и выравнивания по центру.
.blog-post .blog-read-more { text-align: center; размер шрифта: 26 пикселей; box-shadow: 5px 5px 5px светло-серый; граница: сплошная 2px; отступ: 5px; радиус границы: 5px; фон: RGB(255 235 59); }
Сохраните изменения, сделанные в редакторе кода, и если вы редактируете код впервые, Weebly попросит вас указать имя для вашей темы. Введите имя и нажмите кнопку «Сохранить», чтобы закрыть редактор кода. Обязательно опубликуйте свой сайт и проверьте страницу блога в браузере. Теперь текстовая ссылка «Читать далее» будет выглядеть так:
Вы можете настроить CSS, чтобы изменить цвет фона, цвет ссылки, цвет зависания, ширину поля, поля, отступы и т. д., чтобы выровнять кнопку с макетом вашего блога. Кроме того, помните, что приведенный выше код предназначен для замены текстовой ссылки на кнопку. Если на странице вашего блога уже есть кнопка «Подробнее», используйте только необходимые стили, такие как фон, размер шрифта, выравнивание и т. д., и используйте для определения приоритета CSS для перезаписи стилей по умолчанию.