1.semantic-ui的安装和引用学习总结

课程地址:https://www.bilibili.com/video/BV13t411T72J?p=4
评论里有一个人做的博客 :https://onestar.newstar.net.cn/

semantic-ui两种使用方式 :
一种直接引入CDN加速

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

另一种安装semanticui
semantic UI可以有两种方式安装
一种是直接下载压缩包,解压后调用就可以使用了,其实也就是说无需安装,另一种方式是用gulp进行安装。
用gulp安装的优点是,你可以自己修改sementic ui中的样式,这样就更灵活一点,而最简化安装方式下不能修改,只能用默认样式。
要先安装gulp,而安装gulp是NPM的一个模块,所以需要先安装NPM,而NPM又是node.js的一个模块,所以,就需要安装node.js, 所以:
第一步是安装node.js,提示:官网有两个版本可以选择,最好是选LTS版本,这个是长期支持版本。
第二步是安装gulp:cmd打开控制台,输入:
npm install -g gulp
第三步安装semantic UI CD到需要安装semantic的文件夹,然后输入:

npm install semantic-ui --save
cd semantic/
gulp build

接下来如果控制台不报错的话,就会询问你是否自动安装和安装位置
然后就可以在html中调用了。
调用的顺序一定不要搞错。
CSS,Jquery,JS

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

npm install realm@2.1.0 --ignore-scripts
在这里插入图片描述
由于https://www.npmjs.com在国内访问不稳定,因此建议使用国内镜向站点https://npm.taobao.org
具体方法如下:
通过config命令
npm config set registry https://registry.npm.taobao.org
命令行指定
npm --registry https://registry.npm.taobao.org info underscore
编辑 npmrc文件,在该文件中加入registry = https://registry.npm.taobao.org
以上都是基于windows环境。

semantic-ui中文文档 :https://zijieke.com/semantic-ui/

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的实现方案: 1. 首先,在你的数据库中创建一个名为“notifications”的表,包含以下字段: - id: 自增主键 - user_id: 外键,表示接收通知的用户 - message: 通知的具体内容 - is_read: 表示该通知是否已读 2. 在你的 Flask 应用中创建一个新的路由,用于显示用户的通知列表。可以在路由函数中查询数据库,获取当前用户的所有未读通知,然后将它们传递给模板进行渲染。 3. 创建一个名为“notifications.html”的模板,用于显示用户的通知列表。可以使用 Semantic-UI 中的列表组件来展示通知,例如: ``` <div class="ui middle aligned divided list"> {% for notification in notifications %} <div class="item"> <div class="right floated content"> {% if not notification.is_read %} <a href="{{ url_for('mark_notification_as_read', notification_id=notification.id) }}">标记为已读</a> {% endif %} </div> <i class="large bullhorn middle aligned icon"></i> <div class="content"> <div class="header">{{ notification.message }}</div> </div> </div> {% endfor %} </div> ``` 这里使用了循环语句来遍历所有通知,并使用 Semantic-UI 的列表组件来显示每个通知的标题和内容。如果通知尚未读取,则在通知条目的右侧显示一个“标记为已读”的链接。 4. 最后,你需要为“标记为已读”链接创建一个新的路由。在路由函数中,可以将相应的通知标记为已读,并将用户重定向回通知列表页面。 ``` @app.route('/notifications/mark-read/<int:notification_id>') @login_required def mark_notification_as_read(notification_id): notification = Notification.query.get(notification_id) if notification and notification.user_id == current_user.id: notification.is_read = True db.session.commit() return redirect(url_for('notifications')) ``` 这里使用了 Flask-Login 来保护路由,只有已登录的用户才能访问它。然后,我们从数据库中获取相应的通知,将其标记为已读,并将用户重定向回通知列表页面。 希望这个简单的示例能够帮助你实现点赞系统通知列表。记得根据你的具体需求进行适当的修改和调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值