Jekyll2024-01-08T22:43:11-08:00https://chunkitlau.github.io/feed.xmlLiu, Junjie(Chunkit Lau, 刘俊杰)personal descriptionJunjie Liujunjie.liu@connect.ust.hk学术主页使用指南(Academicpages usage guide in Chinese)2022-02-06T00:00:00-08:002022-02-06T00:00:00-08:00https://chunkitlau.github.io/posts/2022/02/academicpages-usage-guide<p>这是中文版学术主页使用指南，旨在搭建一个托管在 <a href="http://github.com">Github</a> 的学术主页。通过开源项目 <a href="https://github.com/academicpages/academicpages.github.io">Academicpages</a> 和 Github 的 Github Pages 服务我们可以搭建一个<strong>免费</strong>、<strong>简约</strong>和<strong>高度定制</strong>的学术主页。</p> <h1 id="入门">入门</h1> <ol> <li>如果没有 <a href="http://github.com">Github</a> 帐户，请注册一个 GitHub 帐户并确认电子邮件。</li> <li>通过单击右上角的“fork”按钮来创建<a href="https://github.com/academicpages/academicpages.github.io">此存储库</a>的分叉。</li> <li>转到存储库的设置（以“代码”开头的选项卡中最右边的项目，应位于“取消监视”下方）。将存储库重命名为“[您的 GitHub 用户名].github.io”，这也是您网站的 URL。</li> <li>设置站点范围的配置并创建内容和元数据。</li> <li>将任何文件（如 PDF、.zip 文件等）上传到 files/ 目录。它们将出现在 https://[你的 GitHub 用户名].github.io/files/example.pdf。</li> <li>通过转到“GitHub 页面”部分中的存储库设置来检查状态。</li> <li>（可选）使用 markdown_generator 文件夹中的 Jupyter 笔记本或 python 脚本从 TSV 文件生成用于出版物和讨论的 markdown 文件。</li> </ol> <p>在 https://academicpages.github.io/ 上查看更多信息。</p> <h2 id="在本地运行">在本地运行</h2> <ol> <li>克隆存储库并进行更新，如上所述。</li> <li>确保安装了 ruby-dev、bundler 和 nodejs：<code class="language-plaintext highlighter-rouge">sudo apt install ruby-dev ruby-bundler nodejs</code>。</li> <li>运行 <code class="language-plaintext highlighter-rouge">bundle clean</code> 清理目录（无需运行 <code class="language-plaintext highlighter-rouge">--force</code>）。</li> <li>运行 <code class="language-plaintext highlighter-rouge">bundle install</code> 来安装 ruby 依赖项。 如果出现错误，请删除 Gemfile.lock 并重试。</li> <li>运行 <code class="language-plaintext highlighter-rouge">bundle exec jekyll liveserve</code> 生成 HTML 并在 <code class="language-plaintext highlighter-rouge">localhost:4000</code> 提供服务，本地服务器将在更改时自动重建和刷新页面。</li> </ol> <h1 id="站点范围的配置">站点范围的配置</h1> <p>站点的主要配置文件 _config.yml 位于基本目录中，它定义了侧边栏中的内容和其他站点范围的功能。 您需要将默认变量替换为关于您自己和您网站的 github 存储库的变量。 顶部菜单的配置文件在 _data/navigation.yml 中。 例如，如果您没有文件夹或博客文章，则可以从该 navigation.yml 文件中删除这些项目，以将它们从标题中删除。</p> <h1 id="创建内容和元数据">创建内容和元数据</h1> <p>对于网站内容，每种类型的内容都有一个 markdown 文件，这些文件存储在 _publications、_talks、_posts、_teaching 或 _pages 等目录中。 例如，每个演讲都是 _talks 目录中的一个 markdown 文件。 每个 markdown 文件的顶部是 YAML 中关于演讲的结构化数据，主题将解析这些数据以做很多很酷的事情。 有关演讲的相同结构化数据用于生成演讲页面上的演讲列表、特定演讲的每个单独页面、简历页面的演讲部分以及您进行演讲的地点地图（如果您运行 /talkmap.py 这个 python 文件或 /talkmap.ipynb 这个 Jupyter notebook 文件，它根据 _talks 目录的内容为地图创建 HTML）。</p> <h2 id="markdown-生成器">markdown 生成器</h2> <p>创建了一组 Jupyter notebook 文件，可将包含有关演讲或演示的结构化数据的 CSV 转换为单独的 markdown 文件，这些文件将针对学术页面模板进行正确格式化。 该目录中的示例 CSV 是用来在 stuartgeiger.com 创建个人网站的那些。 通常的工作流程是保存出版物和演讲的 CSV，然后在这些notebook 中运行代码以生成 markdown 文件，然后提交并将它们推送到 GitHub 存储库。</p> <h1 id="如何编辑网站的-github-存储库">如何编辑网站的 GitHub 存储库</h1> <p>许多人使用 git 客户端在本地计算机上创建文件，然后将它们推送到 GitHub 的服务器。 如果对 git 不熟悉，可以直接在 github.com 界面直接编辑这些配置和 markdown 文件。 导航到一个文件（像这个文件，然后单击内容预览右上角的铅笔图标（在“原始|责任|历史”按钮的右侧）。可以通过单击右侧的垃圾桶图标来删除文件 您还可以通过导航到目录并单击“创建新文件”或“上传文件”按钮来创建新文件或上传文件。</p> <p>示例：为演讲编辑 Markdown 文件 <img src="/images/editing-talk.png" alt="为演讲编辑 Markdown 文件" /></p> <h1 id="关键文件目录的位置">关键文件/目录的位置</h1> <ul> <li>基本配置选项: _config.yml</li> <li>顶部导航栏配置: _data/navigation.yml</li> <li>单页: _pages/</li> <li>页面集合是 .md 或 .html 文件，位于: <ul> <li>_publications/</li> <li>_portfolio/</li> <li>_posts/</li> <li>_teaching/</li> <li>_talks/</li> </ul> </li> <li>页脚: _includes/footer.html</li> <li>静态文件（如 PDF）: /files/</li> <li>个人资料图片（可以在_config.yml中设置）: images/profile.png</li> </ul> <h1 id="提示">提示</h1> <ul> <li>将文件命名为“.md”以使其在 Markdown 中呈现，将其命名为“.html”以在 HTML 中呈现。</li> <li>转到提交列表（在您的 repo 上）以找到使用 Jekyll 构建的最新版本的 Github。 <ul> <li>绿色对勾：成功构建</li> <li>橙色圆圈：建筑</li> <li>红色 X：错误</li> <li>无图标：未构建</li> </ul> </li> </ul> <h1 id="markdown-指南">Markdown 指南</h1> <h2 id="标题">标题</h2> <p>要创建标题，请在单词或短语前面添加井号 (#) 。井号的数量代表了标题的级别。例如，添加三个井号即创建一个三级标题 (&lt;h3&gt;) (例如：### My Header)。</p> <h1 id="标题一">标题一</h1> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 标题一 </code></pre></div></div> <h2 id="标题二">标题二</h2> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>## 标题二 </code></pre></div></div> <h3 id="标题三">标题三</h3> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>### 标题三 </code></pre></div></div> <h2 id="分隔线">分隔线</h2> <hr /> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>--- </code></pre></div></div> <h2 id="强调标签">强调标签</h2> <h3 id="粗体">粗体</h3> <p>此标签显示<strong>粗体</strong>文本。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>此标签显示**粗体**文本。 </code></pre></div></div> <h3 id="斜体">斜体</h3> <p>强调标签应使文本<em>斜体</em>。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>强调标签应使文本*斜体*。 </code></pre></div></div> <h2 id="块引用">块引用</h2> <p>单行块引用：</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&gt; 引用很酷。 </code></pre></div></div> <h2 id="注意">注意</h2> <p class="notice"><strong>小心！</strong> 可以通过将 <code class="language-plaintext highlighter-rouge">{: .notice}</code> 附加到段落来添加注意。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>**小心！** 可以通过将 `{: .notice}` 附加到段落来添加注意。 {: .notice} </code></pre></div></div> <h2 id="定义列表">定义列表</h2> <dl> <dt>定义列表一标题</dt> <dd>定义列表一</dd> <dt>定义列表二标题</dt> <dd>定义列表二</dd> </dl> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>定义列表一标题 : 定义列表一 定义列表二标题 : 定义列表二 </code></pre></div></div> <h2 id="无序列表嵌套">无序列表（嵌套）</h2> <ul> <li>列表项目一 <ul> <li>列表项目一 <ul> <li>列表项目一</li> <li>列表项目二</li> </ul> </li> <li>列表项目二</li> </ul> </li> <li>列表项目二</li> </ul> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> - 列表项目一 - 列表项目一 - 列表项目一 - 列表项目二 - 列表项目二 - 列表项目二 </code></pre></div></div> <h2 id="有序列表嵌套">有序列表（嵌套）</h2> <ol> <li>列表项目一 <ol> <li>列表项目一 <ol> <li>列表项目一</li> <li>列表项目二</li> </ol> </li> <li>列表项目二</li> </ol> </li> <li>列表项目二</li> </ol> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> 1. 列表项目一 1. 列表项目一 1. 列表项目一 2. 列表项目二 2. 列表项目二 2. 列表项目二 </code></pre></div></div> <h2 id="表格">表格</h2> <table> <thead> <tr> <th style="text-align: left">标题1</th> <th style="text-align: center">标题2</th> <th style="text-align: right">标题3</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">项目1</td> <td style="text-align: center">项目2</td> <td style="text-align: right">项目3</td> </tr> <tr> <td style="text-align: left">项目4</td> <td style="text-align: center">项目5</td> <td style="text-align: right">项目6</td> </tr> </tbody> </table> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| 标题1 | 标题2 | 标题3 | |:--------|:-------:|--------:| | 项目1 | 项目2 | 项目3 | | 项目4 | 项目5 | 项目6 | </code></pre></div></div> <h2 id="代码按钮">代码/按钮</h2> <p>应用 <code class="language-plaintext highlighter-rouge">.btn</code> 类时，使任何文字更加突出。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>应用 `.btn` 类时，使任何文字更加突出。 </code></pre></div></div> <h2 id="代码块">代码块</h2> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;/html&gt; </code></pre></div></div> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>\``` &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;/html&gt; \``` </code></pre></div></div> <h2 id="链接">链接</h2> <p>这是一个<a href="http://github.com" title="Github">链接</a>的例子。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>这是一个[链接](http://github.com "Github")的例子。 </code></pre></div></div> <h2 id="脚注">脚注</h2> <p>这是一个简单的脚注<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup>， 这是一个更长的脚注<sup id="fnref:bignote" role="doc-noteref"><a href="#fn:bignote" class="footnote" rel="footnote">2</a></sup>。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>这是一个简单的脚注[^1]， 这是一个更长的脚注[^bignote]。 [^1]: 这是第一个脚注。 [^bignote]: 这是一个有多个段落和代码的。 缩进段落以将它们包含在脚注中。 `{我的代码}` 添加尽可能多的段落。 </code></pre></div></div> <h2 id="图片">图片</h2> <p><img src="/images/500x300.png" alt="500x300.png" /></p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>![500x300.png](/images/500x300.png) </code></pre></div></div> <h2 id="html-标签">HTML 标签</h2> <h3 id="删除标签">删除标签</h3> <p>这个标签可以让你<strike>删除</strike>文本。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>这个标签可以让你&lt;strike&gt;删除&lt;/strike&gt;文本。 </code></pre></div></div> <h3 id="插入标签">插入标签</h3> <p>此标记应表示<ins>插入</ins>的文本。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>此标记应表示&lt;ins&gt;插入&lt;/ins&gt;的文本。 </code></pre></div></div> <div class="footnotes" role="doc-endnotes"> <ol> <li id="fn:1" role="doc-endnote"> <p>这是第一个脚注。 <a href="#fnref:1" class="reversefootnote" role="doc-backlink">&#8617;</a></p> </li> <li id="fn:bignote" role="doc-endnote"> <p>这是一个有多个段落和代码的。</p> <p>缩进段落以将它们包含在脚注中。</p> <p><code class="language-plaintext highlighter-rouge">{我的代码}</code></p> <p>添加尽可能多的段落。 <a href="#fnref:bignote" class="reversefootnote" role="doc-backlink">&#8617;</a></p> </li> </ol> </div>Junjie Liujunjie.liu@connect.ust.hk这是中文版学术主页使用指南，旨在搭建一个托管在 Github 的学术主页。通过开源项目 Academicpages 和 Github 的 Github Pages 服务我们可以搭建一个免费、简约和高度定制的学术主页。