mirror of
https://codeberg.org/Kankys/ApolloNvim2025.git
synced 2026-11-11 08:34:36 +01:00
1101 lines
50 KiB
HTML
1101 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="cs">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>📚 Tutoriály | ApolloNvim</title>
|
||
|
||
<!-- Meta description & SEO -->
|
||
<meta
|
||
name="description"
|
||
content="Průvodci a návody pro ApolloNvim. Naučte se efektivně používat Neovim s praktickými tutoriály od instalace po pokročilé funkce."
|
||
/>
|
||
<meta name="author" content="Lukáš Kaňka" />
|
||
<meta
|
||
name="keywords"
|
||
content="ApolloNvim, Neovim, tutoriály, návody, průvodce, Lua, pluginy, konfigurace"
|
||
/>
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website" />
|
||
<meta
|
||
property="og:url"
|
||
content="https://apollo-nvim.lukan.cz/tutorialy.html"
|
||
/>
|
||
<meta property="og:title" content="📚 Tutoriály | ApolloNvim" />
|
||
<meta
|
||
property="og:description"
|
||
content="Průvodci a návody pro ApolloNvim. Naučte se efektivně používat Neovim."
|
||
/>
|
||
<meta property="og:image" content="../img/apollonvim.jpg" />
|
||
<meta property="og:locale" content="cs_CZ" />
|
||
<meta property="og:site_name" content="ApolloNvim" />
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="📚 Tutoriály | ApolloNvim" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="Průvodci a návody pro ApolloNvim. Naučte se efektivně používat Neovim."
|
||
/>
|
||
<meta name="twitter:image" content="../img/apollonvim.jpg" />
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<!-- Stylesheets -->
|
||
<link rel="stylesheet" href="../css/style.css" />
|
||
<link rel="stylesheet" href="../css/animations.css" />
|
||
|
||
<!-- Canonical -->
|
||
<link
|
||
rel="canonical"
|
||
href="https://apollo-nvim.lukan.cz/tutorialy.html"
|
||
/>
|
||
|
||
<style>
|
||
/* ── Tutorial grid ── */
|
||
.tutorial-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.tutorial-card {
|
||
position: relative;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.75rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
transition:
|
||
transform var(--transition),
|
||
border-color var(--transition),
|
||
box-shadow var(--transition);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tutorial-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
pointer-events: none;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--purple) 0%,
|
||
transparent 60%
|
||
);
|
||
opacity: 0;
|
||
transition: opacity var(--transition);
|
||
}
|
||
|
||
.tutorial-card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: var(--purple);
|
||
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
|
||
}
|
||
|
||
.tutorial-card:hover::before {
|
||
opacity: 0.04;
|
||
}
|
||
|
||
.tutorial-card__number {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
color: var(--purple);
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.tutorial-card__title {
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
line-height: 1.4;
|
||
margin: 0;
|
||
}
|
||
|
||
.tutorial-card__desc {
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
margin: 0;
|
||
}
|
||
|
||
.tutorial-card__footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.tutorial-card__link {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
color: var(--purple);
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
transition:
|
||
gap var(--transition),
|
||
color var(--transition);
|
||
}
|
||
|
||
.tutorial-card__link:hover {
|
||
gap: 0.6rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.tutorial-card__link::after {
|
||
content: "→";
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ── Tips section ── */
|
||
.tips-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.tip-box {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-left: 4px solid var(--cyan);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.25rem 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
transition:
|
||
border-color var(--transition),
|
||
box-shadow var(--transition);
|
||
}
|
||
|
||
.tip-box:hover {
|
||
border-left-color: var(--purple);
|
||
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
|
||
}
|
||
|
||
.tip-box__label {
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--cyan);
|
||
}
|
||
|
||
.tip-box__title {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.tip-box__desc {
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── CTA section ── */
|
||
.cta-section {
|
||
text-align: center;
|
||
padding: 4rem 2rem;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(139, 92, 246, 0.08) 0%,
|
||
rgba(6, 182, 212, 0.05) 100%
|
||
);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.cta-section__title {
|
||
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.cta-section__subtitle {
|
||
font-size: 1rem;
|
||
color: var(--text-muted);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
/* Animate on scroll */
|
||
.animate-on-scroll {
|
||
opacity: 0;
|
||
transform: translateY(24px);
|
||
transition:
|
||
opacity 0.55s ease,
|
||
transform 0.55s ease;
|
||
}
|
||
|
||
.animate-on-scroll.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.tutorial-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.tips-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- ===================== NAVBAR ===================== -->
|
||
<header class="navbar" id="navbar">
|
||
<nav class="navbar__inner" aria-label="Hlavní navigace">
|
||
<a
|
||
href="../index.html"
|
||
class="navbar__logo"
|
||
aria-label="ApolloNvim – Domů"
|
||
>🚀 <span>ApolloNvim</span></a>
|
||
<ul class="navbar__links" id="nav-links" role="list">
|
||
<li><a href="../index.html">Domů</a></li>
|
||
<li><a href="./instalace.html">Instalace</a></li>
|
||
<li><a href="./pluginy.html">Pluginy</a></li>
|
||
<li>
|
||
<a
|
||
href="./tutorialy.html"
|
||
class="active"
|
||
aria-current="page"
|
||
>Tutoriály</a>
|
||
</li>
|
||
<li><a href="./novinky.html">Novinky</a></li>
|
||
<li><a href="./zkratky.html">Zkratky</a></li>
|
||
</ul>
|
||
<button
|
||
id="hamburger"
|
||
class="navbar__hamburger"
|
||
aria-label="Otevřít menu"
|
||
aria-expanded="false"
|
||
aria-controls="mobile-menu"
|
||
>
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</nav>
|
||
<div class="navbar__mobile" id="mobile-menu" hidden>
|
||
<ul role="list">
|
||
<li><a href="../index.html">Domů</a></li>
|
||
<li><a href="./instalace.html">Instalace</a></li>
|
||
<li><a href="./pluginy.html">Pluginy</a></li>
|
||
<li>
|
||
<a href="./tutorialy.html" class="active">Tutoriály</a>
|
||
</li>
|
||
<li><a href="./novinky.html">Novinky</a></li>
|
||
<li><a href="./zkratky.html">Zkratky</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<!-- ===================== HERO ===================== -->
|
||
<section
|
||
class="hero"
|
||
aria-labelledby="hero-title"
|
||
style="min-height: 42vh"
|
||
>
|
||
<canvas id="particles-canvas" aria-hidden="true"></canvas>
|
||
<div
|
||
class="hero__content"
|
||
style="padding-top: 6rem; padding-bottom: 4rem"
|
||
>
|
||
<div class="hero__badge">
|
||
<span>📚 Průvodci & Návody</span>
|
||
</div>
|
||
<h1 id="hero-title" class="hero__title">Tutoriály</h1>
|
||
<p class="hero__subtitle">
|
||
Průvodci a návody pro ApolloNvim
|
||
</p>
|
||
<p>Na stránce se pracuje pro prohlédnutí tutoriálu prosím navštivvte náš repozitář na <a href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials" target="_blank">Codeberg</a>. Omlouváme se za případné nepříjemnosti.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== TUTORIAL GRID ===================== -->
|
||
<section class="section" aria-labelledby="tutorials-title">
|
||
<div class="container">
|
||
<header class="section-title section-title--center">
|
||
<h2 id="tutorials-title">Všechny tutoriály</h2>
|
||
<p class="section__subtitle section__subtitle--center">
|
||
Krok za krokem od instalace až po pokročilé workflow
|
||
</p>
|
||
<div class="section-title__line"></div>
|
||
</header>
|
||
|
||
<div class="tutorial-grid" style="margin-top: 3rem">
|
||
<!-- 01 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-01-title"
|
||
>
|
||
<span class="tutorial-card__number">01</span>
|
||
<h3 id="tut-01-title" class="tutorial-card__title">
|
||
Jak nainstalovat vim.plug
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Instalace package manageru plug.vim do Neovim –
|
||
základ pro správu všech pluginů.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--purple">Instalace</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Jak nainstalovat vim.plug"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 02 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-02-title"
|
||
>
|
||
<span class="tutorial-card__number">02</span>
|
||
<h3 id="tut-02-title" class="tutorial-card__title">
|
||
Klávesové zkratky
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Přehled výchozích klávesových zkratek Neovim pro
|
||
produktivní každodenní práci.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--cyan">Základy</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Klávesové zkratky"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 03 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-03-title"
|
||
>
|
||
<span class="tutorial-card__number">03</span>
|
||
<h3 id="tut-03-title" class="tutorial-card__title">
|
||
Jak nainstalovat Codeium
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Instalace AI asistenta Codeium zdarma –
|
||
inteligentní doplňování kódu přímo v editoru.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--green">AI</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Jak nainstalovat Codeium"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 04 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-04-title"
|
||
>
|
||
<span class="tutorial-card__number">04</span>
|
||
<h3 id="tut-04-title" class="tutorial-card__title">
|
||
Jak nainstalovat Telescope
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Fuzzy finder pro Neovim – rychlé vyhledávání
|
||
souborů, symbolů a příkazů.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--purple">Pluginy</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Jak nainstalovat Telescope"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 05 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-05-title"
|
||
>
|
||
<span class="tutorial-card__number">05</span>
|
||
<h3 id="tut-05-title" class="tutorial-card__title">
|
||
Barevná schémata
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Jak nastavit a přepínat barevná témata pro
|
||
pohodlnou práci ve dne i v noci.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--pink">Vzhled</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Barevná schémata"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 06 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-06-title"
|
||
>
|
||
<span class="tutorial-card__number">06</span>
|
||
<h3 id="tut-06-title" class="tutorial-card__title">
|
||
Autosave konfigurace
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Nastavení automatického ukládání – nikdy
|
||
nepřijdete o neuloženou práci.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--orange">Konfigurace</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Autosave konfigurace"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 07 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-07-title"
|
||
>
|
||
<span class="tutorial-card__number">07</span>
|
||
<h3 id="tut-07-title" class="tutorial-card__title">
|
||
Kopírování a vkládání
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Kopírování z externích zdrojů do Neovim –
|
||
systémová schránka bez kompromisů.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--cyan">Základy</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Kopírování a vkládání"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 08 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-08-title"
|
||
>
|
||
<span class="tutorial-card__number">08</span>
|
||
<h3 id="tut-08-title" class="tutorial-card__title">
|
||
Markdown syntax
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Práce s Markdown v Neovim – zvýraznění syntaxe,
|
||
náhled a Tree-sitter podpora.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--yellow">Markdown</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Markdown syntax"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 09 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-09-title"
|
||
>
|
||
<span class="tutorial-card__number">09</span>
|
||
<h3 id="tut-09-title" class="tutorial-card__title">
|
||
init.vim základní nastavení
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Konfigurace základního nastavení – od čísel
|
||
řádků po odsazení a kódování.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--orange">Konfigurace</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – init.vim základní nastavení"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 10 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-10-title"
|
||
>
|
||
<span class="tutorial-card__number">10</span>
|
||
<h3 id="tut-10-title" class="tutorial-card__title">
|
||
vim-fugitive – Git v Neovim
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Správa Gitu přímo v editoru – commit, diff,
|
||
blame a více bez opuštění Neovim.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--green">Git</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – vim-fugitive Git v Neovim"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 11 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-11-title"
|
||
>
|
||
<span class="tutorial-card__number">11</span>
|
||
<h3 id="tut-11-title" class="tutorial-card__title">
|
||
Gitsigns
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Zobrazení git změn přímo v kódu – přidané,
|
||
upravené a smazané řádky v reálném čase.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--green">Git</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Gitsigns"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 12 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-12-title"
|
||
>
|
||
<span class="tutorial-card__number">12</span>
|
||
<h3 id="tut-12-title" class="tutorial-card__title">
|
||
Neovim s Zellij
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Terminálový multiplexor pro lepší workflow –
|
||
panely, záložky a sdílené sezení.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--cyan">Workflow</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Neovim s Zellij"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 13 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-13-title"
|
||
>
|
||
<span class="tutorial-card__number">13</span>
|
||
<h3 id="tut-13-title" class="tutorial-card__title">
|
||
Relativní čísla řádků
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Efektivní navigace pomocí relativních čísel –
|
||
rychlé skoky na přesné řádky.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--purple">Produktivita</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Relativní čísla řádků"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 14 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-14-title"
|
||
>
|
||
<span class="tutorial-card__number">14</span>
|
||
<h3 id="tut-14-title" class="tutorial-card__title">
|
||
Inline Parameters
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Alternativa pro zobrazení parametrů funkcí přímo
|
||
v kódu pro lepší přehlednost.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--purple">Pluginy</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Inline Parameters"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 15 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-15-title"
|
||
>
|
||
<span class="tutorial-card__number">15</span>
|
||
<h3 id="tut-15-title" class="tutorial-card__title">
|
||
Kopírování a vkládání (pokročilé)
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Pokročilé techniky práce se schránkou –
|
||
registry, makra a cross-aplikační vkládání.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--pink">Pokročilé</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Kopírování a vkládání pokročilé"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 16 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-16-title"
|
||
>
|
||
<span class="tutorial-card__number">16</span>
|
||
<h3 id="tut-16-title" class="tutorial-card__title">
|
||
Instalace nejnovějšího Neovim
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Aktualizace Neovim na Linuxu – manuální
|
||
instalace nejnovější verze z AppImage nebo
|
||
zdrojového kódu.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--purple">Instalace</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Instalace nejnovějšího Neovim"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 17 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-17-title"
|
||
>
|
||
<span class="tutorial-card__number">17</span>
|
||
<h3 id="tut-17-title" class="tutorial-card__title">
|
||
Jak opravit nefunkční Prettier
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Řešení problémů s formátováním – diagnostika a
|
||
oprava nejčastějších chyb Prettier.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--orange">Řešení problémů</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Jak opravit nefunkční Prettier"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 18 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-18-title"
|
||
>
|
||
<span class="tutorial-card__number">18</span>
|
||
<h3 id="tut-18-title" class="tutorial-card__title">
|
||
Konfigurace Lua
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Základy konfigurace v jazyce Lua – moduly,
|
||
tabulky, funkce a migrace z Vimscript.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--orange">Konfigurace</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Konfigurace Lua"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 19 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-19-title"
|
||
>
|
||
<span class="tutorial-card__number">19</span>
|
||
<h3 id="tut-19-title" class="tutorial-card__title">
|
||
NERDTree konfigurace
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Tipy a triky pro souborový panel NERDTree –
|
||
klávesové zkratky, skrytí souborů a integrace.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--purple">Pluginy</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – NERDTree konfigurace"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 20 -->
|
||
<article
|
||
class="tutorial-card animate-on-scroll"
|
||
aria-labelledby="tut-20-title"
|
||
>
|
||
<span class="tutorial-card__number">20</span>
|
||
<h3 id="tut-20-title" class="tutorial-card__title">
|
||
Náhled Markdown v nvim
|
||
</h3>
|
||
<p class="tutorial-card__desc">
|
||
Jak zobrazit náhled markdown souborů v
|
||
prohlížeči přímo z Neovim v reálném čase.
|
||
</p>
|
||
<div class="tutorial-card__footer">
|
||
<span class="badge badge--yellow">Markdown</span>
|
||
<a
|
||
href="#"
|
||
class="tutorial-card__link"
|
||
aria-label="Číst více – Náhled Markdown v nvim"
|
||
target="_blank">Číst více</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<!-- /.tutorial-grid -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
|
||
<!-- ===================== TIPS SECTION ===================== -->
|
||
<section class="section section--alt" aria-labelledby="tips-title">
|
||
<div class="container">
|
||
<header class="section-title section-title--center">
|
||
<h2 id="tips-title">💡 Rychlé tipy</h2>
|
||
<p class="section__subtitle section__subtitle--center">
|
||
Kratké rady pro každodenní práci s ApolloNvim
|
||
</p>
|
||
<div class="section-title__line"></div>
|
||
</header>
|
||
|
||
<div class="tips-grid" style="margin-top: 3rem">
|
||
<!-- Tip 1 -->
|
||
<div class="tip-box animate-on-scroll">
|
||
<span class="tip-box__label">💡 Tip #1</span>
|
||
<h3 class="tip-box__title">
|
||
Oprava Markdown syntax
|
||
</h3>
|
||
<p class="tip-box__desc">
|
||
Pro správnou syntax highlighting Markdown v
|
||
Neovim je potřeba nainstalovat Tree-sitter
|
||
parser příkazem:
|
||
</p>
|
||
<div
|
||
class="terminal-block"
|
||
style="margin-top: 0.75rem"
|
||
>
|
||
<div class="terminal-block__header">
|
||
<span
|
||
class="terminal-block__dot terminal-block__dot--red"></span>
|
||
<span
|
||
class="terminal-block__dot terminal-block__dot--yellow"></span>
|
||
<span
|
||
class="terminal-block__dot terminal-block__dot--green"></span>
|
||
<span class="terminal-block__title">Neovim</span>
|
||
</div>
|
||
<div class="terminal-block__body">
|
||
<code>:TSInstall markdown</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tip 2 -->
|
||
<div class="tip-box animate-on-scroll">
|
||
<span class="tip-box__label">💡 Tip #2</span>
|
||
<h3 class="tip-box__title">AutoSave nastavení</h3>
|
||
<p class="tip-box__desc">
|
||
Plugin <code>auto-save.nvim</code> umožňuje
|
||
automatické ukládání s nastavitelným zpožděním
|
||
(delay v milisekundách). Přidejte do konfigurace
|
||
pluginu <code>debounce_delay = 1000</code> pro
|
||
uložení 1 sekundu po ukončení psaní.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tip 3 -->
|
||
<div class="tip-box animate-on-scroll">
|
||
<span class="tip-box__label">💡 Tip #3</span>
|
||
<h3 class="tip-box__title">
|
||
Colorscheme auto-start
|
||
</h3>
|
||
<p class="tip-box__desc">
|
||
Chcete-li, aby se barevné téma načítalo
|
||
automaticky při spuštění, přidejte do
|
||
<code>init.vim</code>:
|
||
</p>
|
||
<div
|
||
class="terminal-block"
|
||
style="margin-top: 0.75rem"
|
||
>
|
||
<div class="terminal-block__header">
|
||
<span
|
||
class="terminal-block__dot terminal-block__dot--red"></span>
|
||
<span
|
||
class="terminal-block__dot terminal-block__dot--yellow"></span>
|
||
<span
|
||
class="terminal-block__dot terminal-block__dot--green"></span>
|
||
<span class="terminal-block__title">init.vim</span>
|
||
</div>
|
||
<div class="terminal-block__body">
|
||
<code
|
||
>colorscheme dracula<br />autocmd
|
||
VimEnter * colorscheme dracula</code
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tip 4 -->
|
||
<div class="tip-box animate-on-scroll">
|
||
<span class="tip-box__label">💡 Tip #4</span>
|
||
<h3 class="tip-box__title">Kde najít init.vim</h3>
|
||
<p class="tip-box__desc">
|
||
Konfigurační soubor Neovim se nachází na různých
|
||
místech podle OS:<br />
|
||
<strong>Linux/Mac:</strong>
|
||
<code>~/.config/nvim/init.vim</code><br />
|
||
<strong>Windows:</strong>
|
||
<code>~/AppData/Local/nvim/init.vim</code><br />
|
||
Lua alternativa: <code>init.lua</code> ve
|
||
stejném adresáři.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tip 5 -->
|
||
<div class="tip-box animate-on-scroll">
|
||
<span class="tip-box__label">💡 Tip #5</span>
|
||
<h3 class="tip-box__title">
|
||
Vkládání z externích zdrojů
|
||
</h3>
|
||
<p class="tip-box__desc">
|
||
Pro vložení textu ze systémové schránky
|
||
(zkopírovaného z prohlížeče, jiné aplikace
|
||
apod.) použijte v INSERT módu kombinaci kláves
|
||
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.
|
||
Neovim tak správně vloží text bez automatické
|
||
indentace.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.tips-grid -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
|
||
<!-- ===================== CTA ===================== -->
|
||
<section class="section" aria-labelledby="cta-title">
|
||
<div class="container">
|
||
<div class="cta-section animate-on-scroll">
|
||
<p
|
||
style="font-size: 2.5rem; margin-bottom: 1rem"
|
||
aria-hidden="true"
|
||
>
|
||
✈️
|
||
</p>
|
||
<h2 id="cta-title" class="cta-section__title">
|
||
Chybí vám nějaký tutoriál?
|
||
</h2>
|
||
<p class="cta-section__subtitle">
|
||
Napište nám na Telegram a my ho přidáme do seznamu!
|
||
</p>
|
||
<a
|
||
href="https://t.me/apollonvim"
|
||
class="btn-primary"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="Otevřít Telegram ApolloNvim (otevře se v novém okně)"
|
||
>
|
||
<span>✈️</span> Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ===================== FOOTER ===================== -->
|
||
<footer class="footer" role="contentinfo">
|
||
<div class="container">
|
||
<div class="footer__grid">
|
||
<div class="footer__brand">
|
||
<a
|
||
href="../index.html"
|
||
class="footer__logo"
|
||
aria-label="ApolloNvim – Domů"
|
||
>
|
||
🚀 ApolloNvim
|
||
</a>
|
||
<p class="footer__tagline">
|
||
Rychlý, lehký a plně konfigurovatelný Neovim pro
|
||
Front-End vývojáře.
|
||
</p>
|
||
<p
|
||
class="footer__love"
|
||
aria-label="Vytvořeno s láskou a klávesnicí"
|
||
>
|
||
Made with ❤️ and ⌨️
|
||
</p>
|
||
</div>
|
||
|
||
<nav class="footer__nav" aria-label="Patička navigace">
|
||
<h4 class="footer__nav-title">Navigace</h4>
|
||
<ul class="footer__nav-list" role="list">
|
||
<li>
|
||
<a href="../index.html" class="footer__link"
|
||
>Domů</a>
|
||
</li>
|
||
<li>
|
||
<a href="./instalace.html" class="footer__link"
|
||
>Instalace</a>
|
||
</li>
|
||
<li>
|
||
<a href="./pluginy.html" class="footer__link"
|
||
>Pluginy</a>
|
||
</li>
|
||
<li>
|
||
<a href="./tutorialy.html" class="footer__link"
|
||
>Tutoriály</a>
|
||
</li>
|
||
<li>
|
||
<a href="./novinky.html" class="footer__link"
|
||
>Novinky</a>
|
||
</li>
|
||
<li>
|
||
<a href="./zkratky.html" class="footer__link"
|
||
>Zkratky</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="footer__links">
|
||
<h4 class="footer__nav-title">Externe</h4>
|
||
<ul class="footer__nav-list" role="list">
|
||
<li>
|
||
<a
|
||
href="https://t.me/apollonvim"
|
||
class="footer__link"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="Telegram (otevře se v novém okně)"
|
||
>
|
||
✈️ Telegram
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://codeberg.org/ApolloNvim/ApolloNvim2025"
|
||
class="footer__link"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="Codeberg repozitář (otevře se v novém okně)"
|
||
>
|
||
🏔️ Codeberg
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://lukaskanka.cz/"
|
||
class="footer__link"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="Web autora (otevře se v novém okně)"
|
||
>
|
||
🧑💻 Web autora
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer__bottom">
|
||
<p class="footer__copy">
|
||
Copyright © 2024 – 2026 🚀 ApolloNvim / Lukáš
|
||
Kaňka
|
||
</p>
|
||
<p class="footer__version">
|
||
<span class="badge badge--version">v26.05</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ===================== SCRIPTS ===================== -->
|
||
<script src="../js/particles.js"></script>
|
||
<script src="../js/main.js"></script>
|
||
<script>
|
||
// Animate on scroll observer
|
||
(function () {
|
||
const elements =
|
||
document.querySelectorAll(".animate-on-scroll");
|
||
if (!elements.length) return;
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add("visible");
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" },
|
||
);
|
||
|
||
elements.forEach((el, i) => {
|
||
el.style.transitionDelay = (i % 4) * 80 + "ms";
|
||
observer.observe(el);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|