<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>静态博客 on 首页 | Widegram</title>
    <link>https://widegram.com/categories/%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/</link>
    <description>Recent content in 静态博客 on 首页 | Widegram</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en</language>
    <lastBuildDate>Wed, 06 Oct 2021 13:41:42 +0000</lastBuildDate><atom:link href="https://widegram.com/categories/%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Hugo的PaperMod主题踩坑历程</title>
      <link>https://widegram.com/2021/10/hugo-papermod%E8%B8%A9%E5%9D%91%E5%8E%86%E7%A8%8B/</link>
      <pubDate>Wed, 06 Oct 2021 13:41:42 +0000</pubDate>
      
      <guid>https://widegram.com/2021/10/hugo-papermod%E8%B8%A9%E5%9D%91%E5%8E%86%E7%A8%8B/</guid>
      <description>忙了一晚上，配置Papermod主题踩了太多坑。记录一下Hugo的PaperMod主题踩坑历程（包括Safari顶栏颜色配置等）。
一、安装过程 不要使用git add submodule安装主题，否则将无法更改主题内容。正确方法是下载zip文件解压，然后git init。 api.netlify.com始终无法访问，又不在各大pac的名单上，因此开梯子的时候要设置为全局才能上去。 从Hexo转向Hugo后，最大的感受就是编译速度快了不少，netlify的免费额度终于够用了～ 二、配置过程 设置Archive页面时，除了按照官方的做法添加archives.md文件以外，还必须在config.yml下添加如下属性：
params: ShowAllPagesInArchive: true 设置params.editPost属性时，在URL上必须加上/tree/master，例如：
https://github.com/alvazu/hugo_standalone/tree/master/content 同时，必须设置hidemeta属性，才会显示修改按钮：
params: hidemeta: false hideSummary: false 配置TOC的过程，可以参考如下配置，让TOC显示但自动收起：
params: showtoc: true tocopen: false 将主页设置为非profile mode时，还必须在config.yml下添加如下属性，首页上的文章列表才能显示：
params: mainSections: - post 这是由于在下列语句中，site.Params.mainSections属性返回posts，而site.RegularPages.Type返回post（少了个“s”）：
where site.RegularPages &amp;#34;Type&amp;#34; &amp;#34;in&amp;#34; site.Params.mainSections 配置RSS时，首先在config.yml下添加如下属性：
params: ShowFullTextinRSS: true 然后将socialIcons属性指向index.xml。
要删除Catagories、Tags页面中的大标题，需要找到/layouts/_default/terms.html文件，将其中的
&amp;lt;h1&amp;gt;{{ .Title }}&amp;lt;/h1&amp;gt; （也就是第五行）注释掉。
要删除底部的Powered by Hugo &amp;amp; PaperMod字样，需要找到layouts/partials/footer.html，从第8行开始设置注释：
&amp;lt;!-- &amp;lt;span&amp;gt; Powered by &amp;lt;a href=&amp;#34;https://gohugo.io/&amp;#34; rel=&amp;#34;noopener noreferrer&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;Hugo&amp;lt;/a&amp;gt; &amp;amp; &amp;lt;a href=&amp;#34;https://git.io/hugopapermod&amp;#34; rel=&amp;#34;noopener&amp;#34; target=&amp;#34;_blank&amp;#34;&amp;gt;PaperMod&amp;lt;/a&amp;gt; &amp;lt;/span&amp;gt; --&amp;gt; 三、设置Safari顶栏颜色跟随 找到layouts/partials/header.</description>
      <content:encoded><![CDATA[<p>忙了一晚上，配置Papermod主题踩了太多坑。记录一下Hugo的PaperMod主题踩坑历程（包括Safari顶栏颜色配置等）。</p>
<h2 id="一安装过程">一、安装过程</h2>
<ol>
<li>不要使用git add submodule安装主题，否则将无法更改主题内容。正确方法是下载zip文件解压，然后git init。</li>
<li>api.netlify.com始终无法访问，又不在各大pac的名单上，因此开梯子的时候要设置为全局才能上去。</li>
<li>从Hexo转向Hugo后，最大的感受就是编译速度快了不少，netlify的免费额度终于够用了～</li>
</ol>
<h2 id="二配置过程">二、配置过程</h2>
<ol>
<li>
<p>设置Archive页面时，除了按照官方的做法添加archives.md文件以外，还必须在<code>config.yml</code>下添加如下属性：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">ShowAllPagesInArchive</span>: <span style="color:#66d9ef">true</span>
</span></span></code></pre></div></li>
<li>
<p>设置<code>params.editPost</code>属性时，在URL上必须加上<code>/tree/master</code>，例如：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-http" data-lang="http"><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">https://github.com/alvazu/hugo_standalone/tree/master/content
</span></span></span></code></pre></div><p>同时，必须设置<code>hidemeta</code>属性，才会显示修改按钮：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">hidemeta</span>: <span style="color:#66d9ef">false</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">hideSummary</span>: <span style="color:#66d9ef">false</span>
</span></span></code></pre></div></li>
<li>
<p>配置TOC的过程，可以参考如下配置，让TOC显示但自动收起：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">showtoc</span>: <span style="color:#66d9ef">true</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">tocopen</span>: <span style="color:#66d9ef">false</span>
</span></span></code></pre></div></li>
<li>
<p>将主页设置为<code>非profile mode</code>时，还必须在<code>config.yml</code>下添加如下属性，首页上的文章列表才能显示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">mainSections</span>:
</span></span><span style="display:flex;"><span>    - <span style="color:#ae81ff">post</span>
</span></span></code></pre></div><p>这是由于在下列语句中，<code>site.Params.mainSections</code>属性返回posts，而<code>site.RegularPages.Type</code>返回post（少了个“s”）：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-go" data-lang="go"><span style="display:flex;"><span><span style="color:#a6e22e">where</span> <span style="color:#a6e22e">site</span>.<span style="color:#a6e22e">RegularPages</span> <span style="color:#e6db74">&#34;Type&#34;</span> <span style="color:#e6db74">&#34;in&#34;</span> <span style="color:#a6e22e">site</span>.<span style="color:#a6e22e">Params</span>.<span style="color:#a6e22e">mainSections</span>
</span></span></code></pre></div></li>
<li>
<p>配置RSS时，首先在<code>config.yml</code>下添加如下属性：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">ShowFullTextinRSS</span>: <span style="color:#66d9ef">true</span>
</span></span></code></pre></div><p>然后将<code>socialIcons</code>属性指向<code>index.xml</code>。</p>
</li>
<li>
<p>要删除<code>Catagories</code>、<code>Tags</code>页面中的大标题，需要找到<code>/layouts/_default/terms.html</code>文件，将其中的</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">h1</span>&gt;{{ .Title }}&lt;/<span style="color:#f92672">h1</span>&gt;
</span></span></code></pre></div><p>（也就是第五行）注释掉。</p>
</li>
<li>
<p>要删除底部的<code>Powered by Hugo &amp; PaperMod</code>字样，需要找到<code>layouts/partials/footer.html</code>，从第8行开始设置注释：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- &lt;span&gt;
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">	Powered by
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">	&lt;a href=&#34;https://gohugo.io/&#34; rel=&#34;noopener noreferrer&#34; target=&#34;_blank&#34;&gt;Hugo&lt;/a&gt; &amp;
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">	&lt;a href=&#34;https://git.io/hugopapermod&#34; rel=&#34;noopener&#34; target=&#34;_blank&#34;&gt;PaperMod&lt;/a&gt;
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;/span&gt; --&gt;</span>
</span></span></code></pre></div></li>
</ol>
<h2 id="三设置safari顶栏颜色跟随">三、设置Safari顶栏颜色跟随</h2>
<ol>
<li>
<p>找到<code>layouts/partials/header.html</code>，修改其中的JS代码为（从22行开始）：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#34;pref-theme&#34;</span>) <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;dark&#34;</span>) {
</span></span><span style="display:flex;"><span>   document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#39;dark&#39;</span>);
</span></span><span style="display:flex;"><span>   document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;meta[name=&#34;theme-color&#34;]&#39;</span>).<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;content&#34;</span>,<span style="color:#e6db74">&#34;#1d1e20&#34;</span>)
</span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#34;pref-theme&#34;</span>) <span style="color:#f92672">===</span> <span style="color:#e6db74">&#34;light&#34;</span>) {
</span></span><span style="display:flex;"><span>   document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">remove</span>(<span style="color:#e6db74">&#39;dark&#39;</span>)
</span></span><span style="display:flex;"><span>   document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;meta[name=&#34;theme-color&#34;]&#39;</span>).<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;content&#34;</span>,<span style="color:#e6db74">&#34;#f5f5f5&#34;</span>)
</span></span><span style="display:flex;"><span>} <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (window.<span style="color:#a6e22e">matchMedia</span>(<span style="color:#e6db74">&#39;(prefers-color-scheme: dark)&#39;</span>).<span style="color:#a6e22e">matches</span>) {
</span></span><span style="display:flex;"><span>   document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#39;dark&#39;</span>);
</span></span><span style="display:flex;"><span>   document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;meta[name=&#34;theme-color&#34;]&#39;</span>).<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;content&#34;</span>,<span style="color:#e6db74">&#34;#1d1e20&#34;</span>)
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div></li>
<li>
<p>找到<code>layouts/partials/footer.html</code>，修改其中的JS代码为（从73行开始）：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span>document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;theme-toggle&#34;</span>).<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#34;click&#34;</span>, () =&gt; {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">if</span> (document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">className</span>.<span style="color:#a6e22e">includes</span>(<span style="color:#e6db74">&#34;dark&#34;</span>)) {
</span></span><span style="display:flex;"><span>    document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">remove</span>(<span style="color:#e6db74">&#39;dark&#39;</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">setItem</span>(<span style="color:#e6db74">&#34;pref-theme&#34;</span>, <span style="color:#e6db74">&#39;light&#39;</span>);
</span></span><span style="display:flex;"><span>    document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;meta[name=&#34;theme-color&#34;]&#39;</span>).<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;content&#34;</span>,<span style="color:#e6db74">&#34;#f5f5f5&#34;</span>)
</span></span><span style="display:flex;"><span>  } <span style="color:#66d9ef">else</span> {
</span></span><span style="display:flex;"><span>    document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#39;dark&#39;</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">setItem</span>(<span style="color:#e6db74">&#34;pref-theme&#34;</span>, <span style="color:#e6db74">&#39;dark&#39;</span>);
</span></span><span style="display:flex;"><span>    document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;meta[name=&#34;theme-color&#34;]&#39;</span>).<span style="color:#a6e22e">setAttribute</span>(<span style="color:#e6db74">&#34;content&#34;</span>,<span style="color:#e6db74">&#34;#1d1e20&#34;</span>)
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>})
</span></span></code></pre></div></li>
</ol>
]]></content:encoded>
    </item>
    
  </channel>
</rss>
