Лента

Все эти значки — это на самом деле ярлыки для Обсидиана:

• обычный значок запуска приложения;
• ярлык для создания задачи в плагине TaskNotes;
• ярлык, чтобы открыть список задач в плагине TaskNotes;
• ярлык для создания новой заметки с уникальным идентификатором;
• ярлык для открытия ежедневной заметки;
• ярлык для открытия заметки со списком покупок.

С помощью этих ярлыков можно сразу открыть Обсидиан и выполнить нужную команду или перейти в нужную заметку в один клик.

Чтобы создать такие ярлыки, мне понадобились:

• приложение Shortcur maker для Android;
• Плагин Advanced URI для Обсидиана.

Плагин Advanced URI позволяет создавать особые ссылки, при клике на которые исполняются нужные действия в Обсидиане. А Shortcur maker создаёт на рабочем столе ярлыки для этих ссылок. Таким образом, при нажатии на ярлык будет запускаться Обсидиан и сразу выполняться нужное действие.

О том, как прописывать ссылки для Advanced URI можно подробно почитать в документации, но вот несколько примеров:

1. Создать заметку с уникальным идентификатором:

obsidian://adv-uri?commandid=zk-prefixer

2. Открыть или создать ежедневную заметку:

obsidian://adv-uri?commandid=daily-notes

3. Открыть заметку со списком покупок в режиме живого просмотра:

obsidian://adv-uri?filepath=Список%20покупок.md&viewmode=live

Ссылки можно прописывать самостоятельно, используя документацию, но для простоты можно воспользоваться командами плагина Advanced URI, которые позволяют сразу получить готовую ссылку для определённой команды или заметки.

Получив ссылку, надо создать для неё ярлык с помощью приложения Shortcur maker:

1. Открываем Shortcur maker, заходим в меню Приложения и выбираем Obsidian.
2. Открываем пункт, где написано Нажмите, чтобы изменить ярлык и пишем любое название для ярлыка.
3. Открываем пункт Значок и настраиваем значок для ярлыка. Можно использовать какое-нибудь изображение или эмодзи.
4. Открываем пункт с настройками активности. Здесь у нас есть несколько настроек, но нам нужны только две:

5. Заходим в пункт Действие и меняем слово android.intent.action.MAIN на android.intent.action.VIEW. 6. Заходим в пункт Данные и вставляем нашу ссылку для Advanced URI. 7. Всё сохраняем и нажимаем кнопку Создать ярлык. У меня не получилось найти способа отредактировать ярлык после создания, поэтому лучше сразу всё делать правильно, чтобы потом не переделывать.

Теоретически вместо Advanced URI можно также использовать встроенный Obsidian URI, но он не умеет вызывать команды и вообще гораздо менее функционален. Есть также некоторые другие плагины, которые позволяют создавать собственные URI-ссылки, например QuickAdd.

Следует учитывать, что если Obsidian на телефоне не запущен, то даже с ярлыками команды будут запускаться медленно, потому что сперва должно запуститься само приложение. Для неилучшей эффективности следует запретить телефону выгружать Обсидиан из памяти. На некоторых устройствах это можно сделать, нажав значок замочка напротив приложения на панели запущенных приложений. Кроме того стоит исключить Обсидиан из всех настроек экономии батареи. Тогда Обсидиан будет оставаться в памяти телефона и все действия будут запускаться мгновенно.

Чёрно-белая картинка хорошо смотрится на белом фоне, но на цветном фоне или при использовании тёмной темы слишком уж выделяется. Но вот в этом видео я увидела идею, как подогнать цвета картинки под цвет темы Обсидиана. У автора видео это всё выглядит сложновато, так что для себя я всё немного упростила. Вот как это может выглядеть в светлой или тёмной теме:

Чтобы добиться такого эффекта, сначала картинку нужно сделать прозрачной. Для этого надо удалить с неё белый фон. Это можно сделать в Фотошопе, но за неимением Фотошопа я использую paint.net.

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

Чтобы затем удалить фон в paint.net нужно выбрать инструмент «волшебная палочка», заполнение: глобальное, чувствительность: 40%. Затем кликнуть по белому фону и нажать delete. Должно удалиться всё белое. Сохранить файл в формате png для сохранения прозрачности.

Затем файл картинки нужно переименовать, добавив в любое место названия текст «recolor-image». Этот текст будет сигнализировать о том, что изображение должно перекрашиваться под тему (потому что мы не хотим, чтобы перекрашивались вообще все картинки).

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

.theme-light {
--image-filter: <фильтр для светлой темы>;
}
.theme-dark {
--image-filter: <фильтр для тёмной темы>;
}
.image-embed[src*="recolor-image"] img {
  filter:  var(--image-filter);
}

К сожалению, фильтры не высчитываются автоматически, и придётся их прописывать вручную для каждой темы. Для этого:

• Определяем цвет шрифта или любой другой желаемый цвет рисунка в формате HEX или RGB;
• Открываем генератор, вставляем в него код желаемого цвета и генерируем фильтр.
• Полученные параметры фильтра подставляем в переменную --image-filter.

После этого чёрный цвет на картинке отфильтруется и превратится в нужный нам цвет.

Дополнение: Есть ещё другой способ, без использования генератора. Добавляем фильтр в формате svg:

--image-filter: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="recolor" color-interpolation-filters="sRGB">\
  <feColorMatrix type="matrix" values="\
    0 0 0 0 R\
    0 0 0 0 G\
    0 0 0 0 B\
    0 0 0 A 0\
  "/>\
</filter>\
</svg>\
#recolor');

При этом буквы RGBA нужно заменить на соответствующие выбранному цвету. Для этого нам нужно получить код цвета в формате rgb или rgba, например: rgba(74, 52, 28, 0.9). Первые три значения делим на 255, четвёртое оставляем без изменений и в таком виде подставляем в матрицу. Получаем:

0 0 0 0 0.29\
0 0 0 0 0.2\
0 0 0 0 0.11\
0 0 0 0.9 0\

Стоит учитывать, что при делении приходится округлять, поэтому, как и в первом случае, цвет может совпадать не на сто процентов.

Есть темы для Обсидиана, которые уже поддерживают некоторые из подобных чекбоксов, но можно назначить свои собственные при помощи css:

input[data-task="h"]:checked,
li[data-task="h"] > input:checked,
li[data-task="h"] > p > input:checked {
  --checkbox-marker-color: transparent;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: currentColor;
  -webkit-mask-size: var(--checkbox-icon);
  -webkit-mask-position: 50% 50%;
 
  color: var(--color-red);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' %3E%3Cpath fill='none' d='M0 0H24V24H0z'/%3E%3Cpath d='M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z'/%3E%3C/svg%3E");
}

Ссылки на svg-иконки, которые подставляются в свойство “-webkit-mask-image”, можно брать, например, тут: Remix Icon

Если надо сделать чекбокс некликабельным:

.HyperMD-task-line[data-task="h"] > .task-list-label, 
input[data-task="h"],
li[data-task="h"] > input, 
li[data-task="h"] > p > input
 {
  pointer-events: none;
}

Шаблон этого сайта поддерживает некоторые кастомные чекбоксы, но не все:

• [n] [n]
• [r] [r]
• [>] [>]

Безопаснее использовать буквы, а не символы.