zhangyuheng/MrDoc
1
0
Fork 0
forked from mirror/MrDoc
Code Pull Requests Activity
00b253668b
MrDoc/template/app_doc/search_result.html

468 lines
19 KiB
HTML
Raw Normal View History

v0.5.6，详见更新记录
2020-07-31 20:23:23 +08:00
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta name="keywords" content="觅道文档,mrdoc,markdown,文档写作,在线教程,Python文档系统,django应用"/>
<meta name="description" content="MrDoc觅道文档是一个开源的在线文档系统，由州的先生（zmister.com）基于 Python 的 Django 进行开发框架，适合作为个人和小型团队的文档、笔记和知识管理工具。" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>{{ kw }} - 觅道搜索 - MrDoc觅道文档</title>
<link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
<link href="{% static 'mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
更新网站favicon图标
2020-07-31 21:53:56 +08:00
<link rel="icon" href="{% static 'search/mrdoc_logo_300.png' %}" sizes="192x192" />
v0.5.6，详见更新记录
2020-07-31 20:23:23 +08:00
<style>
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{
background-color: #0885ff !important;
}
.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
background-color: #0885ff !important;
}
/* layui分页组件样式 */
.layui-laypage .layui-laypage-curr .layui-laypage-em{
background-color: #0885ff !important;
}
/* 控制栏表单下拉框样式 */
.index-control .layui-input-inline{
/* width: 100px; */
}
.index-control .layui-input{
height: 25px;
border: none;
}
.index-control .layui-form-select dl {
top: 30px;
}
.index-control .layui-form-item{
margin-bottom: 0px;
}
/* 文集列表样式 */
.project-item-list{
/* float: left; */
min-width: 0;
width: 100vw;
height: 120px;
/* margin-top: 20px; */
/* margin-left: 20px; */
margin: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.055);
}
/* 搜索类型 */
a.search_type{
color: #999;
margin-left: 15px;
font-size: 16px;
padding-bottom: 5px;
}
a.search_type:hover{
color: #333;
}
/* 当前搜索类型链接样式 */
.current_search_type{
color: #333 !important;
border-bottom: 2px solid#007fff !important;
}
/* 搜索结果标题 */
.search_result_title{
color: #00c;
font-weight: 400;
font-size: medium;
line-height:26px;
}
.search_result_title:hover{
color: #00c;
}
/* 搜索结果简介 */
.search_result_pre{
font-size: 13px;
color: #333;
line-height: 20px;
word-break: break-word;
}
/* 搜索结果归属 */
.search_result_info a{
color: green;
}
/* 时间筛选下拉框 */
.layui-form-select dl dd.layui-this{
background-color:#0885ff;
}
@media screen and (min-width: 1200px){
.layui-container {
width: 970px;
}
}
/* 移动端筛选控制栏样式 */
@media screen and (max-width: 768px){
/* 控制栏样式 */
.index-control .layui-form-item .layui-inline{
display: -webkit-inline-box;
}
.index-control .layui-form-item .layui-input-inline{
display: -webkit-inline-box;
float: none;
left: -3px;
/* width: auto; */
margin: 0;
}
}
</style>
</head>
<body class="layui-container">
<!-- 页头 -->
<div class="layui-header layui-fluid">
<div class="" style="display:flex;flex-direction:row;justify-content:space-between;">
<!-- LOGO -->
<div class="">
<a class="logo" href="{% url 'search' %}">
<img src="{% static 'search/mrdoc_search_logo_2.svg' %}" style="height: 32px;width: auto;">
</a>
</div>
<!-- 搜索框 -->
<div style="margin:12px;" class="layui-hide-xs">
<form method="get" action="">
<div class="layui-input-inline">
<input class="layui-input mrdoc-search-input"
placeholder="搜索文集或文档" name="kw" style="width: 500px;border-radius:5px" value="{{kw}}"/>
<input name="type" value="{{search_type}}" hidden>
<button type="submit"
style="position: absolute;top:12px;right: 8px;border: none;background-color: white;">
<i class="layui-icon layui-icon-search" ></i>
</button>
</div>
</form>
</div>
<!-- 用户菜单 -->
<div class="">
<ul class="layui-nav layui-layout-right">
{% if request.user.is_authenticated %}
<li class="layui-nav-item">
<a href="javascript:void(0);">
<i class="layui-icon layui-icon-friends"></i> <span class="layui-hide-xs">{{request.user.username}}</span>
</a>
<dl class="layui-nav-child">
<!-- <dd><a href="">基本资料</a></dd> -->
{% if request.user.is_superuser %}
<dd>
<a href="{% url 'pro_list' %}">
<i class="layui-icon layui-icon-console layui-hide-md"></i>
<span class="layui-hide-xs">返回首页</span>
</a>
</dd>
{% endif %}
<dd class="layui-hide-md">
<a href="{% url 'create_doc' %}">
<i class="layui-icon layui-icon-add-1 layui-hide-md"></i>
</a>
</dd>
<dd>
<a href="{% url 'manage_doc' %}">
<i class="layui-icon layui-icon-app layui-hide-md"></i>
<span class="layui-hide-xs">个人中心</span>
</a>
</dd>
<dd>
<a href="javascript:void(0);" onclick="changePwd('{{ request.user.id }}','{{ request.user.username }}' )">
<i class="layui-icon layui-icon-password layui-hide-md"></i>
<span class="layui-hide-xs">修改密码</span>
</a>
</dd>
<dd>
<a href="{% url 'logout' %}">
<i class="layui-icon layui-icon-release layui-hide-md"></i>
<span class="layui-hide-xs">退出登录</span>
</a>
</dd>
</dl>
</li>
{% else %}
<li class="layui-nav-item">
<a href="javascript:void(0);">
<i class="layui-icon layui-icon-username"></i> 游客
</a>
<dl class="layui-nav-child">
<!-- <dd><a href="">基本资料</a></dd> -->
{% if close_register == 'on' %}
<dd><a href="{% url 'login' %}">登录</a></dd>
{% else %}
<dd><a href="{% url 'register' %}">注册</a></dd>
<dd><a href="{% url 'login' %}">登录</a></dd>
{% endif %}
</dl>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
<!-- 页头结束 -->
<!-- 小屏下的搜索框 -->
<div class="" style="margin-top:10px;padding-left:15px;">
<!-- 搜索框 -->
<div style="margin:12px 0 12px 0;" class="layui-hide-md layui-hide-lg layui-hide-sm">
<form method="get" action="">
<div class="layui-inline">
<div class="layui-input-inline">
<input class="layui-input mrdoc-search-input"
placeholder="搜索文集或文档" name="kw" style="border-radius:5px" value="{{kw}}"/>
<input name="type" value="{{search_type}}" hidden>
</div>
<div class="layui-input-inline">
<button type="submit" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-search" ></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- 筛选栏 -->
<div class="layui-container" style="margin-top: 10px;">
<!-- 表单风格开始 -->
<div class="layui-row">
<form class="index-control layui-form" lay-filter="filter-time-form">
<div class="layui-form-item">
<!-- 筛选开始 -->
<div class="layui-inline">
<!-- 文档搜索 -->
<div class="layui-input-inline">
<a href="{% url 'search' %}?kw={{kw}}&type=doc&d_range={{d_range}}" class="search_type" id="search_doc"><i class="layui-icon layui-icon-search"></i>文档</a>
<a href="{% url 'search' %}?kw={{kw}}&type=pro&d_range={{d_range}}" class="search_type" id="search_project"><i class="layui-icon layui-icon-list"></i>文集</a>
</div>
</div>
<!-- 筛选结束 -->
<div class="layui-input-inline" style="float: right;">
<select name="d_range" lay-verify="sel_recent" id="sel_recent">
<option value="">时间筛选</option>
<option value="all">全部时间</option>
<option value="recent1">近1天</option>
<option value="recent7">近7天</option>
<option value="recent30">近30天</option>
<option value="recent365">近1年</option>
</select>
</div>
</div>
</form>
</div>
<!-- 表单风格结束 -->
</div>
<!-- 搜索结果提示 -->
{% if kw != '' %}
<div style="padding: 0 15px;margin-top: 10px;margin-bottom: 10px;color: #999;">
觅道文档在
{% if date_range == 'recent1' %}
近1天内
{% elif date_range == 'recent7' %}
近7天内
{% elif date_range == 'recent30' %}
近30天内
{% elif date_range == 'recent365' %}
近一年内
{% else %}
全部时间内
{% endif %}
搜索到 {{ data_list.count }} 条结果
</div>
{% endif %}
<!-- 主体 -->
<div class="layui-container search_result" id="search_result" style="padding: 0 20px;">
<!-- 遍历搜索结果列表 -->
<!-- 文档搜索结果 -->
{% if search_type == 'doc' %}
{% load doc_filter %}
{% for result in datas %}
<div style="margin-bottom: 18px;">
<!-- 标题 -->
<h3>
<a href="{% url 'doc' pro_id=result.top_doc doc_id=result.id %}" target="_blank" class="search_result_title">{{ result.name }}</a>
</h3>
<!-- 简介 -->
<div class="search_result_pre">{{ result.pre_content|get_key_context:kw }}</div>
<!-- 所属文集 -->
<p class="search_result_info">
<a href="{% url 'pro_index' pro_id=result.top_doc %}" target="_blank">{{ result.top_doc | get_doc_top }}</a> - <span style="font-size: 14px;color: #999;">{{result.modify_time}}</span></p>
</div>
{% endfor %}
<!-- 文集搜索结果 -->
{% elif search_type == 'pro' %}
{% load project_filter %}
{% for result in datas %}
<div style="margin-bottom: 18px;">
<!-- 标题 -->
<h3>
<a href="{% url 'pro_index' pro_id=result.id %}" target="_blank" class="search_result_title">{{ result.name }}</a>
</h3>
<!-- 简介 -->
<div class="search_result_pre">{{ result.intro|get_key_context:kw }}</div>
<!-- 所属文集 -->
<p class="search_result_info">
<a>{{ result.create_user }}</a> - <span style="font-size: 14px;color: #999;">{{result.modify_time}}</span></p>
</div>
{% endfor %}
{% endif %}
</div>
<!-- 主体结束 -->
<!-- 分页 -->
<div class="layui-row project-list-page" style="text-align: center;">
<div class="layui-box layui-laypage layui-laypage-default">
<!-- 上一页 -->
{% if datas.has_previous %}
<a href="?page={{ datas.previous_page_number }}&kw={{kw}}&type={{search_type}}&d_range={{date_range}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
{% else %}
<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
{% endif %}
<!-- 当前页 -->
<span class="layui-laypage-curr">
<em class="layui-laypage-em"></em>
<em>{{ datas.number }}/{{ datas.paginator.num_pages }}</em>
</span>
<!-- 下一页 -->
{% if datas.has_next %}
<a href="?page={{ datas.next_page_number }}&kw={{kw}}&type={{search_type}}&d_range={{date_range}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
{% else %}
<a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
{% endif %}
</div>
</div>
<!-- 分页结束 -->
<!-- 页脚 -->
{% include 'app_doc/foot_base.html' %}
<!-- 页脚结束 -->
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
{% block custom_script %}
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
var layer = layui.layer;
var form = layui.form;
function positionFooter() {
// 获取页脚的高度
footerHeight = $(".layui-footer").height();
// 获取页脚的高度
// scrollTop() 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
footerTop = ($(window).scrollTop() + $(window).height() - footerHeight - 35)+"px";
//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
if(($(".layui-header").height() + $(".index-control").height() + $(".project-list-content").height() + $(".project-list-page").height() + 16) < $(window).height()) {
console.log("页脚置底")
$(".layui-footer").css({ position: "absolute",left:"0" }).stop().css({top:footerTop});
}else{
$(".layui-footer").css({ position: ""})
}
};
$(window).bind("load", function() {
// 设置页脚位置
var footerHeight = 0;
var footerTop = 0;
positionFooter();
//$(window).scroll(positionFooter).resize(positionFooter);
//设置条件栏选中值
var url = layui.url();
console.log(url)
$("#sel-role").val(url.search.role);
$("#sel-sort").val(url.search.sort);
layui.form.render('select');
});
// 搜索词高亮
function keyLight(id, key, bgColor){
var oDiv = document.getElementById(id),
sText = oDiv.innerHTML,
bgColor = bgColor || "#c00",
sKey = "<span name='addSpan' style='color: "+bgColor+";'>"+key+"</span>",
num = -1,
rStr = new RegExp(key, "ig"),
rHtml = new RegExp("\<.*?\>","ig"), //匹配html元素
aHtml = sText.match(rHtml); //存放html元素的数组
sText = sText.replace(rHtml, '{~}'); //替换html标签
// sText = sText.replace(rStr,sKey); //替换key
sText = sText.replace(rStr,function(text){
return "<span name='addSpan' style='color: "+bgColor+";'>"+text+"</span>"
}); //替换key
sText = sText.replace(/{~}/g,function(){ //恢复html标签
num++;
return aHtml[num];
});
oDiv.innerHTML = sText;
};
keyLight('search_result',"{{kw}}")
// 侦听Select下拉框的选择事件
form.on('select()', function(data){
var filter_data = form.val("filter-time-form");
console.log(filter_data)
window.location.href = '{% url "search" %}?kw={{kw}}&type={{search_type}}' + '&d_range=' + filter_data['d_range']
});
// 当前搜索类型动态设置
tagCurrentSearchType = function(){
if('{{ search_type }}' == 'doc'){
$('#search_doc').addClass('current_search_type')
$('#search_project').removeClass('current_search_type')
}else if('{{ search_type }}' == 'pro'){
$('#search_project').addClass('current_search_type')
$('#search_doc').removeClass('current_search_type')
}
}
tagCurrentSearchType();
</script>
<script>
//修改用户密码
changePwd = function(uid,username){
layer.open({
type:1,
title:'修改密码',
area:'300px;',
id:'changePwd',
content:'<div style="padding:10px 0 0 20px;">修改用户[' + username + ']的密码：</div><div style="padding: 20px;"><input class="layui-input" type="password" id="newPwd1" style="margin-bottom:10px;" placeholder="输入新密码" required lay-verify="required"><input class="layui-input" type="password" id="newPwd2" placeholder="再次确认新密码" required lay-verify="required"></div>',
btn:['确认修改','取消'],
yes:function (index,layero) {
layer.load(1);
data = {
'password':$("#newPwd1").val(),
'password2':$("#newPwd2").val(),
}
$.post("{% url 'modify_pwd' %}",data,function(r){
layer.closeAll("loading");
if(r.status){
//修改成功
window.location.reload();
//layer.close(index)
}else{
//修改失败，提示
//console.log(r)
layer.msg(r.data)
}
})
},
})
};
</script>
<!-- 统计代码开始 -->
{% if debug %}
{% else %}
{{ static_code | safe }}
{% endif %}
<!-- 统计代码结束 -->
{% endblock %}
</body>
</html>
Copy Permalink