http://kenji.blog/zh-tw/tags/html/Recent content in HTML on kenji.blogHugo -- gohugo.iozh-twkenjinoteThu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/zh-tw/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-tw/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-tw/p/%E5%9C%A8-hugo-%E4%B8%AD%E4%BD%BF%E7%94%A8-html-%E6%A8%99%E7%B1%A4/Tue, 17 Jan 2023 19:20:32 +0900http://kenji.blog/zh-tw/p/%E5%9C%A8-hugo-%E4%B8%AD%E4%BD%BF%E7%94%A8-html-%E6%A8%99%E7%B1%A4/<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>