点开查看开发记录

开发记录

2022-03-02:正式版v1.9

  1. 调整样式布局存放位置。
  2. 修复灯箱插件强制套壳的问题。
  3. 修复flexcard导致gallery外挂标签图片偏移的问题。

2021-08-09:正式版v1.8

  1. 补丁样式作用域调整,修复对gallery标签的影响。

2021-08-09:正式版v1.7.3

  1. 补丁样式作用域调整,修复对gallery标签的影响。

2021-03-23:正式版v1.7.2

  1. 追加可能出现的BUG解决方案,修复对gallery标签的影响。
  2. 新增提示语,最新版已经不需要半自动截图项目。

2021-02-07:正式版v1.7.1

  1. 追加可能出现的BUG解决方案,针对flexcard风格提供适配样式表

2021-02-04:正式版v1.7

  1. 新增默认站点截图,siteshot配置项留空的情况下,使用thum.io提供的API自动截图。修改flink.pug
    • volantis样式:
        .img
      + - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
      if theme.lazyload.enable
      - img(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
      + img(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
      else
      - img(src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
      + img(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    • flexcard样式:
        .wrapper.cover
      + - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
      if theme.lazyload.enable
      - img.cover.fadeIn(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
      + img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
      else
      - img.cover.fadeIn(src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
      + img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
点开查看参考内容

思路解读

Butterfly的友链太过单调了。加上之前正好移植了Volantis的一堆外挂标签样式,突发奇想用Site-card来写友链,效果相当理想。

魔改步骤

  1. 新建友链页面。已开的可以跳过,从第2步开始.
    参照参考教程中的Butterfly友链界面配置教程先配置好默认友链页面。
  2. 在Hexo博客根目录[Blogroot]下打开终端,输入hexo new page link
    hexo new page link
  3. 打开[Blogroot]\source\link\index.md,添加一行type: 'link':

    ---
    title: link
    date: 2020-12-01 22:19:45
    type: 'link'
    ---
  4. 新建文件[Blogroot]\source\_data\link.yml,没有_data文件夹的话也请自己新建。以下是默认友链格式示例(自己写的教程,夹带点私货不过分吧,嘻嘻)。打开[Blogroot]\source\_data\link.yml,输入:
    - class_name: 糖果屋のVIP
    class_desc: 售后服务享五折优惠2333
    link_list:
    - name: Akilar
    link: https://akilar.top
    avatar: /img/siteicon/favicon.png
    descr: 欢迎光临糖果屋
  5. 取消[Blogroot]\_config.butterfly.ymlmenu配置项内link页面的注释。

    menu:
    Home: / || fas fa-home
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open
    # List||fas fa-list:
    # - Music || /music/ || fas fa-music
    # - Movie || /movies/ || fas fa-video
    Link: /link/ || fas fa-link
    # About: /about/ || fas fa-heart
  6. 修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug,此处添加判断机制,使得可以通过修改配置文件来切换友链风格。同时为了方便管理,把各个友链样式放到新建的文件目录[Blogroot]\themes\butterfly\layout\includes\page\flink_style下。

  7. 修改[Blogroot]\themes\butterfly\source\css\_page\flink.styl,同理,将样式文件也放到新建的[Blogroot]\themes\butterfly\source\css\_flink_style目录下方便管理。

  8. 因为Volantis的site-card比Butterfly的flink-card多出了一个站点缩略图,所以需要再额外添加一条配置项。修改[Blogroot]\source\_data\link.yml,添加一条名为siteshot的配置项。

    - class_name: 糖果屋のVIP
    class_desc: 售后服务享五折优惠2333
    link_list:
    - name: Akilar
    link: https://akilar.top
    avatar: /img/siteicon/favicon.png
    descr: 欢迎光临糖果屋
    siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg
    # siteshot就是站点缩略图的链接。
  9. [Blogroot]\_config.butterfly.yml中添加配置项:

    # 友链样式,butterfly为默认样式,volantis为站点卡片样式.flexcard为弹性卡片样式
    flink_style: volantis # butterfly | volantis | flexcard
  10. 站点卡片添加了懒加载和图片失效替换。对应配置项为[Blogroot]\_config.butterfly.yml中的:

    # Replace Broken Images (替換無法顯示的圖片)
    error_img:
    flink: # 头像失效替换图
    post_page: # 站点缩略图
  11. 可能遇到的bug:使用flexcard样式时,因为全站字体大小配置与本站不一致的关系,可能导致友链卡片的头像位置偏移较大。请读者按照flink.styl里的注释内容自己微调。

站点图片批量半自动截图

该项目的本意是为了弥补因为thum.io参数问题导致图片过大,从而加载较慢的问题。先将其保存下来再使用jsdelivr加速。最新版友链已经将thum.io的api内置,且调整了参数,图片大小缩小了将近40倍。也就不是很依赖于jsdelivr加速了。当然若是秉持能快一点是一点原则的用户,还是可以使用的

半自动截图内容非必要

这里使用的是@ChenYFan大佬的项目,通过调用thum.io提供的接口,配合github action,自动下载站点截图到github中,再配合jsdelivr+github图床来引用图片。

使用方法

  1. 首先fork项目到自己的github仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据thum.io提供的接口文档修改了参数,使得站点截图较小。(用我自己的站点截图作为示例,两者大小是1.2MB:34KB的程度,缩小了将近40倍。当然清晰度也不可同日而语,酌情选择)

  2. 获取Token,(此处直接使用当初为github actions教程准备的配图了)。
    访问Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token名称随意,但必须勾选repo项。


    token只会显示这一次,之后将无法查看,所以务必保证你已经记录下了Token。之后如果忘记了就只能重新生成重新配置了。

  3. 在你fork的项目仓库设置中,新建secrets。变量名为TOKEN,必须严格大写。

  4. 首先需要clone项目到本地。

    git clone git@github.com:[GithubUsername]/ScreenShot.git

    然后打开项目中的ScreenShot\.github\workflows\get.yml,
    按照示例添加你的友链地址。

    curl https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://<YourDomain>/ -o <YourDoamin>.jpg

    记得将curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.*中的[GithubUsername]改为你自己的github账号名。

    之后每次提交就会自动启动github action,将图片下载到ScreenShotgh-pages分支。并且通过purge.jsdelivr.net刷新缓存。

  5. 最后,在友链配置中,就能用https://cdn.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/[friend_link].jpg来引用站点缩略图了。

    - class_name: 糖果屋のVIP
    class_desc: 售后服务享五折优惠2333
    link_list:
    - name: Akilar
    link: https://akilar.top
    avatar: /img/siteicon/favicon.png
    descr: 欢迎光临糖果屋
    siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg # 留空则调用API自动截图
  6. 可能遇到的bug

    • 没有启动github action:请到仓库中找到Action,将其打开。
    • 图片缓存未刷新:purge.jsdelivr.net的强制刷新也是玄学,这种时候只能等待了。或者手动发布release,然后使用版本号。这个是jsdelivr的使用技巧,不多做讨论。

靓仔已经在迫不及待的加我友链了,而靓女还在犹豫要不要再加下我的联系方式。


提交issues自动更新友链

使用issues自动更新友链的实质是借助相应的API读取仓库issues并获取相应的数据,然后用js写到页面上。因为不同的js没法根据配置文件进行主题样式切换,所以请读者自行选择相应的方案。(事实上两种样式是可以共存的,因为通过读取issues写入友链页面的就是完整的HTML语言,只要同时加载flink.styl和site-card.styl的内容,赋予它样式就好。真正没法共存的是通过读取link.yml生成友链页面的部分。)

思路拓展:考虑到自动更新是读取issues,而有一款评论是直接将评论变为issues进行提交。也就是gitalk评论。想必头脑灵活的读者已经有思路了。主要是我自己懒得写了。


更多好帖

  1. @卓越科技基于@小康issues提交友链更新方案和@ChenYFan的博客站点自动截图方案制作。同时还实现了在Butterfly原版友链的基础上新增了鼠标悬停显示站点预览图的功能。

可能出现的BUG

根据Heo的反馈的BUG特性,如果开启了fancybox或者medium_zoom功能,会在页面编译时给img便签强行渲染上fancybox或者medium_zoom的外壳,导致小概率的点击图片放大时,会同时跳转到友链页。(反正我都是正常放大图片,没有跳转的情况。)


解决方案(相对的,友链图片将无法放大,酌情修改):

  1. 关闭fancybox,一劳永逸。
  2. 给友链页的img标签添加禁止点击属性style="pointer-events:none;"。使用内联样式,使得只对友链页生效而不会影响其他页面的fancybox渲染。修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug

    示例可能不是最新,注意内联样式的添加位置即可。

        if theme.lazyload.enable
    - img(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    + img(style="pointer-events:none;" data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    else
    img(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    .info
    if theme.lazyload.enable
    - img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    + img(style="pointer-events:none;" data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    else
    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )

issues写入友链需要jquery支持,Butterfly_v3.4.0以后实现去jquery化,需要自己添加jquery。还得保证加载顺序在issues.js之前。

    inject:
head:
bottom:
+ - <script src=" https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
- <script defer src="https://npm.elemecdn.com/hexo-theme-volantis@4.3.1/source/js/issues.min.js"></script>

部分读者反馈,在使用flexcard样式的友链时,头像被遮盖半个,无法完全显示。

  1. 主要原因是开启了fancybox,强制给图片套了个壳,导致部分样式被覆写。
  2. 次要原因是对flex的布局适用性较差。

解决方案,修改[Blogroot]\themes\butterfly\source\css\_page\flink.styl中关于flexcard的样式逻辑,使用!important控制权重。

  .info
- display flex
+ display block!important
flex-direction column
justify-content center
align-items center
width 100%
height 100%
overflow hidden
border-radius 3px
background-color hsla(0, 0%, 100%, .7)
transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
+ .fancybox
+ overflow visible!important
img
position relative
top 22px
width 66px
height 66px
border-radius 50%
box-shadow 0 0 10px rgba(0, 0, 0, .3)
z-index 1
text-align center
pointer-events none
span
+ display block!important
padding 20px 10% 60px 10%
font-size 16px
width 100%
text-align center
box-shadow 0 0 10px rgba(0, 0, 0, .3)
background-color hsla(0, 0%, 100%, .7)
color var(--font-color)
white-space nowrap
overflow hidden
text-overflow ellipsis

部分读者反馈,在使用flexcard样式的友链时,Butterfly的gallery相册样式出现严重偏移。推测是友链样式中某个标签定位重写的作用域没有限制好,导致堆叠样式重构。

紧急修复方案如下:
在自定义样式中加入以下内容:

/*相册页面定位修复*/
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg{
  position:static!important;
}

如果不清楚怎么修改自定义css的读者可以参考站内教程:自定义魔改样式及示例

TO DO

flink.pug魔改,移值Volantis的site-card样式

保留原版友链,通过配置文件切换样式

siteshot站点预览图批量半自动化截图

使用issues,经审批后自动更新友链