给 Blog index 页面添加小卡片¶
约 943 个字 • 75 行代码
起因¶
同样也是由于 鹤翔万里的笔记本 (tonycrane.cc) 的首页中设置有卡片,我感觉很酷,所以在我的 Blog 网页上也想设置一个😂😂
开始尝试复刻¶
在仓库 README.md 中,作者说到了卡片效果的原仓库 simeydotme/pokemon-cards-css ,和他修改后新建的一个仓库 TonyCrane/note-homepage-cards ,
我去了原仓库去查看,发现并没有说明用法,然后去作者修改后的仓库,里面写着一个用法
Quote
Install dependencies
Run locally for development
Build to static files
Copy to note's mkdocs project
Copy static files
Insert html to homepage
这个用法的前半部分,应该是要用到 Node.js ,由于我并不是很熟悉,所以有点不想用 Node.js (怕弄不明白而无法进行调整),而我注意了后半部分的用法,
于是我打算尝试一下,复制作者仓库中这些对应的文件,然后在生成的页面中导入看看效果,
于是我在仓库中找到了
docs/css/cards/cards.css
docs/css/cards/base.css
docs/assets/cards/index.caca6175.js
docs/assets/cards/index.c9fa2768.css
这几个对应的文件,然后将 cards.css
和 base.css
复制到了 docs/stylesheets/cards
下,两个 index
文件复制到了同样的路径下,
并且还将仓库中 docs/assets/cards
其余的图片也一并复制到我同样的路径下(先看看能不能显示出卡片,如果能就之后再设置我自己的卡片),
然后由于我只想在 index 网页中显示卡片,(虽然作者好像是用 home.html
去覆写,但是)我打算直接将这几行html代码放在 index.md
中,
<link rel="stylesheet" href="css/cards/base.css" />
<link rel="stylesheet" href="css/cards/cards.css" />
<script type="module" crossorigin src="/assets/cards/index.caca6175.js"></script>
<link rel="stylesheet" href="/assets/cards/index.c9fa2768.css">
<div id="app"></div>
然后预览,发现能显示出卡片,但卡片很大,和正文部分的宽度一样宽(长宽比例不变,所以就很长),
尝试通过 margin
调整卡片大小,然后成功¶
由于添加的5行代码中,4行代码我认为都是导入文件,所以我认为 <div id="app"></div>
是设置卡片的代码,于是尝试添加了 margin-left
然后预览,发现卡片显示在了正文部分的右侧,并且变小了,
这意味着,我 可以通过几个 margin
属性来设置和调整 卡片的大小和位置,
设置自己的卡片¶
我在复制来的四个文件中进行搜索和查看,然后在 index.caca6175.js
中的底部,发现设置了使用的图片文件的代码
...
function Vt(e) {
const t = [
["#", "/assets/cards/back.png"]
["/cs/pl/riscv/", "/assets/cards/riscv.png"],
["/cs/pl/rust/basic/", "/assets/cards/rust.png"],
["/cs/pl/haskell/", "/assets/cards/haskell.png"],
["/cs/system/", "/assets/cards/system.png"],
["/cs/pl/asm/", "/assets/cards/asm.png"],
["/cs/algorithm/ds/", "/assets/cards/ds.png"],
["/cs/regex/", "/assets/cards/regex.png"],
["/cs/unicode/", "/assets/cards/unicode.png"],
["/cs/tools/", "/assets/cards/tools.png"],
["/sec/vulns/log4j/", "/assets/cards/log4j.png"],
["/web/svg/", "/assets/cards/svg.png"],
["/ctf/misc/qrcode/", "/assets/cards/qrcode.png"],
["/ctf/blockchain/eth/", "/assets/cards/eth.png"],
["/ctf/misc/escapes/pysandbox/", "/assets/cards/pyjail.png"],
["/writeups/", "/assets/cards/writeups.png"],
["#", "/assets/cards/donate.png"]
]
...
然后我尝试注释掉只剩下一两个,发现不断预览的页面就只会出现那剩下的几个了(并且发现了前面是对应的链接),所以,只要我有自己的卡片图片,然后再在这处代码只设置我的图片就可以了,
于是我开始制作我自己的卡片图片,
最后制作成了
测试调整属性¶
然后为了方便测试属性,我将 index.md
中这行代码改成
<div id="app" style="margin-left: 22.8rem; margin-top: -16rem; margin-bottem: 0rem; margin-right: 0rem;"></div>
然后网页的开发工具中进行调整和测试,
经过不断调整,适应我的网页,最后 index.md
设置成了
# Blog
...
<div style="margin-top: 2rem"></div>
[Back to MyPamphlet](https://ronaldln.github.io/MyPamphlet/blog){ .md-button }
<link rel="stylesheet" href="stylesheets/cards/base.css" />
<link rel="stylesheet" href="stylesheets/cards/cards.css" />
<script type="module" crossorigin src="assets/cards/index.js"></script>
<link rel="stylesheet" href="assets/cards/index.css">
<div id="app" style="margin-left: 18.8rem; margin-top: -10rem; margin-bottem: 0rem; margin-right: 5rem;"></div>
---
其中我将两个
index
css 和 js 文件的文件名中的数字字母给去除了
最后的效果
修复一些小问题¶
相对路径问题¶
由于在进入下一页时,地址会改变,因此相对路径就失效了
所以我将 css js 和 图片 文件都换成了用 jsDelivr cdn加速的网址,
docs/assets/cards/index.js
...
function Vt(e) {
const t = [
["", "https://cdn.jsdelivr.net/gh/RonaldLN/MyPamphlet-Blog@main/docs/assets/cards/cover_card.png"],
]
...
docs/index.md
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RonaldLN/MyPamphlet-Blog@main/docs/stylesheets/cards/base.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RonaldLN/MyPamphlet-Blog@main/docs/stylesheets/cards/cards.css" />
<script type="module" crossorigin src="https://cdn.jsdelivr.net/gh/RonaldLN/MyPamphlet-Blog@main/docs/assets/cards/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RonaldLN/MyPamphlet-Blog@main/docs/assets/cards/index.css">
手机端网页格式显示问题¶
由于(应该是)在手机上打开网页时,卡片不会显示,所以原来通过 margin-top
来调整卡片的位置的方法,会(在卡片不显示时)导致下方的摘要向上移而与正文内容重叠,
所以最后将 index.md
修改成了
# Blog
...
<div id="app" style="margin-left: auto; margin-top: auto; margin-right: 22rem;"></div>
<span style="font-size:1.3em; opacity: 0.7;">:material-notebook-edit-outline:</span><span style="font-size:0.9em; opacity: 0.7;"> 本站目前共记录 </span><span style="font-size:1.1em; opacity: 0.7;">{{ pages }}</span><span style="font-size:0.9em; opacity: 0.7;"> 篇文章</span>
[Back to MyPamphlet](https://ronaldln.github.io/MyPamphlet/blog){ .md-button }
---
显示效果
创建日期: 2023-10-30