Paperless Forest

Лента

Как упростить ввод текста в Обсидиане (плагин Typing transformer)

#Obsidian #plugins

Основное #

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

Что делает Typing transformer? Когда вы вводите какой-нибудь текст, он на ходу превращает его в другой текст. При этом превращение происходит по вашим собственным правилам, которые вы пропишете с настройках. Плагин можно использовать:

  • чтобы вводить латинские буквы или редкие символы в русской раскладке;
  • чтобы вводить длинные слова или сложные сочетания символов, нажав всего пару клавиш;
  • чтобы автоматически удваивать парные символы, которые не поддерживаются Обсидианом (например, кавычки-ёлочки);
  • чтобы делать любые другие автозамены, которые вы сможете придумать.

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

Как настроить плагин #

Прежде всего, я рекомендую отключить настройки «Auto format» и «Zone indicator».

Затем в разделе «Rules» удяляем все правила. Это китайские правила, которые нам не нужны. Вместо этого мы пропишем свои собственные правила. Их можно добавлять сколько угодно.

Правила пишутся с помощью очень простого синтактиса. К примеру, если мы хотим, чтобы слово «првт» автоматически превращалось в «привет», то пишем такую строку:

'првт|' -> 'привет|'

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

'првт|' -> 'при|вет'

Это удобно для ввода парных символов вроде кавычек или скобок, потому что мы хотим, чтобы курсор оказывался между ними. Вот, например, реальное правило, которое я использую: при вводе трёх обычных кавычек они превращаются в кавычки-ёлочки с курсором посередине:

'"""|' -> '«|»'

Можно также прописать правила для быстрого удаления слов. Скажем, у нас есть слово «привет» и мы хотим, чтобы при удалении буквы «т» удалялось бы автоматически всё слово. Можно использовать такое правило (заметьте, что вместо стрелочки используются символы «-x»):

'привет|' -x '|'

Это тоже удобно использовать для парных символов. К примеру, у нас есть кавычки-ёлочки, и мы хотим, чтобы при удалении первой кавычки автоматически удалялась и вторая:

'«|»' -x '|'

Ещё можно прописать правило для оборачивания выделения в какие-то символы. Например, с помощью такого правила можно выделить текст, ввести букву «d», и текст автоматически обернётся в html-тэг div:

'd' -> '<div>' + '</div>'

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

К примеру, мы прописали правило, превращающее слово «првт» в «привет». Но что если нам понадобится написать именно «првт»? С существующим правилом это сделать довольно сложно. Но можно прописать дополнительное правило, которое будет превращать «привет» обратно в «првт» при добавлении какого-нибудь символа, скажем, звёздочки:

'привет*|' -> 'првт|'

Правила не поддерживают регулярные выражения, но можно использовать экранирование для некоторых символов (например, чтобы ввести вертикальную черту, нужно будет написать символы «\|»), а также можно использовать «\n» для обозначения перевода строки.

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

Мои правила #

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

# Тройная кавычка превращается в кавычки-ёлочки.
'"""|' -> '«|»'

# Удаление первой ёлочки удаляет и вторую.
'«|»' -x '|'

# Обернуть выделение в кавычки-ёлочки (правила для выделения не поддерживают несколько символов, поэтому вместо кавычек используем двойку.
'2' -> '«' + '»'

# Заменить два минуса на тире.
'--|' -> '—|'

# Добавляем звёздочку, чтобы обратно превратить тире в два минуса (иногда нужно для написания кода).
'—*|' -> '--|'

# Тире и минус превращаются в три минуса.
'—-|' -> '---|'

# Вводим №№, чтобы получить #.
'№№|' -> '#|'

# Одинарный № после # тоже превращается в #, чтобы упростить ввод нескольких хэштэгов подряд (полезно для заголовков).
'#№|' -> '##|'

# Вводим четыре кавычки, чтобы получить @ (с учётом того, что три кавычки превращаются в ёлочки).
'«"|»' -> '@|'

# Доллар в русской раскладке (;;).
';;|' -> '$|'

# Шапочка в русской раскладке (:::).
':::|' -> '^|'

# Амперсанд в русской раскладке (??).
'??|' -> '&|'

# Вводим скобки в русской раскладке.
# «хх» превращается в двойные квадратные скобки.
'хх|' -> '[[|]]'

# Вводим звёздочку внутри крадратных скобок, чтобы отменить превращение.
'[[*|]]' -> 'хх|'

# Вводим х, чтобы обернуть выделенный текст в квадратные скобки.
'х'  -> '[' + ']'

# Чтобы вставить внешнюю ссылку, можно ввести «хъ() », «хъ90» или «[]90». В первом случае нужен пробел после скобок, потому что плагин не понимает правил, заканчивающихся на скобку.
'хъ() |' -> '[|]()'
'хъ90|' -> '[|]()'
'[]90|' -> '[|]()'

# Чтобы обернуть текст во внешнюю ссылку, выделяем его и вводим 9.
'9' -> '[' + ']()'

# Вводим парные бэктики в русской раскладке (ёё для одинарных кавычек, ёёё для тройных).
'ёё|' -> '`|`'
'`ё|`' -> '```|\n```'

# Оборачиваем выделение в одинарные бэктики (выделить и ввести букву ё).
'ё' -> '`' + '`'

# Вводим тильды в русской раскладке(ЁЁ - одинарная тильда, ЁЁЁ — двойные парные тильды).
'ЁЁ|' -> '~|'
'~Ё|' -> '~~|~~'

# Оборачиваем выделение в одинарные тильды (выделить и ввести букву Ё).
'Ё' -> '~' + '~'

# Введение чекбоксов в русской и английской раскладке.
# Вводить чекбоксы довольно неудобно, потому что они состоят из пяти символов и легко можно забыть какой-нибудь пробел. Я прописала такие правила, чтобы можно было ввести всего несколько первых символов чекбокса, и даже без пробелов.
# Русская раскладка (вводим «- хъ» или просто  «-х»).
'- хъ|' -> '- [ ] |'
'-х|' -> '- [ ] |'

# Если нам нужен текст «-х», то можно отменить превращение, удалив пробел после чекбокса и введя букву «х».
'- [ ]х|' -> '-х|'

# Английская раскладка: вводим «-[ », «- [ », «-[] », «- [] » (обязательно пробел после последней скобки).
'-[ |]' -> '- [ ] |'
'- [ |]' -> '- [ ] |'
'-[] |' -> '- [ ] |'
'- [] |' -> '- [ ] |'

# Упрощаем ввод знаков > и <.
# В русской раскладке «ЮЮ» превращается в «>», а «ББ» превращается в «<».
'ЮЮ|' -> '>|'
'ББ|' -> '<|'

# Быстрая вставка коллаута. Вводим «>..» или «>//», чтобы получить «>[!]».
'>..|' -> '>[!|]'
'>//|' -> '>[!|]'

# Чтобы напечатать вертикальную черту в русской раскладке, вводим обратную косую черту и пробел: «\ ».
'\ |' -> '\||'

# Я очень часто использую датавью, поэтому прописала правила для сокращённого ввода слов dataview и dataviewjs.
'```dv|' -> '```dataview|'
'```dj|' -> '```dataviewjs|'

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

Оставить комментарий


Мои наблюдения по опыту использования Обсидиана

#Obsidian

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

  • Дашборды красивые, я сделала несколько очень крутых дашбордов, и с датавью, и попроще, но в итоге я их практически никогда не использую.
  • Для навигации чаще всего использую поиск по названию и алиасам. Можно делать это с помощью Quick Switcher-а но я чаще использую поисковую строку в плагине Home tab.
  • Typing transformer использую постоянно, один из самых полезных плагинов, о которых никто не говорит.
  • Ежедневные заметки использую постоянно в качестве инбокса. Позволяют не думать, куда записать мысль.
  • В ежедневных заметках нет никакой структуры, пишу всё подряд в виде списка. Когда пробовала делать структуру, поняла, что не использую её.
  • Одно время пыталась вести задачи в Обсидиане. Даже выстроила неплохую систему, но потом поняла,что пытаюсь в этой системе эмулировать всё то, что уже есть в специальных приложениях для задач из коробки, только в них оно работает проще и лучше. Плюнула и перенесла задачи в Ticktick.
  • Держу в Обсидиане списки задач по проектам без срока исполнения или формата «может быть когда-нибудь». Всё, что с датой, идёт в TickTick.
  • Коллекции книг, фильмов и т.п., с табличками с всем таким, красивые, но довольно бесполезные. Но красивые.
  • Пробовала обойтись без папок, не понравилось. Но папок должно быть немного, и деление по папкам не по темам, а по типам или сферам использования.
  • Пробовала несколько существующих плагинов для отслеживания писательского прогресса. Ни один не понравился. Пишу свой плагин.
  • Навострилась писать скрипты для dataviewjs, фигачу их везде. Обычный dataview уже не помню, как использовать.
  • Настройка css — бесконечный процесс, приводящий к прокрастинации. Написала свою тему, но всё равно есть ещё куча сниппетов, которые постоянно допиливаю.
  • Много раз пыталась встроить в свою систему тэги, но ничего не получается. Предпочитаю свойства и ссылки.
  • Поиск по тексту не очень удобный, поэтому стараюсь так выстраивать систему, чтобы приходилось его использовать по минимуму.
  • Пробовала использовать несколько хранилищ. Для постоянного использования не очень удобно. В любой момент может возникнуть необходимость сделать рандомную заметку, и непонятно, в какое хранилище её добавлять. Не хочу забыть, где что лежит. Плюс неудобно переключаться между хранилищами на телефоне.
  • Пришла к системе трёх хранилищ:
    • Основное (все актуальные заметки)
    • Архивное (все заметки, которые уже неактуальны, но удалять жалко)
    • Тестовое (чтобы пробовать новые плагины, системы и т.п.)
  • Написала скрипт для автоматического переноса заметки из основного хранилища в архивное по команде.
  • Выяснила, что Обсидиан хорошо работает с большим количеством заметок, если нет плагинов. Наличие плагинов (особенно датавью) здорово замедляет большие хранилища. Особенно заметно на телефоне. Поэтому стараюсь ограничивать количество заметок в основном хранилище, а всё отработанное переносить в архив.
  • Работа Обсидиана на телефоне очень зависит от количества памяти. Я купила новый телефон с большой оперативкой, и теперь Обсидиан летает.

Оставить комментарий


Как добавлять рисунки в Обсидиан

#Obsidian #рисунки

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

450

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

Чтобы добиться такого эффекта, сначала картинку нужно сделать прозрачной. Для этого надо удалить с неё белый фон. Это можно сделать в Фотошопе, но за неимением Фотошопа я использую 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\

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

Оставить комментарий


Как создать бесплатный статический сайт из заметок Obsidian

#Obsidian #Quartz

Преамбула #

В приложении Obsidiian есть встроенный сервис Publish, который позволяет создать свой сайт и публиковать заметки в интернете в один клик. Но у него есть как плюсы, так и минусы.

Плюсы:

  • минимум настроек, всё работает из коробки;
  • поддерживается весь основной функционал Обсидиана.

Минусы:

  • он платный (и довольно дорогой);
  • ограниченные возможности настройки сайта.

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

Этот мой сайт сделан совершенно бесплатно (я только заплатила сто рублей за домен, но даже это было необязательно). Он хостится на Github Pages и создан при помощи генератора статических сайтов Hugo. Но главное — новые страницы публикуются напрямую из Обсидиана, одной командой. В этой статье я расскажу, как можно сделать подобный сайт самостоятельно.

Общая информация #

Генерация сайта происходит в два этапа. Во-первых, нужно отправить заметку из Обсидиана в репозиторий на гитхабе. Во-вторых, добавленные Markdown-файлы нужно преобразовать в Html-страницы и собрать из них сайт. Для первого этапа нам понадобится установить плагин для Обсидиана Github Publisher. За второй будет отвечать специальный шаблон, который мы разместим в репозитории. Шаблон будет применяться автоматически каждый раз при добавлении нового файла.

Начать настройку сайта лучше всего с выбора шаблона. Шаблон — это набор правил, по которым кучка маркдаун-файлов преобразуется в сайт. Он определяет внешний вид и функционал сайта: расположение элементов, меню и иконки, стили, скрипты и т. п., а также правила, по которым синтаксис Markdown преобразуется в Html. В интернете можно найти огромное количество шаблонов для статических сайтов, но не все они поддерживают специфический синтаксис Обсидиана, поэтому лучше всего выбирать шаблон, специально заточенный под Обсидиан. Популярным вариантом является Quartz. Ещё можно попробовать Mkdocs или Amethyst. Мой сайт сделан на основе шаблона Amethyst, но его я не рекомендую, потому что он сильно устаревший, и мне пришлось его очень здорово переписать под себя. Может быть, когда-нибудь я напишу и опубликую документацию к собственному шаблону (пока что он сыроват).

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

Создание и настройка сайта на базе Quartz #

Установка шаблона на Github Pages #

Вот самый простой способ быстро создать сайт на базе Quartz:

  • Зарегистрироваться на Github (если ещё нет аккаунта).
  • Открыть репозиторий шаблона и нажать кнопку «Use this template». Создать новый публичный репозиторий.
  • Переименовать ветку v4 в main.
  • Отредактировать файл deploy.yml в папке .github/workflows, удалив строку token: ${{ secrets.GH_PAT }}.
  • Перейти на страницу Settings —> Pages и выбрать Source —> Github Actions.
  • Перейти на страницу Settings —> Environments — удалить все.
  • В папке content создать файл index.md. Он обязательно должен содержать фронтмэттер со свойством title, содержащим заголовок для главной страницы.
  • Снова перейти на страницу Settings —> Pages. Там появится ссылка на ваш новый сайт.

Настройка сайта #

Теперь для настройки сайта необходимо отредактировать файл quartz.config.ts. В нём нужно изменить следующие свойства:

  • pageTitle — указать своё название сайта;
  • locale — поменять на "ru-RU";
  • baseUrl — здесь нужно указать свой адрес сайта (без "https://");
  • theme — здесь можно заменить шрифты и цвета на какие вам хочется.

Дополнительно можно поменять внешний вид сайта:

  • отредактировав файл quartz.layout.ts— можно поменять расположение элементов на сайте;
  • отредактировав scss-файлы в папке quartz/styles.

Больше о настройках можно узнать в документации Quartz

Для добавления новых страниц на сайт Markdown-файлы должны добавляться в папку content. При этом каждый Markdown-файл должен как минимум содержать свойство title. Далее мы настроим, чтобы эти файлы туда добавлялись автоматически из Обсидиана.

Локальная копия сайта #

Редактировать файлы сайта можно прямо на гитхабе (что не очень удобно и медленно, но зато не нужно ничего скачивать и устанавливать). Либо можно скопировать их на свой компьютер с помощью Git и редактировать локально.

Чтобы запустить локальную копию сайта для отладки:

  • Установите Git.
  • Установите Node (после установки требуется перезагрузить компьютер).
  • В своём репозитории скопируйте адрес для клонирования (Code —> HTTPS —> копировать)
  • Откройте терминал и введите команду:
git clone <скопированный адрес>

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

cd <название скопированной папки>
npx quartz build --serve

Эта команда запускает сайт на локальном сервере. В браузере откройте адрес http://localhost:8080/. Это локальная версия сайта, где будут сразу отображаться все изменения, которые вы сделаете в скопированных файлах.

После того, как настройка закончена, можно отправить отредактированные файлы обратно на гитхаб с помощью команд:

git add --a
git commit -m "My cool new changes"
git push origin main

Собственный домен #

По умолчанию адрес сайта на Github Pages отображается в формате <имя аккаунта>.github.io/<название репозитория>, но если вы хотите адрес покрасивее, то можно купить и настроить свой собственный домен. Как это сделать, я рассказывать не буду, потому что нашла очень доступную и внятную статью об этом.

Настройка Gihub Publisher #

Теперь, когда сайт готов, нужно добавить возможность публиковать новые страницы напрямую из Обсидиана. Для этого нужно будет настроить в Обсидиане плагин Gihub Publisher.

  • Установливаем плагин
  • На гитхабе переходим на страницу Settings — Developer settings — Personal access tokens — Fine-grained tokens — Generate new token. Придумываем название токена, указываем продолжительность действия и репозитории, к которым он применяется (лучше указать только репозиторий сайта). Затем указываем разрешения для репозитория. Их очень много, и они непонятные, поэтому лично я просто выставляю максимальные разрешения на всё. После генерации токен обязательно нужно где-то сохранить, потому что второй раз вам его не покажут.
  • Открываем настройки Github Publisher и указываем следующие данные:
    • Вкладка Github config:
      • Имя своего аккаунта на гитхабе.
      • Название репозитория.
      • Токен.
    • Вкладка File paths:
      • Default folder — content.
      • Root folder — content.
    • Вкладка Content:
      • Internals links — да.
      • Convert internal links pointing to unpublished notes — да.
      • Wikilinks to MDlinks — нет.
    • Attachment & embeds:
      • Send linked files — нет.
      • Transfer attachments — да. Остальные настройки указываются по желанию. Дополнительно о возможностях плагина можно почитать в документации.

Публикация заметок #

Теперь можно публиковать заметки. Нужно создать заметку и добавить к ней свойство share: true, а также свойство title для заголовка. Можно добавить и другие свойства (в соответствии с настройками плагина и встроенными свойствами, указанными в документации Quartz), но эти обязательные. После этого в палитре команд вызываем команду Upload single current active note.

Если всё настроено правильно, то появится сообщение, что заметка опубликована. Для проверки можно зайти в репозиторий и убедиться, что заметка добавилась в папку content. Обычно после этого нужно с полминуты подождать прежде чем страница отобразится на сайте.

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

Заключение #

Надеюсь, это будет кому-нибудь полезно! Я сама не использую Quartz, потому что узнала о нём только после того, как практически написала собственный шаблон на Hugo, но я его тестировала, и он выглядит очень неплохо. Вдобавок, по тому же принципу можно настроить любой другой шаблон, будь то Hugo, Jekyll и так далее. Я перепробовала несколько разных вариантов, и, когда усвоишь общую идею, разница невелика.

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

Оставить комментарий


Syncthing

Приложение для синхронизации файлов между устройствами (напрямую, без облаков).

Преимущества Syncthing #

  • Синхронизация очень быстрая.
  • Файлы не хранятся нигде в облаках и на чужих серверах, а только на моих устройствах.
  • Есть версионирование и отслеживание конфликтов, что позволяет восстанавливать потерянные данные.
  • Синхронизация возможна даже без интернета (например, по локальной сети).
  • Работает на любых устройствах (я даже ухитрилась впихнуть Syncthing на свою читалку Pocketbook).
  • Можно синхронизировать любые папки на устройстве, независимо от их расположения (в том числе даже на флэшке).
  • Бесплатная синхронизация любых объёмов данных без ограничений.
  • Опенсорсный проект.

Недостатки Syncthing #

  • Очень много не совсем понятных настроек, в которых легко запутаться, особенно не технарю.
  • Иногда бывают конфликты с удалёнными файлами при синхронизации нескольких устройств.

Оставить комментарий


Цифровой сад

Цифровой сад (digital garden) — это личный сайт, где можно делиться своими мыслями. Отличием цифрового сада от блога является то, что записи не выстроены в хронологической последовательности, и их можно просматривать в любом порядке при помощи перекрёстных ссылок и тэгов, по принципу Википедии. Записи в цировом саду не обязательно являются законченными, а могут постепенно дополняться и уточняться.

Мой сайт является цифровым садом наполовину: в нём есть лента блога, но она существует отдельно от основных записей, которые не привязаны к хронологии.

Ссылки на интересные цифровые сады:

Русскоязычные:

Оставить комментарий


Пресет настроек для плагина Canvas Style Menu

#Obsidian #canvas #plugins

Недавно появился ещё пока неофициальный плагин для Обсидиана, Canvas Style Menu, который расширяет меню редактирования карточки на холсте. С его помощью можно не только изменять цвет карточек, но и добавлять к ним любые другие стили. Правда, по умолчанию там довольно мало настроек, но можно добавить свои настройки самостоятельно. Я долго ковырялась, но наконец настроила все правила, какие мне хотелось. Если вдруг кому тоже хочется делать в канвасе красивое, но неохота копаться в настройках и css, делюсь своим пресетом:

  1. Установите плагин через BRAT. Если устанавливали раньше, обновите, там появились новые фишечки.
  2. Скачайте этот файл и положите его в папку .obsidian/plugins/canvas-style-menu/packages. Создайте, если её нет.
  3. Скачайте и подключите сниппет.
  4. В настройках плагина нажмите кнопку Reload packages и выберите пакет CSM Reaty settings Стили вдохновлялись частично Canvas Candy, частично самим плагином, но кое-что я добавила от себя. Весь функционал можно посмотреть на картинке:

Оставить комментарий


Css для картинок в сайдбаре

#css

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

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

Но по умолчанию такая картинка смотрится не очень хорошо, потому что получаются лишние отступы, и верхняя панель занимает слишком много места. Вот как это выглядит:

Чтобы улучшить отображение картинки я написала такой css-сниппет:

:is(.mod-left-split, .mod-right-split) .workspace-tabs:has(.image-container):not(.mod-active) .workspace-tab-header-container {
    display: none;
}

:is(.mod-left-split, .mod-right-split) .workspace-tabs:has(.image-container) {
    max-height: 150px;;
}

:is(.mod-left-split, .mod-right-split) .workspace-tabs:has(.image-container) .workspace-tab-container .view-content {
 padding: 0;
 overflow: hidden;
}

:is(.mod-left-split, .mod-right-split) .workspace-tabs:has(.image-container):not(.mod-active) .workspace-tab-container .view-content .image-container {
    padding-top: 5px;

}

:is(.mod-left-split, .mod-right-split) .workspace-tabs:has(.image-container) .workspace-tab-container .view-content .image-container {
    width: 100%;
    height: 100%;
}

:is(.mod-left-split, .mod-right-split) .workspace-tabs:has(.image-container) .workspace-tab-container .view-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

После подключения сниппета картинка выглядит так:

Теперь она занимает всю область, без отступов, и выглядит более стильно. Верхняя панель скрыта и будет появляться только при клике на картинку.

Оставить комментарий


Как переиспользовать код с помощью dataviewjs

#dataview #dataviewjs

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

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

Для этого используется функция dv.view().

Сначала создаём файл с расширением .js, например, my_сode.js, и кладём его в любое место в своём хранилище Обсидиана. Для примера положим его в папку scripts. Пишем в нём весь код, который хотим переиспользовать. Например, напишем там следующий код:

dv.paragraph("Hello world!")

Затем в заметке в блоке dataviewjs пишем:

await dv.view("scripts/my_code")

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

В файле my_code.js пишем:

this.myFunc = (x) => {
	dv.paragraph(x)
}

this.myVar = "Hello world!"

И в заметке в блоке dataviewjs пишем:

await dv.view("scripts/my_code")

myFunc(myVar)

Подобным же образом можно переиспользовать любые функции или переменные.

Замечание: При таком способе все функции и переменные присваиваются глобальному объекту window, что не очень безопасно, потому что можно случайно перезаписать какие-то существующие свойства или методы. Кажется, что безопаснее было бы использовать промежуточный объект.

Например, в файле my_code.js пишем:

const myFunc = (x) => {
	dv.paragraph(x)
}

const myVar = "Hello world!"

this.myObject = {myFunc, myVar}

И в заметке в блоке dataviewjs пишем:

await dv.view("scripts/my_code")

const {myFunc, myVar} = myObject

myFunc(myVar)

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

Можно также использовать класс вместо объекта. В файле my_code.js пишем:

this.myClass = class myClass {
	myFunc() {
		dv.paragraph("Hello world!")
	}
}

И в заметке в блоке dataviewjs пишем:

await dv.view("scripts/my_code")

const newClass = new myClass

newClass.myFunc()

Оставить комментарий


Синхронизация через Syncthing без интернета

#синхронизация #syncthing

Я наконец дозрела попробовать Syncthing для синхронизации Обсидиана. До этого меня останавливало, что там надо, чтобы устройства были в одной сети, а как это организовать вне дома без танцев с бубном, я не знала (всё, что там про какие-то сервера и порты вызывает у меня короткое замыкание в мозгу).

Моя проблема в том, что мне надо синхронизировать файлы с рабочим компом. На работе у меня нет вайфая, стоит файервол с кучей ограничений, почти все настройки намертво заблокированы, а периодически админы вообще отключают интернет, мол, нефиг расходовать рабочий трафик попусту. Из-за этого большинство методов синхронизации у меня там не работало вообще или работало плохо (мне удалось настроить гит, но он был очень медленный). У меня была мысль раздать вайфай с телефона, но как назло мой провайдер недавно сделал раздачу интернета с телефона платной и жутко дорогой.

Но недавно я узнала, что, оказывается, Syncthing может синхронизировать вообще без интернета! Достаточно точки доступа. То есть, план действий, такой:

  • отключаем мобильный интернет на телефоне (чтобы не расходовать платный трафик);
  • включаем на телефоне точку доступа;
  • подключаем компьютер к этой точке доступа как к вайфаю;
  • запускаем Syncthing.

Профит! Интернета на устройствах нет, но они синхронизируются. Минус способа в том, что приходится отключать интернет на телефоне и держать активной точку доступа, что не всегда удобно, но для быстрой синхронизации в начале и в конце рабочего дня — идеально. И при желании можно синхронизировать устройства хоть в лесу, где связи нет вообще.

Оставить комментарий