侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 106 条评论

目 录CONTENT

文章目录

Joe美化(5):侧栏最新文章改图文

小莫唐尼
2022-08-27 / 0 评论 / 6 点赞 / 94 阅读 / 456 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Joe默认的侧栏最新文章,似乎看起来不够丰富,特此记录和分享如何将其改为图文展示,感谢云少提供的想法。

特别说明:该修改只针对于halo博客的joe主题!!!

预览:

image

代码使用

第一步:下载文件

包含三个文件:
模板文件:aside-newarticle-template.ftl
样式文件:aside-new-article.min.css

第一步:下载文件

第二步:引入css样式文件

引用css的方式有三种,分别如下:

第1种:找到Joe主题设置-自定义-外部css链接 ,填写 aside-new-article.min.css的文件地址,文件地址就是你这个文件上传的地方;
第2种:找到Joe 主题设置-自定义-自定义css , 然后打开 aside-new-article.min.css 拷贝内容粘贴到此处;
第3种:

joe主题编辑,在 template/common/header.ftl文件中,加入css链接,示例如图:

image

第三步:修改模板文件

首先,找到Joe主题编辑->template -> macro ->latest.ftl
接着,打开第一步下载的 aside-newarticle-template.ftl 模板文件,复制文件内容替换 latest.ftl 的内容即可,如下图:
image

!!!原来的代码中,未对随机图片进行兼容,导致随机图片均为同样的BUG,若您使用了该教程进行修改,请您添加以下 代码,使随机图api生效:

<!-- 模板文件中的旧代码  -->
<!-- <img class="post-thumbnail" src="${default_img_url}"> -->

<!-- 解决随机图不随机的代码  -->
<img class="post-thumbnail" src="${default_img_url}?&r=${.now?string["hhmmSSsss"]}"> 

image

6

评论区