zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    python安装依赖包方法
    python 连接mysql数据库
    python学习5 爬虫老是被封如何解决
    python4
    python mysql增删改查
    jieba.analyse jieba.textrank 简单用法
    记录一些小问题
    《面向模式的软件体系架构》读书笔记(三)
    《面向模式的软件体系架构》读书笔记(二)
    安全性战术
  • 原文地址:https://www.cnblogs.com/huningfei/p/9686209.html
Copyright © 2011-2022 走看看