django-admin自定义功能按钮样式

news2024/9/30 19:27:07

位置在原来的django-admin 栏中的上方【会因为屏幕大小而变换位置】

在这里插入图片描述

在这里插入图片描述

 <!-- 这里是不会替换掉旧的 添加按钮 ,而是添加多一个按钮【点击Crawl Data】-->
<!-- /home/luichun/lc/Pyfile/Pywebback/app/paqu/templates/admin/yourmodel_changelist.html -->
{% extends "admin/change_list.html" %}

{% block object-tools %}
{{ block.super }}
<div class="object-tools">
    <ul class="object-tools">
        <li>
            <a href="{% url 'admin:crawl-data' %}">点击Crawl Data</a>
            <a href="{% url 'admin:crawl-data' %}" class="button">点击Crawl Data</a>
            <a href="{% url 'admin:crawl-data' %}" class="addlink">增加 crawled data</a>
            <a href="{% url 'admin:crawl-data' %}" class="addlink">增加 crawled data</a>
            <a href="{% url 'admin:crawl-data' %}" class="add-related">增加 crawled data</a>
            <a href="{% url 'admin:crawl-data' %}" style="color: white; background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); background-size: 1400% 1400%; animation: rainbow 10s ease infinite; padding: 5px 10px; border-radius: 5px; text-decoration: none;">点击Crawl Data</a>
            <a href="{% url 'admin:crawl-data' %}" style="color: white; background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); background-size: 1400% 1400%; animation: rainbow 10s ease infinite; padding: 5px 10px; border-radius: 20px; text-decoration: none;">点击Crawl Data</a>
            <a href="{% url 'admin:crawl-data' %}" style="color: white; background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); background-size: 1400% 1400%; animation: rainbow 10s ease infinite; padding: 5px 10px; border-radius: 50%; text-decoration: none;">点击Crawl Data</a>
            <a href="{% url 'admin:crawl-data' %}" class="addlink" style="color: white; background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); background-size: 1400% 1400%; animation: rainbow 10s ease infinite; padding: 5px 10px; border-radius: 20px; text-decoration: none;">点击Crawl Data</a>
            <a href="{% url 'admin:crawl-data' %}" class="add-related" style="color: white; background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); background-size: 1400% 1400%; animation: rainbow 10s ease infinite; padding: 5px 10px; border-radius: 20px; text-decoration: none;">点击Crawl Data</a>
            <style>
            @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
            }
            </style>
        </li>
    </ul>
</div>
{% endblock %}

<h1>Debug: Template Loaded</h1>

彩虹渐变效果–位置在原来的django-admin 栏中的下方

在这里插入图片描述
在这里插入图片描述

<!-- 这里是不会替换掉旧的 添加按钮 ,而是添加多一个按钮【点击Crawl Data】-->
<!-- /home/luichun/lc/Pyfile/Pywebback/app/paqu/templates/admin/yourmodel_changelist.html -->
{% extends "admin/change_list.html" %}



{% block object-tools %}
{{ block.super }}
            <!-- <a href="{% url 'admin:crawl-data' %}" class="addlink">增加 crawled data</a> -->
            <a href="{% url 'admin:crawl-data' %}" class="addlink" style="color: white; background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); background-size: 1400% 1400%; animation: rainbow 10s ease infinite; padding: 5px 10px; border-radius: 20px; text-decoration: none; position: relative;">点击Crawl Data</a>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<style>
    @keyframes rainbow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
</style>
{% endblock %}

<h1>Debug: Template Loaded</h1>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2136460.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于k8s手动部署rabbitmq集群(Manually Deploying RabbitMQ Cluster Based on k8s)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

安全基础设施如何形成统一生态标准?OASA 硬件安全合作计划启动 | 2024 龙蜥大会

近日&#xff0c;2024 龙蜥操作系统大会&#xff08;OpenAnolis Conference&#xff09;在北京盛大召开。 与此同时&#xff0c;由龙蜥社区运营委员会副主席、龙腾计划生态负责人金美琴&#xff0c;阿里云智能集团高级技术专家张天佳&#xff0c;海光信息技术生态技术总监李伟&…

系统架构设计师教程 第5章 5.2需求工程 笔记

5.2 需求工程 ★★★★★ 软件需求是指用户对系统在功能、行为、性能、设计约束等方面的期望。 软件需求包括3个不同的层次&#xff1a;业务需求、用户需求和功能需求(也包括非功能需求)。 (1)业务需求 (business requirement) 反映了组织机构或客户对系统、产品高层次的目标…

用SpringBoot进行阿里云大模型接口调用同步方法和异步方法

同步效果就不展示了,这里展示更常用的异步,多轮异步流式效果展示如下: 结果内容组合 1、同步版本环境准备以及代码 需要开通阿里大模型服务,如果没有开通服务,单独的去生成 key 是无效的。 阿里云登录 - 欢迎登录阿里云,安全稳定的云计算服务平台 生成你需要的 key 1、…

PHP智慧家政同城服务家政系统小程序源码

智慧家政&#xff0c;同城服务新篇章 —— 探索家政系统的无限可能 开篇&#xff1a;走进智慧家政时代 在这个快节奏的生活中&#xff0c;每一分每一秒都显得尤为珍贵。当忙碌成为常态&#xff0c;如何让家成为真正的避风港&#xff1f;答案或许就藏在“智慧家政同城服务家政…

【JavaScript】数据结构之链表

什么是链表&#xff1f; 多个元素存储的列表链表中的元素在内存中不是顺序存储的&#xff0c;而是通过“next”指针联系在一起的&#xff0c;这个“next”可以自定义。JS中的原型链原理就是链表结构&#xff0c;是通过__proto__指针联系在一起的。 链表和数组的区别 数组是…

c++207 运算重载

调入 op #include<iostream> using namespace std;class Complex { public:int a;int b; public:Complex(int a 0, int b 0){this->a a;this->b b;}void printfCom(){cout << a << "" << b << "i" << endl…

Django视图:构建动态Web页面的核心技术

Django&#xff0c;作为一个强大的Python Web框架&#xff0c;提供了一套完整的工具来构建这些动态页面。在Django的架构中&#xff0c;视图&#xff08;Views&#xff09;是处理用户请求并生成响应的关键组件。本文将深入探讨Django视图的工作原理&#xff0c;以及如何使用它们…

科技与艺术完美融合的LED异形创意圆形(饼/盘)显示屏横空出世

随着LED技术的飞速发展&#xff0c;这款集科技与艺术于一体的异形创意圆形&#xff08;饼/盘&#xff09;显示屏&#xff0c;不仅以其独特的形态打破了传统显示屏的界限&#xff0c;更在视觉呈现上开启了前所未有的新篇章。它不再仅仅是信息传递的载体&#xff0c;而是成为了空…

外观模式详解:如何为复杂系统构建简洁的接口

&#x1f3af; 设计模式专栏&#xff0c;持续更新中 欢迎订阅&#xff1a;JAVA实现设计模式 &#x1f6e0;️ 希望小伙伴们一键三连&#xff0c;有问题私信都会回复&#xff0c;或者在评论区直接发言 外观模式 外观模式&#xff08;Facade Pattern&#xff09;为子系统中的一组…

AI重塑视觉体验:将图像与视频转化为逼真可编辑的3D虚拟场景

在这个数字化飞速发展的时代&#xff0c;AI技术正以前所未有的方式重塑我们的视觉体验。特别是当AI能够轻松将普通的照片和视频转化为高度逼真、可交互的3D虚拟场景时&#xff0c;它不仅简化了3D内容创作的复杂性&#xff0c;还极大地拓宽了应用场景的边界。今天&#xff0c;我…

医学数据分析实训 项目二 数据预处理作业

文章目录 项目二 数据预处理一、实践目的二、实践平台三、实践内容任务一&#xff1a;合并数据集任务二&#xff1a;独热编码任务三&#xff1a;数据预处理任务四&#xff1a;针对“项目一 医学数据采集”中“3. 通过 UCI 机器学习库下载数据集”任务所下载的数据集进行预处理。…

如何判断硬盘是不是固态硬盘?介绍几种简单有效方法

随着科技的发展&#xff0c;固态硬盘&#xff08;SSD&#xff09;因其读写速度快、噪音小、抗震能力强等优点&#xff0c;逐渐取代了传统的机械硬盘&#xff08;HDD&#xff09;。然而&#xff0c;对于普通用户来说&#xff0c;如何判断自己的硬盘是否为固态硬盘可能是一个难题…

10分钟在网站上增加一个AI助手

只需 10 分钟&#xff0c;为您的网站添加一个 AI 助手&#xff0c;以便全天候&#xff08;7x24&#xff09;回应客户咨询&#xff0c;提升用户体验、增强业务竞争力。 方案概览 在网站中引入一个 AI 助手&#xff0c;只需 4 步&#xff1a; 创建大模型问答应用&#xff1a;我们…

prometheus监控k8s1.24以上版本pod实时数据指标

8s组件本身提供组件自身运行的监控指标以及容器相关的监控指标。通过cAdvisor 是一个开源的分析容器资源使用率和性能特性的代理工具&#xff0c;集成到 Kubelet中&#xff0c;当Kubelet启动时会同时启动cAdvisor&#xff0c;且一个cAdvisor只监控一个Node节点的信息。cAdvisor…

Transformer学习记录(6):Vision Transformer

背景 Transformer模型最初是使用在NLP中&#xff0c;但近几年Transformer模型在图像上的使用越来越频繁&#xff0c;最新的模型也出现了很多基于Transfomer的&#xff0c;而其中经典的是Vision Transformer(ViT)&#xff0c;它是用于图像分类的&#xff0c;这里就以ViT-B/16这…

【已解决】SpringBoot3项目整合Druid依赖:Druid监控页面404报错

文章标题 问题描述原因分析解决方案参考资料 问题描述 最近&#xff0c;笔者在SpringBoot3项目中整合Druid连接池时&#xff0c;偶然翻到一条介绍Druid监控的短视频&#xff0c;兴致盎然之下尝试设置了一下Druid监控。 But&#xff0c;按照视频中提供的yml参数对照设置&#x…

试用过这么多ERP管理系统,还是这几款值得推荐!

已经考虑引入ERP系统却担心面临以下问题&#xff1f;ERP系统流程僵化难以调整&#xff1f;流程与实际业务脱节&#xff1f;培训不到位、技术支持不及时导致难以实现全员使用、共创&#xff1f;市面上的ERP系统众多不知道如何选择&#xff1f; 今天就根据2024最新市场动态&…

C++开发基础之理解 CUDA 编译配置:`compute_XX` 和 `sm_XX` 的作用

前言 在 CUDA 编程中&#xff0c;确保代码能够在不同的 NVIDIA GPU 上高效运行是非常重要的。为了实现这一点&#xff0c;CUDA 编译器 (nvcc) 提供了多种配置选项&#xff0c;其中 compute_XX 和 sm_XX 是两个关键的编译选项。本文将深入探讨这两个选项的作用及其配置顺序&…

什么是VHDX文件?

VHDX文件是Docker环境中使用的一种虚拟硬盘文件格式&#xff0c;专门用于存储Docker容器 的镜像和数据。这种文件格式&#xff0c;VHDX&#xff0c;代表Virtual Hard Disk Extended&#xff0c;是一种用于虚拟化环境的硬盘文件格式&#xff0c;支持动态扩展、快照、加密等功能&…