http://kenji.blog/zh-cn/tags/html/Recent content in HTML on kenji.blogHugo -- gohugo.iozh-cnkenjinoteThu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/zh-cn/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/Thu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/zh-cn/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/<img src="http://kenji.blog/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/img.png" alt="Featured image of post 使用HTML制作演示文稿的方法（reveal.js）" /><h1 id="使用html制作演示文稿的方法">使用HTML制作演示文稿的方法 </h1><p>reveal.js 是一个使用 HTML 和 Markdown 的演示文稿制作工具，具有以下功能：</p> <ul> <li>公式、动画、滑动操作等丰富多彩的演示功能</li> <li>可以自定义主题和布局</li> <li>支持鼠标、键盘、触摸板等多种设备的导航功能</li> <li>提供幻灯片自动播放、嵌入视频等高级功能</li> <li>可以导出为 PDF 格式</li> </ul> <p>通过这些功能，用户可以轻松创建交互式且富有吸引力的演示文稿。</p> <h1 id="revealjs-的安装与使用方法">reveal.js 的安装与使用方法 </h1><p>最简单的使用方法是从以下页面下载整个 ZIP 文件并解压缩。</p> <ol> <li>打开 <a class="link" href="https://revealjs.com/installation" target="_blank" rel="noopener" >https://revealjs.com/installation</a> ，从链接下载 <code>master.zip</code></li> <li>在浏览器中打开解压后文件夹内的 index.html</li> <li>修改 index.html，创建自己的演示文稿资料</li> </ol> <p>※可以参考 demo.html，里面写有用于演示的 HTML 代码。</p> <h1 id="应用方法">应用方法 </h1><p>制作好的演示文稿可以直接作为网页公开，也可以导出为 PDF。 另外，由于演示文稿的源码是文本，因此很容易用版本控制系统进行管理。</p> <p>似乎还可以使用 Markdown 格式来创建演示资料。</p> <h1 id="参考资料">参考资料 </h1><ul> <li><a class="link" href="https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6" target="_blank" rel="noopener" >今后的演示资料就用 reveal.js 吧</a></li> <li><a class="link" href="https://qiita.com/jkjoluvjlajelljicvjzojieoaid/items/01cd7ff819bc2e69b652" target="_blank" rel="noopener" >Markdown 语法示例一览</a></li> </ul>http://kenji.blog/zh-cn/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/Tue, 17 Jan 2023 19:20:32 +0900http://kenji.blog/zh-cn/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/<img src="http://kenji.blog/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/img.png" alt="Featured image of post 在HUGO中使用HTML标签" /><p>HUGO默认情况下是不允许在文章中使用HTML标签的，但是在config.toml中添加以下描述就可以使用了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span> </span></span></code></pre></td></tr></table> </div> </div><p>参考: <a class="link" href="https://gohugo.io/getting-started/configuration-markup" target="_blank" rel="noopener" >Configure Markup</a></p>