Научу вас писать красивые статьи в стиле самородков

внешний интерфейс
Научу вас писать красивые статьи в стиле самородков

предисловие

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

Пример

1. Стиль фона

пример стиля

<div style='background: -webkit-linear-gradient(top, transparent 19px, #ececec 20px), -webkit-linear-gradient(left, transparent 19px, #ececec 20px);
            background-size: 20px 20px;'>
            这里是文章所有的内容
            </div>

2. Второстепенный стиль заголовка

пример стиля

<h2 style='color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(127, 127, 127); font-size: 1.3em;'><span style='font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(127, 127, 127); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;'>总结</span></h2>

3. Стиль описания документа

пример стиля

<blockquote style=' padding: 10px 10px 10px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid #10c921; background: rgb(239, 235, 233);'>
    <p>我喜欢摸鱼<p>
</blockquote>

4. Стиль изображения

<img style='width: auto;
    max-width: 100%;
    border-radius: 12px;
    display: block;
    margin: 20px auto;
    object-fit: contain;
    box-shadow: 2px 4px 7px #999;' src='https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/28/1711f45ff67027c1~tplv-t2oaga2asx-image.image'>

Следует отметить, что исходный код, отображаемый Nuggets, выглядит следующим образом.

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/28/1711fbcfa641412e~tplv-t2oaga2asx-image.image)

Нам нужно вручную написать тег img tag, чтобы скопировать ссылку в src, а затем добавить стиль

Преобразование программы

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

Адрес веб-сайта:преобразование уценки

Выберите тему, загрузите файл уценки, верните обработанную статью и скопируйте ее прямо в Nuggets.

Уведомление

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

Например: Я написал статью здесь

Я скопирую все статьи в txt файл и загружу на обработку

Уведомление

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

посмотреть все статьи хочу этот стиль

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

Оригинальный стиль Наггетс

После установки плагина

Я чувствую, что я собираюсь на небеса в одно мгновение

Плагины могут поддерживать несколько тем

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

Перед открытием: есть боковые панели с обеих сторон

После открытия: боковая панель исчезает, и чтение очень хорошее!

Установить плагин

Адрес плагина:JTool

После скачивания распакуйте его и зайдите в Google Chrome

Затем вы можете использовать
Правая кнопка мыши, просмотр функций, переключение тем и включение режима погружения
Категории