转载: halo制作小书架页面

前言📚

前天有小伙伴在小城这里询问如何实现小城の书架（可以点击查看效果）这个页面，去原作者满心的网站找了下，好像教程不见了，小城觉得可以留档记录下给需要的小伙伴部署一下，以下将以halo博客为例，部署一个html页面的小书架(其他博客系统理论也支持)，实现逻辑是index源码会调用图片和css样式和字体然后显示出一个书架网页。

教程💻

源码编辑🐤
下载好源码还需要根据自身情况进行书籍的自定义，下面来说一下如何正确放置自己阅读的书籍

源码地址（密码8888）：
默认标题

主体1️⃣

首先，源码有三个文件夹，1个文件，主要修改是img文件夹（放书籍的图片的）和index.html（书架的显示网页）文件，其他两个基本不用动，也不建议动

点击 index.html文件编辑，推荐使用免费的visual studio code，然后使用软件打开

修改标题2️⃣

可以自行修改文字部分即可

标注书籍来源3️⃣

这里采用了豆瓣的书籍，可以自己去豆瓣图书看自己书籍是哪一本，然后复制对应的网页链接，填写到这一栏，第一本的示范位置是32行红色部分

书籍信息4️⃣

书籍封面
可以在豆瓣上保存书籍的图片，只要二维平面的封面不要立体那种封面，因为这个书籍源码自带来旋转立体功能，比如项目示范的这三张图片，找不到可以自己用PS把立体的那种封面修一修即可。

书籍图片先放到img文件夹，名字可以为书籍汉字首字母小写，方便后续放入源码
在源码33和34行，33行可以修改一下书籍的名字，把title后面的内容改为想放的书籍，比如我的是猫之祭这本书
34行则修改红色位置，把刚才命名的图片文件写入这段，比如./img/mzj.jpg，两个位置的链接都保持一致（普及一下下，这里的./代表着相对位置,只要文件在系统里，不论改动哪个地址，不改变后面的./文件夹地址，最后要显示的文件就能被识别到）

作品简介
在40行这个位置，输入对应作品的简介或者自己的一些推荐理由、读书心得什么的，建议字数控制在110字以内，太多字会导致显示不全

书籍名字、作者和出版时间
43、44、45行对应位置，修改即可

读书笔记5️⃣

在47行，可以把读书笔记的链接填入 href=""这里面，如果没有读书笔记也可以留空，小城一般是拿来标记读书的状态，有空就写一下读书笔记，觉得这里没有必要显示的小伙伴可以把这两行去掉

年度阅读书籍7️⃣

如果想区分出2022和2023的书籍，可以将21行(<article>)-105行（ </article>）之间的内容复制一下，放到106行的</div>前面，保存即可。推荐2023年放在前面，2022年放在后面。

增加书籍8️⃣

将包含<li>和</li>的内容复制一遍放到每本书信息最后的</li>代码前面，修改对应书籍内容，调试没问题保存即可。

部署源码🐣
其他系统🧃
将文件压缩包上传到对应博客静态的位置，然后如果只是静态博客则直接放index.html到对应的标签页即可，形成一个域名+/index.html的网页，比如：https://www.llh1347.com/book/index.html,这个网页就是书架啦

具体情况根据自身采取的博客系统而定，这里过于复杂，不详细说啦，保证博客能访问这个index文件然后书籍图片和基本信息显示正常就行。

halo博客系统🥤
下载链接中的压缩包文件，然后上传到网站的静态资源位置，比如如果是使用halo博客的小伙伴(1.X版本的，2.0以上的版本自测，理论支持)，可以如下操作：

点击菜单栏的系统，找到小工具

点击左上角的图标10下就开启开发者模式

看到开发者选项点击进入

找到静态存储，上传已经编辑好的book文件夹

如图所示：

上传完成后可以点击index.html看看是否访问正常，如下图则没问题

点击菜单栏的页面点击新建页面，在内容里输入一下代码

<iframe src="https://你的域名/book/index.html" style="width:100%;height=100%;
min-height: 800px" >
</iframe>

保存然后发布，名字可以直接设置为book

菜单栏找到外观-菜单设置

新增一个小栏，可以写上刚才发布时设置的名字book，由于小城设置了一个自定义二级栏是/s，所以前面带了/s，大家看自己的情况而定，保证放到前端能访问即可。

回到前端，点击书架能访问即可

小结🐥

====================================
文章作者：梦中小城
文章来源：梦中小城小站
文章链接： https://www.llh1347.com/archives/20230402.html
版权声明：内容遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。