-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathothers.js
More file actions
149 lines (141 loc) · 5.88 KB
/
Copy pathothers.js
File metadata and controls
149 lines (141 loc) · 5.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
// 博客列表数据
const blogList = [
{
title: 'Python无缝衔接Flutter的可行思路',
content: 'Python无缝衔接Flutter的可行思路',
icon: 'https://PythonnotJava.github.io/src/img/pyflutter.jpg',
link: '../../h5/other/Python无缝衔接Flutter的可行思路.html'
},
{
title: 'Dart补充',
content: 'Dart补充，尤其关于类的方面',
icon: 'https://img.quanxiaoha.com/quanxiaoha/164839133079354',
link: '../../h5/other/Dart补充.html'
},
{
title: '新版本Conda修改虚拟环境路径和包路径的方法',
content: '新版本Conda修改虚拟环境路径和包路径的方法',
icon: 'https://anaconda.org/static/img/anaconda-symbol.svg',
link: '../../h5/other/新版本Conda修改虚拟环境路径和包路径的方法.html'
},
{
title: 'Gurobi单变量非线性优化问题',
content: 'Gurobi单变量非线性优化问题的几种改进快速计算的方法',
icon: 'https://www.go-soft.cn/static/upload/image/20230310/1678433049669047.jpg',
link: '../../h5/other/Gurobi单变量非线性优化问题.html'
},
{
title: 'Matplotlib',
content: 'Matplotlib超详细的入门教程，几乎涵盖所有基础内容',
icon: 'https://files.realpython.com/media/python-plotting-matplotlib.7b528c0f5f0b.jpg',
link: '../../h5/other/blogMatplotlib.html'
},
{
title: 'Dart快速入门',
content: '从基本数据类型到面向对象快速入门Dart编程',
icon: 'https://img.quanxiaoha.com/quanxiaoha/164839133079354',
link: '../../h5/other/Dart语言快速入门.html'
},
{
title: 'Dart快速入门（2）',
content: '从基本数据类型到面向对象快速入门Dart编程（2）',
icon: 'https://img.quanxiaoha.com/quanxiaoha/164839133079354',
link: '../../h5/other/Dart快速入门（2）.html'
},
{
title: 'Dart高级教程',
content: '快速入门一些Dart的高级语法以及语法糖（附源代码下载链接）',
icon: 'https://img.quanxiaoha.com/quanxiaoha/164839133079354',
link: '../../h5/other/Dart高级教程.html'
},
{
title: 'Dart同步操作文件',
content: 'Dart同步操作文件的一些方法的学习',
icon: 'https://img.quanxiaoha.com/quanxiaoha/164839133079354',
link: '../../h5/other/Dart同步操作文件.html'
},
{
title: '自定义Flutter的构建',
content: '自定义Flutter模板',
icon: 'https://img.quanxiaoha.com/quanxiaoha/164839133079354',
link: '../../h5/other/自定义Flutter的构建.html'
},
{
title: 'C#入门笔记',
content: 'C#入门笔记，基于.net 8.0',
icon: 'https://th.bing.com/th?id=OSK.GhOfIXkD4m2VC8BFLppZ1d0-SeI8Fj5pLmObRQzFIyY&w=102&h=102&c=7&o=6&dpr=1.3&pid=SANGAM',
link: '../../h5/other/C-sharp入门笔记.html'
},
];
const blogListContainer= document.getElementById('blogListContainer');
// 初始化博客列表
function initBlogList() {
blogListContainer.innerHTML = '';
blogList.forEach(blog => {
const blogCard = document.createElement('div');
blogCard.className = 'blog-card';
// 添加链接
const link = document.createElement('a');
link.href = blog.link;
// 创建博客图标元素
const icon = document.createElement('img');
icon.className = 'blog-icon';
icon.src = blog.icon;
// 创建博客内容元素
const content = document.createElement('div');
content.className = 'blog-content';
// 创建博客标题元素
const title = document.createElement('div');
title.className = 'blog-title';
title.textContent = blog.title;
// 创建博客描述元素
const description = document.createElement('div');
description.className = 'blog-description';
description.textContent = blog.content;
// 将元素添加到DOM中
content.appendChild(title);
content.appendChild(description);
link.appendChild(icon);
link.appendChild(content);
blogCard.appendChild(link);
blogListContainer.appendChild(blogCard);
});
}
// 搜索功能
function searchBlog() {
const keyword = document.getElementById('searchInput').value;
const blogCards = document.getElementsByClassName('blog-card');
Array.from(blogCards).forEach(blogCard => {
const title = blogCard.querySelector('.blog-title').textContent; // 获取标题文本内容
const description = blogCard.querySelector('.blog-description').textContent; // 获取描述文本内容
if (title.includes(keyword) || description.includes(keyword)) {
blogCard.style.display = 'flex';
// 关键字高亮显示
const regex = new RegExp(`(${keyword})(?![^<]*>|[^<>]*<\/a>)`, 'gi');
blogCard.innerHTML = blogCard.innerHTML.replace(regex, '<span class="highlight">$1</span>');
// console.log(blogCard.innerHTML);
} else {
blogCard.style.display = 'none';
}
});
}
// 返回按钮功能
function returnToAllBlogs() {
const blogCards = document.getElementsByClassName('blog-card');
Array.from(blogCards).forEach(blogCard => {
blogCard.style.display = 'flex';
blogCard.innerHTML = blogCard.innerHTML.replace('<span class="highlight">', '').replace('</span>', '');
});
}
// 添加搜索按钮点击事件
document.getElementById('searchButton').addEventListener('click', searchBlog);
// 添加回车键事件，触发搜索功能
document.getElementById('searchInput').addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
searchBlog();
}
});
// 添加返回按钮点击事件
document.getElementById('returnButton').addEventListener('click', returnToAllBlogs);
// 初始化博客列表
initBlogList();