Лучший стиль в Roam

Обновление от 15 декабря 2020 г .: ROAMEXT 1.x устарел :). Предоставляемая им функциональность стала родной для Roam. Однако читайте дальше, если хотите узнать, что можно делать с блочными тегами (только обратите внимание, что номенклатура в официальной реализации немного отличается).

В этой короткой статье я хотел бы поделиться с вами своим маленьким фрагментом кода для исследования Roam под названием ROAMEXT (= Roam extended). Это так называемый плагин JavaScript, который вы можете установить в свой график. Но не волнуйтесь, вам не нужно понимать, как это работает, чтобы понять, что он может для вас сделать.

Некоторые из вас могут спросить: Зачем нужен еще один плагин Roam? Их уже очень много. И они делают потрясающие вещи! Они добавляют галереи, таблицы атрибутов фильтрации, значки к вашим ссылкам и многое другое. Тем не менее, я мастерица, и я пропустил вещь, которая не решала бы за меня одну конкретную задачу, а вместо этого позволяла бы мне совершенно по-новому настроить свой опыт роуминга.

Чтобы понять, что делает ROAMEXT, давайте быстро рассмотрим, как работают обычные теги в Roam. Каждый #tag генерирует специальный HTML-код с атрибутом, который содержит его значение. Это может показаться трудным, но на самом деле это удивительно просто. Допустим, у нас есть тег #roam. Если мы посмотрим на код, мы увидим это:

В HTML-коде наш тег #roam зажат между открывающим тегом <span...> и его закрывающим аналогом </span>. Первый содержит так называемые атрибуты с разными значениями, например, tabindex. И вы видите, что дальше? Это атрибут data-tag и значение roam (т.е. наш тег без #).

Это может показаться небольшим, но это дает настройщикам Roam огромные возможности. Это позволяет нам, например, определить простое правило стилизации, которое гласит: измените любой выделенный текст после #roam на определенный цвет - или вы даже можете определить внешний вид таблиц или канбана! Все они с простым языком стилей под названием CSS - каскадные таблицы стилей. Однако есть одно огромное ограничение, с которым сталкиваются все настройщики. Мы не можем использовать теги для форматирования наших блоков. Причина? #tags может повлиять только на то, что следует за ними.

Так что же делает мое маленькое расширение ROAMEXT? Он ищет изменения в ваших блоках и, как только видит новый тег, принимает его значение и сохраняет его в специальный атрибут под названием data-tags в родительском блоке. Этот атрибут называется data-tags (множественное число), потому что он может содержать любое количество тегов.

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

Для этого скрипт также сохраняет те же самые теги в общем предке, которые есть у вашего блока и его дочерних элементов, в специальный атрибут data-tags-up (извините, я не очень хорошо умею давать имена вещам, как вы наверное заметил). Технически только он мог все делать. Однако удобнее сохранить эти значения в обоих местах, потому что это сокращает ваш код стилизации CSS.

Вот что мы получаем:

Лучший способ проиллюстрировать его работу - это следующий пример, который иллюстрирует как data-tags, так и data-tags-up:

#redborder использует только [data-tags~="redborder"] в качестве селектора и создает красную рамку вокруг блока, только без дочерних элементов.

#orangeborder использует более высокий [data-tags-up~=”orangeborder"], который соответствует общему предку блока и его дочерних элементов. Это отлично подходит для раскрашивания всего блока.

#blueborder использует также data-tags-up; однако он указывает, что он выбирает не весь блок с дочерними элементами, а только его дочерние элементы > div:nth-child(2).

Обратите внимание на одну важную вещь: в data-tag (то есть в случае одного тега) мы используем оператор = для сопоставления тега (например, [data-tag="Roam"], здесь мы должны использовать оператор ~= вdata-tags иdata-tags-up. Для этого есть веская причина, что, впрочем, выходит за рамки данной статьи :).

Три примера того, что можно делать с ROAMEXT

Пришло время привести несколько реальных примеров, от простых до более сложных.

Цитаты

Итак, что мы можем с этим сделать? Мой основной сценарий - использовать его для цитат - вероятно, одной из самых желаемых недостающих функций в Roam. Все, что мне нужно, это следующий простой код, использующий data-tags:

Тогда я могу просто написать #bq и…

Вуаля, цитата!

И если я хочу, чтобы #bq исчез, мне нужно просто добавить одно простое правило:

Теперь идеально:

Перейдем к более сложным случаям.

Цветные блоки (с дочерними узлами и без них)

В основном у нас уже есть цветные блоки. Наш #bq ничем не отличается от этого; нам просто, наверное, стоит немного изменить его границы:

Однако что, если мы хотим иметь цветные блоки, включая их детей? Пора двигаться вверх! Мы будем использовать data-tags-up для создания цветных блоков, чтобы взломать эту ужасную анонимную стену пуль, которой, как правило, становятся планировщики (и Roam здесь не исключение).

На самом деле нам не нужно много делать. Если мы просто изменим data-tags на data-tags-up в нашем #bq коде, мы получим следующее:

Мы только что изменили data-tags на data-tags-up. И если мы хотим только раскрасить дочерние элементы блока, мы можем прикрепить короткую строку к[data-tags-up~="bq"], которая говорит > div:nth-child(2), то есть выбрать второго дочернего элемента div (который является контейнером, содержащим дочерние элементы).

Теперь вы можете переименовать свой #bq, например, в block:grey, изменить код соответствующим образом, и вы готовы к работе.

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

Липкие блоки

Вы помните, что ROAMEXT сохраняет список всех тегов в data-tags и data-tags-up? Это означает, что мы действительно можем комбинировать разные теги.

Итак, допустим, мы хотим, чтобы наш цветной блок прилипал. Мы могли бы переопределить его код, но гораздо проще просто создать другой #tag , например, #sticky , который будет выполнять только эту работу. Затем мы можем добавить его в любой блок, который захотим. А каким должно быть содержание нашего #sticky? Только это:

А результаты?

Важно! Если у вас возникли проблемы с #sticky, не перекрывающим другие элементы должным образом, попробуйте изменить z-index. Чем выше число, тем больше будет перед другими элементами.

Вы найдете код на моей сопутствующей странице к этой статье.