Статьи

Создайте простую тему Tumblr с помощью Bootstrap

Сентябрь 9, 2018

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

Вот что вам нужно для начала:

  • аккаунт Tumblr
  • базовое понимание Bootstrap , популярного интерфейса.

Наши основные ресурсы HTML и Bootstrap

Тема Tumblr — это просто HTML-файл, который использует специальные операторы Tumblr. Мы начнем с создания нового файла с помощью нашего любимого текстового редактора и добавления в него следующего стандартного HTML-кода: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

Далее мы добавим необходимые ресурсы Bootstrap. Bootstrap CDN позволяет легко добавлять файлы в вашу тему Tumblr. Просто поместите следующее в head 

 <!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Также добавьте следующее перед закрывающим тегом body 

 <!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>

Добавление пользовательских стилей

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

 head

Создание заголовка темы Tumblr

Мы будем использовать <style type="text/css">
body {
padding-top: 60px;
}

.container {
width: 550px;
}
</style> Это позволяет нам использовать нашу первую переменную Tumblr: navbar Переменная {Title} Следующий код добавляется в {Title} 

 body

Рекомендуется также использовать переменную <nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">{Title}</a>
</nav>{Title}<title> 

 <title>{Title}</title>

Если бы вы применили тему к своему блогу на Tumblr сейчас, она бы выглядела так, с пустым пространством под ней:

Заголовок темы Tumblr

Создание контейнера для хранения сообщений

Далее мы добавим div Добавьте следующий код ниже элемента nav 

 <div class="container">
</div>

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

  • текст
  • Фото
  • котировка

{block:Posts}блок Tumblr, который дает нам список всех постов, доступных в блоге.

Добавьте следующий код внутри контейнера сообщений: 

 {block:Posts}
{/block:Posts}

Далее, чтобы определить тип текущей записи, мы будем использовать следующие блоки:

  • {block:Text}
  • {block:Photo}
  • {block:Quote}

Для любого поста будет отображаться только один из них.

Обработка текстовых сообщений

Текстовые сообщения обычно имеют заголовок и тело, к которым можно получить доступ, используя переменные {Title}{Body} Добавьте следующий код внутри тега {block:Posts} 

 {block:Text}
  <h2>{Title}</h2>
  <p>{Body}</p>
{/block:Text}

Обработка фото постов

Фото посты имеют подпись и фото. Заголовок может быть доступен с помощью переменной {Caption} Доступ к фотографии немного сложнее. Чтобы вам было проще использовать одинаковые размеры изображений по всему вашему блогу, Tumblr предоставляет вам уменьшенные версии фотографий.

Например, чтобы убедиться, что ваша фотография не шире 500 пикселей, вы можете использовать переменную {PhotoURL-500} Точно так же, если вы хотите убедиться, что фотография не шире, чем 100px, вы можете использовать переменную {PhotoURL-100}

Для этой темы Tumblr я буду использовать {PhotoURL-500}

Мы можем использовать карту Bootstrap, чтобы показать фотографию и ее подпись.

Код для обработки фотографий будет выглядеть следующим образом: 

 {block:Photo}
  <div class="card">
    <img class="card-img-top" src="{PhotoURL-500}" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">{Caption}</h5>
    </div>
  </div>
{/block:Photo}

Обработка цитатных сообщений

В этом типе поста вам придется использовать переменные с интуитивно понятными именами {Quote}{Source} Bootstrap применяет свои собственные стили к элементу HTML <blockquote>blockquoteblockquote-footer 

 {block:Quote}
  <blockquote class="blockquote">
    <p>{Quote}</p>
    <footer class="blockquote-footer">{Source}</footer>
  </blockquote>
{/block:Quote}

Обработка нумерации страниц

На этом этапе ваша тема Tumblr будет выглядеть завершенной, если вы примените ее к своему блогу. Тем не менее, Tumblr показывает только фиксированное количество сообщений одновременно.

Вы можете изменить этот номер на странице Дополнительные параметры . Как вы можете видеть на скриншоте, я установил значение Количество сообщений на страницу 3:

Дополнительные настройки Tumblr

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

Tumblr имеет две переменные, чтобы помочь с этим: {PreviousPage}{NextPage} Значения этих переменных являются ссылками, поэтому вам придется помещать их в теги <a> Чтобы эти ссылки отображались только при наличии действительной предыдущей или следующей страницы, мы используем переменные {PreviousPage}{NextPage}{block:PreviousPage}{block:NextPage}

Мы можем использовать классы кнопок Bootstrap для стилизации наших ссылок на страницы.

Следующий код будет добавлен после {block:Posts} 

 <p class="text-center">
  {block:PreviousPage}
    <a href="{PreviousPage}" class="btn btn-secondary">Previous</a>
  {/block:PreviousPage}
  {block:NextPage}
    <a href="{NextPage}" class="btn btn-secondary">Next</a>
  {/block:NextPage}
</p>

Применение темы к Tumblr

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

Примечание : поскольку мы используем внешние ссылки для файлов Bootstrap, предварительный просмотр может выглядеть неправильно. Однако после нажатия кнопки « Сохранить» при посещении блога вы должны увидеть, что стили Bootstrap применяются правильно.

Финальная тема Tumblr

Вывод

Теперь у нас есть простая, но полная тема Tumblr, в которой используется последняя версия Bootstrap. Вы всегда можете обратиться к документации Tumblr, чтобы расширить эту тему.

Если у вас есть опыт работы с темами Tumblr с помощью Bootstrap или другого фреймворка, сообщите нам об этом в комментариях.

Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.

38
Share: