Hexo-matery主题添加分类卡片

Hexo 教程

博客DIY

发布日期: 2021-07-20

更新日期: 2023-08-01

文章字数: 601

阅读时长: 2 分

阅读次数:

这次在matery上配置了一个小可爱插件

hexo-magnet！

这里是原项目地址！

https://github.com/Zfour/hexo-magnet

~~总感觉butterfly主题和matery很类似呢~~

配置方式很简单

首先NPM

npm i hexo-magnet --save

# 或者

cnpm i hexo-magnet --save

配置根目录_config.yml

非主题目录下的 _config.yml

举个🌰：

#hexo-magnet插件 当前放置于主页
magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 2
  display:
    - name: 搞事
      display_name: 搞事什么的最有趣啦！
      icon: 🤣
    - name: 安利
      display_name: 食我安利啦！！
      icon: 🎮
    - name: 摸鱼
      display_name: 摸鱼才是真正的赚钱！
      icon: 🐟
    - name: 关于
      display_name: 宁在康什么QAQ！
      icon: 🥕

  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "linear-gradient( 135deg, #91EAE4,#86A8E7,#7F7FD5)"
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

type是标签们的筛选方式，如果要筛选标签而不是分类的话将其改为tags就可以了~~（废话）~~

在这里，我修改了background_hover_color配置项，以适配我主题颜色

其余各项可以参照作者项目地址中的配置项含义

每次修改config记得三连哦

hexo clean && hexo g && hexo s

引用方式：

（如需修改插件id可以修改配置项layout）=>~~因为偷懒并没有去尝试这条（？）~~

<div class="recent-posts" id="recent-posts"></div>

可以新建单独的卡片，也可以直接插入现有卡片card-content之中（直接插入现有注意根据显示优先级从上往下放置）

举个🌰：

在需要引用的页面新建card并单独加入组件

<div class="card">
    <div class="card-content">
        <div class="recent-posts" id="recent-posts"></div>
    </div>
</div>

同时，为了保持与matery原有卡片的自适应，务必将标签放在container以内

<div class="container ">
    <div class="card">
        <div class="card-content">
            <div class="recent-posts" id="recent-posts"></div>
        </div>
    </div>
</div>