22-2 模板语言的进阶和fontawesome字体的使用

一  fontfawesome字体的使用

http://fontawesome.dashgame.com/ 官网

1 下载

2 放到你的项目下面

3 html导入这个目录

实例:

class最前面的fa 必须写上  ,第二个 wechat是图标的名字,前面也必须加上fa,第三个fa-4x是控制图标的大小,加上color还可以随意修改图标的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"> # 导入官网的的css文件
</head>
<body>
<p>
  <i style="color: green" class="fa fa-wechat fa-4x  "></i>
</p>
<i class="fa fa-hand-pointer-o"></i>

<i class="fa fa-spin fa-spinner"></i>

</body>
</html>

二  模板语言的进阶

参考 https://www.cnblogs.com/liwenzhou/p/7931828.html

1  静态文件相关的

一般的导入导入第三方的css或者js用的是

<link rel="stylesheet" href="/static/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">

它的弊端是一旦你的setting.py里面把静态文件的目录给更改了,那么你所有的html文件引用的地方都需要重新改一遍,所以可以用模板导入,这样你的这里面就不用

随着setting.py里面的更改去更改了。

 {% load static %}
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css' %}">

2  自定义函数

 2.1 必须在项目下面新建一个python package叫templatetags,然后新建一个py文件在里面自定义你的函数

自定义一个filter函数

 1 import datetime
 2 from django import template
 3 
 4 register = template.Library()
 5 # 把我写的函数注册成一个自定义的filter函数,就能在模板语言里使用了
 6 @register.filter()
 7 def alex(arg, delta="7"):
 8     try:
 9         delta = int(delta)
10     except Exception:
11         delta = 7
12         # 在原来时间基础上加7天
13     ret = arg + datetime.timedelta(days=delta)  # 默认事件不能和int相加,但是用timedelta就可以进行运算了
14     # 把时间对象格式化成字符串格式
15     return ret.strftime("%Y-%m-%d %H:%M:%S")

 在html页面中如何引用

{% load ooxx %} # 导入ooxx,这就是你自定义函数的py文件的名字
{#把时间转换成字符串用内置的date#}
<p>{{ now|date:'Y-m-d H:i:s' }}</p>
{#我自定义一个alex函数#}

<p>{{ now|alex }}</p>
<p>{{ now|alex:'5'}}</p>

自定义一个simple_tag函数

# 把一个函数注册成自定义的simple_tag
@register.simple_tag()
def gold(arg1, arg2, arg3):
    return "{}-{}-{}".format(arg1, arg2, arg3)

在html页面引用,传三个参数

<!--自定义simple_tag-->
<p>{% gold "燃烧" "我的" "卡路里" %}</p>

自定义一个inclusion_tag函数

# 用一些数据去填充一段HTML代码 把HTML代码返回给调用方
# 类似于一个简化版的render(request, "xx.html", {})函数
@register.inclusion_tag(filename="ul.html")
def show_menu(arg): #必须传一个参数
    ret = [i for i in range(arg)] #返回一个可迭代的对象
    return {"num": ret} # num是返回给了ul.html页面

在写一个ul.html页面

<ul>
    {% for i in num %}
        <li>{{ i }}</li>
    {% endfor %}
</ul>

在去展示给用户的html页面去引用这个show_menu函数

{% load ooxx %}
{% show_menu 10 %}  #这里的10就是num
 
 
simple_tag
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue2中使用Font Awesome,你需要遵循以下步骤: 步骤1:安装Font Awesome库 首先,你需要通过npm或yarn安装Font Awesome库。在终端中运行以下命令: ```bash npm install @fortawesome/fontawesome-free ``` 或者 ```bash yarn add @fortawesome/fontawesome-free ``` 步骤2:导入和配置Font Awesome库 在Vue项目的入口文件(通常是`main.js`或`main.ts`)中,导入Font Awesome库,并配置它。添加以下代码: ```javascript import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'; // 导入需要使用的图标 library.add(fas); library.add(far); // 注册组件 Vue.component('font-awesome-icon', FontAwesomeIcon); ``` 这段代码导入了Font Awesome库的核心组件和图标。你可以根据需要选择导入所有图标(`fas`)或仅导入常规图标(`far`)。然后,通过`Vue.component`全局注册`font-awesome-icon`组件,使其在整个应用程序中可用。 步骤3:使用Font Awesome图标 现在,你可以在Vue组件中使用Font Awesome图标了。例如,在某个组件的模板中添加以下代码: ```html <font-awesome-icon icon="coffee" /> ``` 这将在页面上显示一个咖啡图标。你可以根据需要更改`icon`属性的值,以显示不同的图标。你还可以添加其他属性,如`size`和`color`,来调整图标的大小和颜色。例如: ```html <font-awesome-icon icon="coffee" size="2x" color="red" /> ``` 这将显示一个红色的两倍大小的咖啡图标。 希望这个详细解答能够帮助你在Vue2中使用Font Awesome!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值