<?xml version="1.0" encoding="utf-8" standalone="yes"?><?xml-stylesheet href="/scripts/pretty-feed-v3.xsl" type="text/xsl"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:h="http://www.w3.org/TR/html4/"><channel><title>Hack Your Heart</title><link>https://h4cker.zip/tags/%E5%89%8D%E7%AB%AF/</link><description>临渊羡鱼，不如退而结网</description><generator>Hugo 0.168.0</generator><language>en</language><atom:link href="https://h4cker.zip/tags/%E5%89%8D%E7%AB%AF/rss.xml" rel="self" type="application/rss+xml"/><lastBuildDate>Wed, 05 Feb 2025 20:49:22 +0800</lastBuildDate><item><title>开发HackYourHeart主题的心路</title><link>https://h4cker.zip/4c2e74/</link><pubDate>Wed, 05 Feb 2025 20:49:22 +0800</pubDate><guid isPermaLink="true">https://h4cker.zip/4c2e74/</guid><description/><content:encoded xmlns:content="http://purl.org/rss/1.0/modules/content/"><![CDATA[<h1 id="hack-your-heart">Hack Your Heart<a class="anchor" href="#hack-your-heart">#</a></h1>
<p>写这个主题是因为我在Hugo的主题仓库里没有找到喜欢的主题。</p>
<p>因为我是一个<del>黑客</del>脚本小子，我想要更有黑客风格的博客，但是没找到。于是想要自己写一个博客主题。</p>
<p>由于我不会前端，写这个主题十分困难，许多HTML、CSS、JS、F12花哨调试 工具都是我现学的。这个主题也是我边学边写。</p>
<h2 id="特色">特色<a class="anchor" href="#特色">#</a></h2>
<p>没什么特色，都是一些基础功能，你能在其他主题看到相同功能。</p>
<p>许多细节真的非常难搞。搜索功能我很满意，它快速美观。代码块部分结合 Chrome 自定义效果，目录自己写的，各种公式、javascript 其中各种冲突，搞得累死我了。</p>
<p>尤其是代码块的表格显示，行号冲突，锚点冲突，又没有复制按钮。其中魔改了一个js，其中许多搞笑的bug，不过都解决了。</p>
<p>i18n还没搞</p>
<p>虽然页面布局有所借鉴，但都是我自己写的代码，代码非常烂，好在性能还行。我尽量加上了懒加载和Hugo自身的资源引用语法。性能够我自己用了。</p>
<p>首页参考Hack The Box Academy中Dashboard的 <a
  href="https://academy.hackthebox.com/modules" rel="nofollow noopener noreferrer" target="_blank"
  >Modules<span style="user-select:none"> ↗</span></a
>
 页面，色系同HTB：</p>
<p><img
  src="/4c2e74/HTB_Modules.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1187"
/>
</p>
<p>Hugo没有心目中的黑客主题，相近的大概是：<a
  href="https://hackingcapitalism.io/" rel="nofollow noopener noreferrer" target="_blank"
  >https://hackingcapitalism.io/<span style="user-select:none"> ↗</span></a
>
（二开自<a
  href="https://github.com/panr/hugo-theme-hello-friend" rel="nofollow noopener noreferrer" target="_blank"
  >hello-friend<span style="user-select:none"> ↗</span></a
>
 ），新的hello-friend-ng也不太行</p>
<p>其实 <a
  href="https://www.leavesongs.com/" rel="nofollow noopener noreferrer" target="_blank"
  >phithon<span style="user-select:none"> ↗</span></a
>
、<a
  href="https://y4tacker.github.io/" rel="nofollow noopener noreferrer" target="_blank"
  >y4tacker<span style="user-select:none"> ↗</span></a
>
，风格都不错，他们那个暗黑主题不喜欢。白色的推荐 <a
  href="https://www.ol4three.com/" rel="nofollow noopener noreferrer" target="_blank"
  >ol4three<span style="user-select:none"> ↗</span></a
>
 和 <a
  href="https://exp10it.io/" rel="nofollow noopener noreferrer" target="_blank"
  >X1r0z<span style="user-select:none"> ↗</span></a
>
</p>
<p>由于我之前使用的 hexo-theme-aurora 有大量封面图，也舍不得扔掉那么多封面。</p>
<p>其次是 <a
  href="https://3gstudent.github.io/" rel="nofollow noopener noreferrer" target="_blank"
  >3gstudent<span style="user-select:none"> ↗</span></a
>
 的，非常不错，但是感觉差了点什么，类似的最好的就是 <a
  href="https://gitlab.com/gabmus/hugo-ficurinia" rel="nofollow noopener noreferrer" target="_blank"
  >ficurinia<span style="user-select:none"> ↗</span></a
>
，真的漂亮，但我都看那么多了，不如自己搞</p>
<p>主题参考了Fixit、ficurinia等等的实现思路</p>
<p>很早以前我就喜欢HTB风格，漫画图标，酷的配色。黑客浸入感极强。比国内一些CTF、靶场好太多了。国内许多靶场就喜欢搞个普通烂大街的蓝色科技感驾驶舱大屏</p>
<p>现在不是很懂前端，大学学的三剑客貌似没啥用，于是边学边写</p>
<h3 id="主页home">主页/Home：<a class="anchor" href="#主页home">#</a></h3>
<p><img
  src="/4c2e74/hyhhome.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2700" height="1800"
/>
</p>
<h3 id="分类categories">分类/Categories：<a class="anchor" href="#分类categories">#</a></h3>
<p><img
  src="/4c2e74/hyhcategories.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1229"
/>
</p>
<h3 id="标签tags">标签/Tags：<a class="anchor" href="#标签tags">#</a></h3>
<p><img
  src="/4c2e74/hyhtags.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1229"
/>
</p>
<h3 id="存档archives">存档/Archives：<a class="anchor" href="#存档archives">#</a></h3>
<p><img
  src="/4c2e74/hyharchives.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1229"
/>
</p>
<h3 id="朋友friends">朋友/Friends：<a class="anchor" href="#朋友friends">#</a></h3>
<p><img
  src="/4c2e74/hyhfriends.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1229"
/>
</p>
<h3 id="关于about">关于/About：<a class="anchor" href="#关于about">#</a></h3>
<p>这里就是markdown直接写</p>
<p><img
  src="/4c2e74/hyhabout.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1229"
/>
</p>
<h3 id="文章post-page">文章/Post page：<a class="anchor" href="#文章post-page">#</a></h3>
<p><img
  src="/4c2e74/hyhpost.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2560" height="1229"
/>
</p>
<h3 id="代码块codeblock">代码块/Codeblock：<a class="anchor" href="#代码块codeblock">#</a></h3>
<p><img
  src="/4c2e74/hyhcodeblock.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="1537" height="1037"
/>
</p>
<h3 id="数学公式注音emojimathrubyemoji">数学公式、注音、emoji/Math、Ruby、Emoji：<a class="anchor" href="#数学公式注音emojimathrubyemoji">#</a></h3>
<p><img
  src="/4c2e74/hyhmathruby.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="1528" height="728"
/>
</p>
<h3 id="图像graph">图像/Graph：<a class="anchor" href="#图像graph">#</a></h3>
<p>goat、UML、Pie、git等等</p>
<p><img
  src="/4c2e74/hyhmermaid.webp"
  alt=""
  class="zoomable"
  loading="lazy"
  decoding="async" width="2544" height="1084"
/>
</p>
<h2 id="installation">Installation<a class="anchor" href="#installation">#</a></h2>
<p>正常安装就行。最好站点配置文件为准</p>
<blockquote>
<p>由于我许多内容都是从本地引用，所以需要额外加入字体等元素，你改成cdn引用就不用引入字体</p>
</blockquote>
<p>注意，如果要显示Katex数学公式字体正确渲染，需要把字体文件放在站点目录下的\static\lib\katex\fonts中</p>
<p>因为Katex的文件默认去所在目录引用fonts,但实际上assets里的fonts不会同步输出到public,但是static里的文件可以同步输出到public,所以你需要将fonts以相同的路径放到static里.</p>
<p>比如assets/a/b/c/katex.min.js,你就要把fonts文件夹位置调整为 static/a/b/c/fonts</p>
<p>物理化学公式需要Katex额外引入一些东西，这里不写了</p>
<p>创建带空格或特殊字符文章，用<code>hugo new &quot;posts/测试 3345.md&quot;</code></p>
<p>我为了让链接更短，使用sulg作为链接。slug生成规则是“标题|时间戳”的md5值取前6位。你嫌重复概率高可以改成8位。可以使用这个脚本为所有文章生成slug：<a
  href="https://github.com/TajangSec/genslug" rel="nofollow noopener noreferrer" target="_blank"
  >https://github.com/TajangSec/genslug<span style="user-select:none"> ↗</span></a
>
</p>
<h2 id="结语">结语<a class="anchor" href="#结语">#</a></h2>
<p>代码真的很烂，也没什么好分享的。这个主题我能一直用下去，毕竟是自己一点一点写出来的，虽然烂但是喜欢。</p>
]]></content:encoded><category>Hugo</category><category>前端</category><category>博客</category></item></channel></rss>