98 lines
5.7 KiB
HTML
98 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Блок 2. Экспорт и ffmpeg</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<header class="nav">
|
||
<div class="nav-inner">
|
||
<a class="brand" href="index.html">Демо разметки</a>
|
||
<nav>
|
||
<a href="index.html">Содержание</a>
|
||
<a href="00.html">0. Cursor</a>
|
||
<a href="01.html">1. Разметка</a>
|
||
<a class="current" href="02.html">2. Экспорт</a>
|
||
<a href="03.html">3. ИИ</a>
|
||
<a href="04.html">4. Git</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap content">
|
||
<h1>Блок 2. Экспорт и картинки для веба</h1>
|
||
<p>md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.</p>
|
||
<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720">
|
||
|
||
<h2>Из Markdown в другие форматы</h2>
|
||
<p>В Cursor те же расширения, что в VS Code: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.</p>
|
||
|
||
<h3>Markdown PDF</h3>
|
||
<p>Расширение: <strong>Markdown PDF</strong> (<code>yzane.markdown-pdf</code>).</p>
|
||
<p>Умеет из открытого <code>.md</code>:</p>
|
||
<ul>
|
||
<li>PDF</li>
|
||
<li>HTML</li>
|
||
<li>PNG (снимок)</li>
|
||
<li>иногда Markdown (пересобрать)</li>
|
||
</ul>
|
||
<p>Как пользоваться: правый клик по файлу или по превью → <code>Markdown PDF: Export (pdf)</code> / <code>Export (html)</code>.</p>
|
||
<p>Настройки, которые стоит глянуть один раз: формат A4, поля, переносы кода, math, тема/CSS.</p>
|
||
<p>Для доклада PDF — ок. Для сайта лучше HTML.</p>
|
||
|
||
<h3>Mermaid</h3>
|
||
<p>Расширение: <strong>Markdown Preview Mermaid Support</strong> (<code>bierner.markdown-mermaid</code>) — чтобы схемы из блока 1 рисовались в превью.</p>
|
||
<p>Без него блок mermaid так и останется серой простынёй.</p>
|
||
<p>Markdown PDF часто подхватывает mermaid, <strong>если</strong> превью его уже рисует. Экспортировал — открой PDF и проверь схемы.</p>
|
||
|
||
<h3>Что ещё бывает</h3>
|
||
<table>
|
||
<thead><tr><th>Плагин / штука</th><th>Зачем</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Markdown PDF</td><td>быстрый pdf/html из файла</td></tr>
|
||
<tr><td>Markdown Preview Mermaid Support</td><td>схемы в превью</td></tr>
|
||
<tr><td>Markdown All in One</td><td>оглавление, шорткаты</td></tr>
|
||
<tr><td>Pandoc</td><td>md → docx/tex/html, если припрёт Word</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Для сегодняшнего круга хватает <strong>Markdown PDF + Mermaid</strong>.</p>
|
||
|
||
<h2>ffmpeg — картинки для вёрстки</h2>
|
||
<p>ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.</p>
|
||
<p>Разбор «что это вообще такое» лучше смотреть тут (очень советую):</p>
|
||
<p><strong><a href="https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN">FFmpeg — крутое видео</a></strong></p>
|
||
<p>Нам из всего комбайна — узкий кусок: <strong>для сайта</strong>. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем <strong>WebP</strong>.</p>
|
||
<p>Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.</p>
|
||
|
||
<pre><code>ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp</code></pre>
|
||
<pre><code>ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp</code></pre>
|
||
|
||
<table>
|
||
<thead><tr><th>Кусок</th><th>Смысл</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>-i ...</code></td><td>вход</td></tr>
|
||
<tr><td><code>-vf "scale=800:-1"</code></td><td>ширина 800, высота сама</td></tr>
|
||
<tr><td><code>-c:v libwebp</code></td><td>кодек WebP</td></tr>
|
||
<tr><td><code>-quality 80</code></td><td>качество, нормальный компромисс</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>Папку <code>img_web</code> создай заранее.</p>
|
||
<pre><code>ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp</code></pre>
|
||
<pre><code>ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp</code></pre>
|
||
<p>В HTML потом:</p>
|
||
<pre><code><img src="img_web/cover.webp" alt="обложка" width="800"></code></pre>
|
||
<p>Исходники в <code>img/</code> не трогаем — это «негатив». На страницу отдаём WebP.</p>
|
||
<p>Проверка: в терминале <code>ffmpeg -version</code>.</p>
|
||
<p>Дальше: кто напишет md за нас, если лень — <a href="03.html">блок 3</a>.</p>
|
||
|
||
<div class="pager">
|
||
<a href="01.html">← Блок 1. Разметка</a>
|
||
<a href="03.html">Блок 3. ИИ →</a>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html>
|