home/wahyd4.github.com
2
0
Fork 0
mirror of https://github.com/wahyd4/wahyd4.github.com.git synced 2026-08-09 05:15:56 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
wahyd4.github.com/2017/10/12/caddy-markdown/index.html
T

572 lines
33 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM=" crossorigin="anonymous">
<script class="next-config" data-name="main" type="application/json">{"hostname":"toozhao.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.28.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12,"b2t":true,"scrollpercent":true},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":true,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":false,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":5,"unescape":false,"preload":false,"trigger":"auto"}}</script><script src="/js/config.js" defer></script>
<meta name="description" content="建议阅读此篇文章前，先阅读本博客的前篇 Caddy上手文章 ——【快速上手更简单的 Web 服务器 —— Caddy】 本篇文章我们将利用 Caddy Web 服务器的Markdown 插件和它强大的网页模板功能，在直接托管，渲染显示Markdown文件。 现在得益于 Markdown 的简单易用，越来越多的文档都在使用使用 Markdown来编写。像我们常用的 Github、GitBook 等流">
<meta property="og:type" content="article">
<meta property="og:title" content="使用 Caddy Web服务器显示 Markdown 文件">
<meta property="og:url" content="https://toozhao.com/2017/10/12/caddy-markdown/">
<meta property="og:site_name" content="大染志">
<meta property="og:description" content="建议阅读此篇文章前，先阅读本博客的前篇 Caddy上手文章 ——【快速上手更简单的 Web 服务器 —— Caddy】 本篇文章我们将利用 Caddy Web 服务器的Markdown 插件和它强大的网页模板功能，在直接托管，渲染显示Markdown文件。 现在得益于 Markdown 的简单易用，越来越多的文档都在使用使用 Markdown来编写。像我们常用的 Github、GitBook 等流">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://toozhao.com/files.png">
<meta property="og:image" content="https://toozhao.com/raw.png">
<meta property="og:image" content="https://toozhao.com/css.png">
<meta property="og:image" content="https://toozhao.com/final.png">
<meta property="og:image" content="https://toozhao.com/another.png">
<meta property="article:published_time" content="2017-10-12T05:15:00.000Z">
<meta property="article:modified_time" content="2026-08-04T10:47:21.898Z">
<meta property="article:author" content="Junv">
<meta property="article:tag" content="caddy">
<meta property="article:tag" content="markdown">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://toozhao.com/files.png">
<link rel="canonical" href="https://toozhao.com/2017/10/12/caddy-markdown/">
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://toozhao.com/2017/10/12/caddy-markdown/","path":"2017/10/12/caddy-markdown/","title":"使用 Caddy Web服务器显示 Markdown 文件"}</script>
<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>使用 Caddy Web服务器显示 Markdown 文件 | 大染志</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.1.0/medium-zoom.min.js" integrity="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" crossorigin="anonymous" defer></script>
<script src="/js/utils.js" defer></script><script src="/js/sidebar.js" defer></script><script src="/js/next-boot.js" defer></script><script src="/js/bookmark.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.5.0/search.js" integrity="sha256-xFC6PJ82SL9b3WkGjFavNiA9gm5z6UBxWPiu4CYjptg=" crossorigin="anonymous" defer></script>
<script src="/js/third-party/search/local-search.js" defer></script>
<style>
/* =========================================================
Toozhao blog custom styles (injected via head.njk)
阅读体验优化 — 微信读书风格
========================================================= */
html { scroll-behavior: smooth; }
/* 主内容阅读宽度 */
.post-block, .posts-expand .post-block {
max-width: 760px;
}
.post-title {
font-size: 1.7em;
font-weight: 700;
letter-spacing: 0.01em;
}
.post-meta { color: #999; font-size: 0.9em; }
.post-body {
font-size: 1.05em;
line-height: 1.9;
letter-spacing: 0.02em;
color: #333;
}
.post-body p {
margin: 1.1em 0;
text-align: justify;
text-justify: inter-ideograph;
}
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
line-height: 1.4;
margin-top: 1.6em;
margin-bottom: 0.8em;
font-weight: 600;
color: #222;
}
.post-body h2::before, .post-body h3::before, .post-body h4::before {
content: '';
display: inline-block;
width: 4px;
height: 0.9em;
background: #4a90d9;
border-radius: 2px;
margin-right: 10px;
vertical-align: -0.08em;
}
.post-body img {
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
margin: 0.6em auto;
display: block;
max-width: 100%;
}
.post-body blockquote {
border-left: 4px solid #4a90d9;
background: rgba(74, 144, 217, 0.06);
margin: 1.4em 0;
padding: 0.8em 1.2em;
border-radius: 0 8px 8px 0;
color: #555;
}
.post-body blockquote p { margin: 0.4em 0; }
.post-body a {
color: #2d6cdf;
border-bottom: 1px solid rgba(45, 108, 223, 0.3);
transition: color 0.2s, border-color 0.2s;
}
.post-body a:hover { color: #1a4fae; border-bottom-color: #1a4fae; }
.post-body code {
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
padding: 2px 6px;
font-size: 0.9em;
color: #c7254e;
}
.post-body table {
border-collapse: collapse;
margin: 1.2em auto;
font-size: 0.95em;
}
.post-body table th, .post-body table td {
border: 1px solid #ddd;
padding: 8px 14px;
}
.post-body table th { background: #f5f7fa; font-weight: 600; }
.post-body table tr:nth-child(even) { background: #fafbfc; }
.post-body ul, .post-body ol { padding-left: 1.6em; margin: 0.8em 0; }
.post-body ul li, .post-body ol li { margin: 0.35em 0; }
.post-body hr {
border: none;
border-top: 1px dashed #ccc;
margin: 2em auto;
width: 60%;
}
/* 暗色模式（跟随系统，不依赖 NexT darkmode class） */
@media (prefers-color-scheme: dark) {
body { background: #1b1f24; color: #c8cdd3; }
.post-body { color: #c8cdd3; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { color: #e8eaed; }
.post-body blockquote { background: rgba(74, 144, 217, 0.1); color: #9aa5b1; }
.post-body code { background: rgba(255, 255, 255, 0.1); color: #e88388; }
.post-body table th, .post-body table td { border-color: #3a3f45; }
.post-body table th { background: #2d3238; }
.post-body table tr:nth-child(even) { background: #262a2f; }
.post-meta { color: #777; }
}
::selection { background: rgba(74, 144, 217, 0.25); }
/* 字体调节按钮 */
.font-size-control {
position: fixed;
right: 18px;
bottom: 90px;
z-index: 1000;
background: rgba(0, 0, 0, 0.65);
color: #fff;
border-radius: 20px;
padding: 6px 4px;
display: flex;
flex-direction: column;
gap: 2px;
user-select: none;
}
.font-size-control button {
background: none;
border: none;
color: #fff;
font-size: 13px;
cursor: pointer;
padding: 3px 8px;
opacity: 0.85;
}
.font-size-control button:hover { opacity: 1; }
</style>
<noscript>
<link rel="stylesheet" href="/css/noscript.css">
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="headband"></div>
<main class="main">
<div class="column">
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切换导航栏" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<i class="logo-line"></i>
<p class="site-title">大染志</p>
<i class="logo-line"></i>
</a>
<p class="site-subtitle" itemprop="description">Junv's blog</p>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger" aria-label="搜索" role="button">
<i class="fa fa-search fa-fw fa-lg"></i>
</div>
</div>
</div>
<nav class="site-nav">
<ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
<li class="menu-item menu-item-search">
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
</a>
</li>
</ul>
</nav>
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off" maxlength="80"
placeholder="搜索..." spellcheck="false"
type="search" class="search-input">
</div>
<span class="popup-btn-close" role="button">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div class="search-result-container">
<div class="search-result-icon">
<i class="fa fa-spinner fa-pulse fa-5x"></i>
</div>
</div>
</div>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
文章目录
</li>
<li class="sidebar-nav-overview">
站点概览
</li>
</ul>
<div class="sidebar-panel-container">
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
<div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%89%E8%A3%85-Caddy"><span class="nav-text">安装 Caddy</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9D%E6%AD%A5%E6%B8%B2%E6%9F%93-Markdown"><span class="nav-text">初步渲染 Markdown</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BE%8E%E5%8C%96-Markdown-%E6%96%87%E4%BB%B6"><span class="nav-text">美化 Markdown 文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%BB%E5%8A%A0%E6%96%87%E6%A1%A3%E7%9B%AE%E5%BD%95%E7%B4%A2%E5%BC%95%EF%BC%88TOC%EF%BC%89"><span class="nav-text">添加文档目录索引（TOC）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-text">总结</span></a></li></ol></div>
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image" alt="Junv"
src="/images/avatar.gif">
<p class="site-author-name" itemprop="name">Junv</p>
<div class="site-description" itemprop="description">分享编程、运维、生活与思考</div>
</div>
<div class="site-state-wrap animated">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">310</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">249</span>
<span class="site-state-item-name">标签</span></a>
</div>
</nav>
</div>
<div class="links-of-author animated">
<span class="links-of-author-item">
<a href="https://github.com/wahyd4" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wahyd4" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
</div>
<div class="cc-license animated" itemprop="license">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="main-inner post posts-expand">
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2017/10/12/caddy-markdown/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="Junv">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="大染志">
<meta itemprop="description" content="分享编程、运维、生活与思考">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="使用 Caddy Web服务器显示 Markdown 文件 | 大染志">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
使用 Caddy Web服务器显示 Markdown 文件
</h1>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2017-10-12 16:15:00" itemprop="dateCreated datePublished" datetime="2017-10-12T16:15:00+11:00">2017-10-12</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody"><p>建议阅读此篇文章前，先阅读本博客的前篇 Caddy上手文章 ——【<a href="http://toozhao.com/2017/09/19/caddy/">快速上手更简单的 Web 服务器 —— Caddy</a>】</p>
<p>本篇文章我们将利用 Caddy Web 服务器的Markdown 插件和它强大的网页模板功能，在直接托管，渲染显示Markdown文件。</p>
<p>现在得益于 Markdown 的简单易用，越来越多的文档都在使用使用 Markdown来编写。像我们常用的 Github、GitBook 等流行服务也都在使用 Markdown。那么为什么越来越多的相关技术文档和资料都是使用 Markdown 编写的呢？我觉得所有原因都归于『简单』二字。我们通过一些常用的符号标记，就可以写出格式整齐、漂亮的文档。而不用写繁琐的 HTML。而通过简单的工具转化，我们就可以将 Markdown 文档转成 HTML 的格式。</p>
<h2 id="安装-Caddy"><a href="#安装-Caddy" class="headerlink" title="安装 Caddy"></a>安装 Caddy</h2><p>那现在就让我们来实现这个功能吧，首先你得在你的电脑或者服务器上安装 Caddy，如何安装？请查看之前的文章进行回顾或直接运行如下脚本：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl https://getcaddy.com | bash -s personal</span><br></pre></td></tr></table></figure>
<h2 id="初步渲染-Markdown"><a href="#初步渲染-Markdown" class="headerlink" title="初步渲染 Markdown"></a>初步渲染 Markdown</h2><p>Markdown 作为 Caddy Web 服务器的标准指令，使得我们可以直接在 Caddyfile 配置文件中使用该指令，托管，渲染Markdown 文件。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">0.0.0.0:8080 &#123;</span><br><span class="line"> markdown &#123;</span><br><span class="line"> ext .md .markdown</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这里的配置是说：在我们希望托管 Markdown 文件的服务器地址块中，让服务器对当前目录启用渲染 Markdown 文件的功能，即当我们访问 Markdown 文件时，Caddy 自动将其转化为 HTML 进行展示。下面我将以为我本地的文件作为示例给大家展示效果和截图。</p>
<p><img src="/files.png" alt="files"></p>
<p>如图所示为 Caddyfile 所在目录。可以看到这里有若干子目录，和子目录下面的.md 文件。现在让我们运行 caddy。 在浏览器中访问 <code>http://localhost:8080/0.general/0.general.md</code>文件。可以看到效果如下：</p>
<p><img src="/raw.png" alt="raw"></p>
<p>Caddy 成功的将 Markdown文件以网页的形式进行展示，并且正确显示此了相应的格式和层次结构。但是这里有个美中不足之处，Caddy 渲染出的效果，不够美观。简单一点说，没有 CSS 修饰。</p>
<h3 id="美化-Markdown-文件"><a href="#美化-Markdown-文件" class="headerlink" title="美化 Markdown 文件"></a>美化 Markdown 文件</h3><p>那我们如何将Markdown 文件更加美观的展示呢？由于 Caddy 本身是使用 Golang 进行开发的，因此 Caddy 也将 Go 强大的模板功能提供给了用户。这里我们可以利用 Caddy 模板功能来美化 Markdown 文件。我们将在模板网页中加入特定 CSS 来美化页面。CSS 库来自： <a target="_blank" rel="noopener" href="https://github.com/sindresorhus/github-markdown-css">https://github.com/sindresorhus/github-markdown-css</a></p>
<p>在 Caddyfile 目录下创建一个叫 <code>template.html</code> 的网页文件，添加如下内容:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">html&gt;</span><br><span class="line">html&gt;</span><br><span class="line"></span><br><span class="line">head&gt;</span><br><span class="line"> title&gt;&#123;&#123;.Doc.title&#125;&#125;title&gt;</span><br><span class="line"> link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.css&quot;&gt;</span><br><span class="line"> style&gt;</span><br><span class="line"> .markdown-body &#123;</span><br><span class="line"> box-sizing: border-box;</span><br><span class="line"> min-width: 200px;</span><br><span class="line"> max-width: 980px;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line"> padding: 45px;</span><br><span class="line"> &#125;</span><br><span class="line"> style&gt;</span><br><span class="line">head&gt;</span><br><span class="line"></span><br><span class="line">body&gt;</span><br><span class="line"> div class=&quot;markdown-body&quot;&gt;</span><br><span class="line"> &#123;&#123;.Doc.body&#125;&#125;</span><br><span class="line"> div&gt;</span><br><span class="line">body&gt;</span><br><span class="line">html&gt;</span><br></pre></td></tr></table></figure>
<p>我们的 Markdown 文本内容会在 <code>&lt;div class=&quot;markdown-body&quot;&gt;</code> 中显示。<code>github-markdown-css</code> 库会对类名为 <code>markdown-body</code> 中的内容进行美化。<br><code>.Doc.title</code> 和 <code>.Doc.body</code> 则是网页模板中的动态内容，前者为文档的文件名，而后者为文档中的全部内容。与此同时，我们需要在 Caddyfile 配置文件中添加模板特性。<br>HTML 中而外的 <code>&lt;style&gt;</code>标签是为了，限制页面内容的宽度，和将内容居中显示。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">0.0.0.0:8080 &#123;</span><br><span class="line"> markdown &#123;</span><br><span class="line"> ext .md .markdown</span><br><span class="line"> template template.html <span class="comment">#后面的值即为模板文件的文件地址</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>重启 Caddy 服务器，刷新页面。有没有觉得页面变得更加美观，漂亮了。</p>
<p><img src="/css.png" alt="css"></p>
<h3 id="添加文档目录索引（TOC）"><a href="#添加文档目录索引（TOC）" class="headerlink" title="添加文档目录索引（TOC）"></a>添加文档目录索引（TOC）</h3><p>现在我们的 Markdown 文档已经可以很美观的进行展示了，但是我们还可以做得更好，让用户在第一屏就可以查看当前文档的目录索引，而且可以点击链接进行快速访问和跳转。 这就是我们常见的 TOC 功能。（Table of contents）</p>
<p>为了实现 TOC功能，我们需要引入两个 JS 库：</p>
<ul>
<li>jQuery， 由于 Caddy 在对 Markdown文档进行转化时，没有为h1,h2,h3 这样的标题添加 id属性，而我们的<code>&lt;a&gt;</code>链接跳转，正需要 id 属性。因此，我们需要手动为各级标题添加 id 属性。</li>
<li>tocbot，该 JS 库可以自动生成 TOC 内容。</li>
</ul>
<p>因此修改我们的网页模板成类似以下内容：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">html&gt;</span><br><span class="line">html&gt;</span><br><span class="line">head&gt;</span><br><span class="line"> title&gt;&#123;&#123;.Doc.title&#125;&#125;title&gt;</span><br><span class="line"> script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;script&gt;</span><br><span class="line"> script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/tocbot/3.0.4/tocbot.min.js&quot;&gt;script&gt;</span><br><span class="line"> link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.css&quot;&gt;</span><br><span class="line"> link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/tocbot/3.0.4/tocbot.css&quot; /&gt;</span><br><span class="line"> style&gt;</span><br><span class="line"> .markdown-body &#123;</span><br><span class="line"> box-sizing: border-box;</span><br><span class="line"> min-width: 200px;</span><br><span class="line"> max-width: 980px;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line"> padding: 45px;</span><br><span class="line"> &#125;</span><br><span class="line"> style&gt;</span><br><span class="line"> script&gt;</span><br><span class="line"> $(document).ready(function () &#123;</span><br><span class="line"> //为各级标题自动生成id属性</span><br><span class="line"> $(&quot;h1,h2,h3&quot;).each(function () &#123;</span><br><span class="line"> var hyphenated = $(this).text().replace(/\s/g, &#x27;-&#x27;);</span><br><span class="line"> $(this).attr(&#x27;id&#x27;, hyphenated);</span><br><span class="line"> &#125;);</span><br><span class="line"> // 初始化 toc 内容</span><br><span class="line"> tocbot.init(&#123;</span><br><span class="line"> tocSelector: &#x27;.toc&#x27;, // 放置 toc 内容的容器</span><br><span class="line"> contentSelector: &#x27;.markdown-body&#x27;, // markdown 文档内容所在</span><br><span class="line"> headingSelector: &#x27;h1, h2, h3&#x27;, // 需要索引的标题级别</span><br><span class="line"> positionFixedSelector: &quot;.toc&quot; //将 toc 内容块位置固定。</span><br><span class="line"> &#125;);</span><br><span class="line"> &#125;);</span><br><span class="line"> script&gt;</span><br><span class="line">head&gt;</span><br><span class="line">body&gt;</span><br><span class="line"> div class=&quot;toc&quot;&gt;</span><br><span class="line"> div&gt;</span><br><span class="line"> div class=&quot;markdown-body&quot;&gt;</span><br><span class="line"> &#123;&#123;.Doc.body&#125;&#125;</span><br><span class="line"> div&gt;</span><br><span class="line">body&gt;</span><br><span class="line">html&gt;</span><br></pre></td></tr></table></figure>
<p>保存后，直接刷新页面。我们就可以看到带有 TOC 的 Markdown 文档了。</p>
<p><img src="/final.png" alt="toc"></p>
<p>我们还可以试着访问下另外目录下的 Markdown 文件，可以看到所有 Markdown 文件都带有 TOC 和美观的样式了。</p>
<p><img src="/another.png" alt="monitor"></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>所以，如果你不想把 Markdown文档放到 Github 或者使用 GitBook 来托管，可以试试这种方法，快速搭建一个基于 Caddy 服务器的 Markdown 文档的网站。</p>
</div>
<footer class="post-footer">
<div class="post-copyright">
<ul>
<li class="post-copyright-author">
<strong>本文作者： </strong>Junv
</li>
<li class="post-copyright-link">
<strong>本文链接：</strong>
<a href="https://toozhao.com/2017/10/12/caddy-markdown/" title="使用 Caddy Web服务器显示 Markdown 文件">https://toozhao.com/2017/10/12/caddy-markdown/</a>
</li>
<li class="post-copyright-license">
<strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
</li>
</ul>
</div>
<div class="post-tags">
<a href="/tags/caddy/" rel="tag"># caddy</a>
<a href="/tags/markdown/" rel="tag"># markdown</a>
</div>
<div class="post-nav">
<div class="post-nav-item">
<a href="/2017/09/19/caddy/" rel="prev" title="快速上手更简单的 Web 服务器 —— Caddy">
<i class="fa fa-angle-left"></i> 快速上手更简单的 Web 服务器 —— Caddy
</a>
</div>
<div class="post-nav-item">
<a href="/2025/10/27/wow/" rel="next" title="时光荏苒呀">
时光荏苒呀 <i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</footer>
</article>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
&copy; 2012 –
<span itemprop="copyrightYear">2026</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Junv</span>
</div>
<div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
</div>
</div>
</footer>
<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<div class="sidebar-dimmer"></div>
<div class="back-to-top" role="button" aria-label="返回顶部">
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>
<div class="reading-progress-bar"></div>
<a role="button" class="book-mark-link book-mark-link-fixed"></a>
<noscript>
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>
<script>
/* 字号调节 A- / A / A+（阅读体验） */
(function () {
'use strict';
function initFontSize() {
var postBody = document.querySelector('.post-body');
if (!postBody || document.getElementById('font-size-control')) return;
var bar = document.createElement('div');
bar.id = 'font-size-control';
bar.className = 'font-size-control';
var labels = [['A-', -1], ['A', 0], ['A+', 1]];
var current = 1.0;
labels.forEach(function (item) {
var btn = document.createElement('button');
btn.textContent = item[0];
btn.title = item[0] === 'A-' ? '减小字号' : item[0] === 'A+' ? '增大字号' : '恢复默认';
btn.addEventListener('click', function () {
if (item[1] === 0) current = 1.0;
else current = Math.min(1.4, Math.max(0.8, current + item[1] * 0.1));
postBody.style.fontSize = current + 'em';
});
bar.appendChild(btn);
});
document.body.appendChild(bar);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initFontSize);
} else {
initFontSize();
}
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink