177 行
7.5 KiB
HTML
177 行
7.5 KiB
HTML
{% extends 'base/base.html' %}
|
|
<style>
|
|
.ui .grid-item-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui .grid-item {
|
|
width: 33%;
|
|
box-shadow: 0.5px 0.51px 0.5px 1px #dfdada;
|
|
}
|
|
</style>
|
|
{% block header %}
|
|
<div class="ui text container">
|
|
<a id="hitokoto" class="ui mini black pointing below label"><i class="quote left icon"></i></a>
|
|
<h1 class="ui inverted logo header">
|
|
<img class="ui centered image" src="/static/images/logo-white.svg" alt="Logo">
|
|
</h1>
|
|
<h2 class="ui inverted header"></h2>
|
|
<div id="search-shortcuts" class="ui mini labels">
|
|
{% for item in search_list %}
|
|
<a class="ui black label red" data-value="{{ item.name }}" data-tooltip="{{ item.name }}"
|
|
data-variation="mini basic" data-position="top center" data-inverted="">
|
|
<i class="{{ item.icon }}"></i></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="ui inverted fluid right action input" id="search-div">
|
|
<input id="search-query" type="text" placeholder="立即搜索" autofocus="autofocus">
|
|
<select id="search-services" class="ui compact selection dropdown" style="height: auto;">
|
|
{% for item in search_list %}
|
|
<option value="{{ item.name }}" data-url="{{ item.url }}">
|
|
<i class="{{ item.icon }}"></i> {{ item.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="ui black icon button btn-search"><i class="search icon"></i></div>
|
|
</div>
|
|
<div id="badges">
|
|
<a href="/analytics.html" target="_blank">
|
|
<img src="https://img.shields.io/badge/搜索🔍-{{ get_library_data()['search'] }}-orange?logo=arlo"></a>
|
|
<a href="/analytics.html" target="_blank">
|
|
<img
|
|
src="https://img.shields.io/badge/导航🧭-{{ get_library_data()['quick'] }}-orange?logo=apacheairflow"></a>
|
|
<a href="/analytics.html" target="_blank">
|
|
<img src="https://img.shields.io/badge/用户🙎-{{ get_user_total()['total'] }}-red?logo=aseprite"></a>
|
|
<a id="today-visitors" href="/analytics.html">
|
|
<img src="https://img.shields.io/badge/%E4%BB%8A%E6%97%A5%E8%AE%BF%E5%AE%A2-{{ get_today_data()['views'] }}-green?logo=angellist"
|
|
alt="Today Visitors"></a>
|
|
<a id="live-visitors" href="/analytics.html">
|
|
<img src="https://img.shields.io/badge/%E5%BD%93%E5%89%8D%E5%9C%A8%E7%BA%BF-{{ get_today_data()['online'] }}-green?logo=angellist"
|
|
alt="Live Visitors"></a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="ui vertical stripe links segment">
|
|
<div class="ui equal width stackable internally celled grid">
|
|
{% for list in quick_group %}
|
|
{% if list|length > 10 %}
|
|
<div class="links column grid-item" style="width: 100%;box-shadow: 0.5px 0.51px 0.5px 1px #dfdada;">
|
|
{% else %}
|
|
<div class="links column grid-item" style="width: 33%;box-shadow: 0.5px 0.51px 0.5px 1px #dfdada;">
|
|
{% endif %}
|
|
<div class="ui mini top attached label">{{ list[0]['cate'] }}</div>
|
|
<div class="ui mini labels">
|
|
{% for item in list %}
|
|
<a class="ui small {{ item.color }} label link" href="/go/quick/{{item.id}}.html" target="_blank" data-content="{{ item.summary }}">
|
|
{% if item.img %}
|
|
<image class="lazy" data-original="{{ item.img }}" />
|
|
{% endif %}
|
|
<i class="{{ item.icon }}"></i>
|
|
{{ item.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block footer_script %}
|
|
<script>
|
|
$(document).ready(function () {
|
|
// start
|
|
set_search();
|
|
$('#search-query').focus();
|
|
$('.link').popup();
|
|
$('.grid').masonry({
|
|
// options
|
|
itemSelector: '.grid-item',
|
|
columnWidth: 3
|
|
});
|
|
$("img").lazyload({effect: "fadeIn",threshold :180});
|
|
$('.btn-search').click(function () {
|
|
let query = $('#search-query').val();
|
|
query = encodeURIComponent(query);
|
|
let url = $('#search-services').find("option:selected").attr("data-url")
|
|
if (query) {
|
|
let next_url = url.replaceAll("{query}", query)
|
|
// console.log(next_url)
|
|
window.open(next_url, "_black")
|
|
} else {
|
|
$('#search-div').addClass('error');
|
|
$('#search-query').attr('placeholder', '请输入搜索内容');
|
|
}
|
|
})
|
|
|
|
$('#search-services ').change(function () {
|
|
var search = $(this).children('option:selected').val()
|
|
save_search(search)
|
|
set_search(search)
|
|
})
|
|
|
|
$('#search-services').dropdown();
|
|
function save_search(search) {
|
|
Cookies.set("mine-search", search);
|
|
}
|
|
|
|
function get_search() {
|
|
var search = Cookies.get("mine-search")
|
|
// console.log(search)
|
|
if (search === undefined) {
|
|
search = "baidu"
|
|
}
|
|
// console.log(search)
|
|
return search;
|
|
}
|
|
|
|
function set_search() {
|
|
$('#search-services').find("option").each(function (i, n) {
|
|
if ($(n).attr("value") === get_search()) {
|
|
$(n).attr("selected", true);
|
|
} else {
|
|
$(n).attr("selected", false);
|
|
}
|
|
})
|
|
}
|
|
|
|
// shortcuts
|
|
$('#search-shortcuts .ui.label').each(function () {
|
|
$(this).click(function () {
|
|
var search = $(this).attr('data-value')
|
|
save_search(search)
|
|
set_search(search)
|
|
});
|
|
});
|
|
|
|
// query input: input anything to restore
|
|
$('#search-query').keyup(function (event) {
|
|
if (event.key) {
|
|
if ($('#search-query').val()) {
|
|
$('#search-div').removeClass('error');
|
|
$('#search-query').attr('placeholder', '立即搜索');
|
|
}
|
|
;
|
|
}
|
|
;
|
|
});
|
|
// query suggestions
|
|
var sugParams = {
|
|
"XOffset": -3, //提示框位置横向偏移量,单位px
|
|
"YOffset": -2, //提示框位置纵向偏移量,单位px
|
|
// "width": $('#search-query').innerWidth(), //提示框宽度，单位px
|
|
"fontColor": "rgba(0, 0, 0, 0.87)", //提示框文字颜色
|
|
"fontColorHI": "rgba(0, 0, 0, 0.87)", //提示框高亮选择时文字颜色
|
|
"fontSize": "14px", //文字大小
|
|
"fontFamily": "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif", //文字字体
|
|
"borderColor": "rgba(34, 36, 38, 0.14902)", //提示框的边框颜色
|
|
"bgcolorHI": "rgba(0, 0, 0, 0.05)", //提示框高亮选择的颜色
|
|
"sugSubmit": false //选中提示框中词条时是否提交表单
|
|
};
|
|
BaiduSuggestion.bind('search-query', sugParams);
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |