Функциональность body_class в WordPress с использованием тегов Jekyll и Liquid - PullRequest
Новая
       6

Функциональность body_class в WordPress с использованием тегов Jekyll и Liquid

1 голос
/ 08 февраля 2012

Я не самый большой поклонник WordPress, но я думаю, что одна вещь, которую WordPress получает правильно, это функциональность body_class.

Я хочу воссоздать эту функцию, используя Jekyll и Жидкие метки .Я хочу иметь возможность совершать вызовы типа 

<body class="{% body_class %}">

, которые будут автоматически генерировать классы на основе:

  • Jekyll Template
  • Текущее сообщение (если есть)
  • Текущая страница (если есть)
  • Текущая категория (если есть)

Примеры:

/ index.html с макетом по умолчанию приведет кв 

<body class="layout-default page-index">

/ _ posts / 2012-01-01-my-unique-entry.markdown с макетом blog.html получится 

<body class="layout-blog post-my-unique-entry">

Я знаю, что могу достичь всего этогоиспользуя передний вопрос YAML, но если я смогу автоматизировать это, чтобы удалить еще одну повторяющуюся переменную, это было бы идеально.

Из того, что я пытался сделать до сих пор, я использую следующую стратегию: 

class BodyClassTag < Liquid::Tag

  def initialize(tag_name, name, tokens)
    super tag_name, name, tokens
  end

  def render(context)
    # Build string from Jekyll instance variables possible here?
  end

end

Liquid::Template.register_tag('body_class', BodyClassTag)

Есть идеи, если это возможно, и с чем связать, если так?

Ответы [ 5 ]

2 голосов
/ 08 февраля 2012

Я могу ошибаться, но я не уверен, что вам нужно использовать ruby ​​для всего этого;например, макет доступен из переменной жидкости page.

Итак, в своем файле макета вы можете сделать следующее: 

{% capture layout %}{% if page.layout %}layout-{{ page.layout }}{% endif %}{% endcapture %}

<body class="{{ layout }}">

«Уникальный идентификатор страниц иposts "немного сложнее, поскольку в Jekyll такого понятия нет.Но вы можете получить почти то же самое, используя page.url и заменяя слеш на '-'.Если вы не видите сообщение, значит, вы видите страницу.Итак: 

{% capture id_prefix %}{% if post %}post{% else %}page{% endif %}{% endcapture %}
{% capture id %}{{ id_prefix }}-{{ page.url | replace:'/','-' }}{% endcapture %}

<body class="{{ layout }} {{ id }}">

Вы можете рассчитать категорию довольно схожим образом (помните, что пост может иметь более одной категории).

Предупреждение: весь приведенный выше код был сделан сверхумоя голова и совсем не проверена.

1 голос
/ 10 февраля 2012

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

class BodyClassTag < Liquid::Tag  

  def prefixed_body_class(prefix, id)
    id = id.gsub(/\.\w*?$/, '') # Remove extension from url
    id = id.gsub(/[-\/]/, '_')  # Replace '-' and '/' with underscore
    id = id.gsub(/^_/, '')      # Remove leading '_'

    case prefix
    when "class"
      prefix = ""
    else
      prefix = "#{prefix}_"
    end

    "#{prefix}#{id}"
  end

  def render(context)
    page = context.environments.first["page"]
    classes = []

    %w[class url categories tags layout].each do |prop|
      next unless page.has_key?(prop)
      if page[prop].kind_of?(Array)
        page[prop].each { |proper| classes.push prefixed_body_class(prop, proper) }
      else
        classes.push prefixed_body_class(prop, page[prop])
      end
    end

    classes.join(" ")
  end

end
Liquid::Template.register_tag('body_class', BodyClassTag)
0 голосов
/ 08 февраля 2017

Это поздно, потому что я только сейчас вхожу в Джекилл, но, надеюсь, мое решение кому-нибудь пригодится. Я использовал переменную Front Matter вместе с простым оператором if. Итак, вот два простых шага, использующих страницу About в качестве примера.

На вашей странице About добавьте что-то вроде этой переменной в Front Matter (вы можете использовать любое имя, которое захотите): 

body_class: page-about

Более подробный пример: 

---
title: About
permalink: "/about/"
layout: page
body_class: page-about
---

Теперь добавьте оператор if к тегу вашего тела: 

{% if page.body_class %}class="{{ page.body_class }}"{% endif %}

Более подробный пример: 

<body {% if page.body_class %}class="{{ page.body_class }}"{% endif %}>

Если переменная body_class существует, класс добавляется в тело. Если переменная body_class не существует на странице Front Matter, класс не добавляется.

Если вы хотите добавить дополнительный класс к классу, который уже существует в теле, это также должно работать (убедитесь, что пространство существует до: 

<body class="main{% if page.body_class %} {{ page.body_class }}{% endif %}">

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

0 голосов
/ 04 февраля 2015

Я предпочитаю предоставлять несколько стилей хуков в порядке убывания специфичности, например так: 

<body class="
{{ post.title | downcase | replace:' ','-' | replace:',','' | strip_html }}
{% if page.category %} category-{{ page.category }}{% endif %}
{% if page.layout-class %} layout-{{ page.layout-class }}{% endif %}
">

, который создает вывод вроде: 

<body class="my-stackoverflow-design category-portfolio layout-category">

Я использую страницу-класс макета в моем приложении, так как в Jekyll в настоящее время есть ошибка, которая означает, что {{page.layout}} не работает ;он всегда возвращает значение «по умолчанию» независимо от используемого макета.

0 голосов
/ 01 февраля 2015

Я добавил это в default.html 

<body class="{{ page.id | remove:'/' }}">

Надеюсь, это поможет, ребята,

...