Добавить гиперссыщенное изображение с классами CSS в jekyll Chirpy Theme ⇐ Html

[Anonymous]

Я хочу добавить гиперссылки в изображения в блоке, которые переключаются с помощью переключения темного/света. Я использую модифицированный шаблон, сгенерированный из Jekyll Chirpy-Starter .
У меня есть два случая:

случай 1 (Синтаксис разметки)

[{: .dark .w-25 }](https://example.com/source)
< /code>
В случае вывода 1: < /p>
гиперссылка появляется

CSS -классы (.dark w-25) не появляется

case 2 (html syntax)

< /code>
В случае вывода 2: < /p>
гиперссылка не появляется

CSS -классы (.dark w-25< /code>) появляется < /p>
желаемое поведение: < /h4>

• должна появиться гиперссылка.
  Нажатие на изображение откроет гиперссылку на новой вкладке вместо обычного всплывающего окна в чирпи < /code>. < /li>
  < /ul>
• CSS классы изображения (.dark .w-25< /code>) должен появиться.
  
  .dark: изображение должно отображаться только в темном режиме.
• .w-25: ширина изображения будет уменьшена до 25%.

Операции я уже пробовал
, чтобы у меня были работа, работающие гиперссылкой и CSS , я попробовал:




Затем, в _sass/mayout/urlimage.scss , я определил:
.mode-dark .dark-mode-img {
content: url('/assets/images/header/image-dark.png');
}
< /code>
Но я не смог получить желаемый вывод. Что я могу сделать?---
layout: page
title: Testing
permalink: /testing/
---

Click the image to go to the source.

1.
[{: .dark .w-25 }](https://example.com/source)

2.




Solution (?)




< /code>
HTML преобразование содержания тела похоже на: < /p>


.content ul, .content ol {
text-align: left !important;
}


Click the image to go to the source.

1.




2.





Solution (?)








Подробнее здесь: https://stackoverflow.com/questions/794 ... irpy-theme