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函数
import datetime
from django import template register = template.Library()
# 把我写的函数注册成一个自定义的filter函数,就能在模板语言里使用了
@register.filter()
def alex(arg, delta=""):
try:
delta = int(delta)
except Exception:
delta = 7
# 在原来时间基础上加7天
ret = arg + datetime.timedelta(days=delta) # 默认事件不能和int相加,但是用timedelta就可以进行运算了
# 把时间对象格式化成字符串格式
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:''}}</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
22-2 模板语言的进阶和fontawesome字体的使用的更多相关文章
- flask基础之jijia2模板语言进阶(三)
前言 前面学习了jijia2模板语言的一些基础知识,接下来继续深挖jijia2语言的用法. 系列文章 flask基础之安装和使用入门(一) flask基础之jijia2模板使用基础(二) 控制语句 和 ...
- url路由、模板语言、ajax、用django框架创建表
1.后台管理的左侧菜单,默认只有第一个页签下面的选项是显示的,点了别的页签再显示别的页签下面的选项,问题是:点了任何菜单的选项后,左侧菜单又成了第一个页签的选项显示,别的页签隐藏,也就是左侧的菜单刷新 ...
- djiango的模板语言(template)
老师的博客:http://www.cnblogs.com/liwenzhou/p/7931828.html 官方文档:https://docs.djangoproject.com/en/1.11/re ...
- Day18 Django之路由系统、模板语言、Ajax、Model
一.路由系统 1.创建Django项目 django-admin startproject day18 cd day18 python3 manage.py startapp app01 2.app0 ...
- Django之模板语言
一.模板语言介绍 模板语言渲染的整个过程其实就是将html转换成函数,并为该函数提供全局变量,然后执行该函数 二.模板语言的语法 模板中也有自己的语言,该语言可以实现数据展示 # 业务请求处理做的页面 ...
- Django模板语言相关内容
Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 在Django的模板语言中按此语法使用:{{ 变量名 ...
- Django模板语言初识
一.Django框架简介 1.MVC框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控 ...
- Django的模板语言
Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. ...
- Django模板语言相关内容 Djan
Django模板语言相关内容 Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...
随机推荐
- JS面向对象--你真的理解闭包了吗?
JS中的闭包,可能在实际开发中我们用的很少,但是面试的时候是必问的.所以今儿个总结一下什么是闭包. 首先,我们定义一个变量.会分为两种情况,1是定义在全局中,我们关闭程序的时候变量会从内存中释放.2是 ...
- HDU4355 三分查找
/* * 三分查找 */ #include<cstdio> #include<cmath> #define eps 1e-6 //typedef __int64 LL; i ...
- session失效刷新后登录页面嵌入在iframe中的解决办法
在login页面中添加以下一段代码: var _topWin = window; while (_topWin != _topWin.parent.window) { _topWin ...
- 1、jxl导入/导出excel案例,黏贴即可运行
package junit.test; import java.io.File; import java.io.IOException; import java.util.ArrayList; imp ...
- Leetcode566.Reshape the Matrix重塑矩阵
在MATLAB中,有一个非常有用的函数 reshape,它可以将一个矩阵重塑为另一个大小不同的新矩阵,但保留其原始数据. 给出一个由二维数组表示的矩阵,以及两个正整数r和c,分别表示想要的重构的矩阵的 ...
- html5之本地数据库
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 你真的了解HTML吗
有这么一段HTML,请挑毛病: <P> 哥写的不是HTML,是寂寞.<br><br> 我说: <br>不要迷恋哥,哥只是一个传说 这是原来雅虎一道笔试题 ...
- Vue源码探究-虚拟DOM的渲染
Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...
- Python datetime对象的方法