分类前端技术下的文章

ElasticSearch 实现全文检索支持（PDF、TXT、Word、HTML等文件）通过 ingest-attachment 插件实现文档的检索_es全文检索word文件

2024-08-26

要在ElasticSearch中实现对多种文件格式的全文检索，你可以使用ElasticSearch的ingest node功能和相关插件，如ingest-attachment。以下是一个基本的步骤和示例代码，展示如何配置ElasticSearch以索引并搜索附件文件内容。

确保你的ElasticSearch集群配置了ingest node。
安装ingest-attachment插件。
创建一个index template，定义文档的mappings和ingest pipeline。
使用ingest pipeline索引文档。
执行全文搜索。

以下是相关的配置和索引文档的示例代码：




# 1. 创建ingest pipeline
PUT _ingest/pipeline/attachment
{
  "description" : "Extract attachment information",
  "processors" : [
    {
      "attachment" : {
        "field" : "data",
        "indexed_chars" : -1,
        "ignore_missing": true
      }
    }
  ]
}
 
# 2. 创建index template
PUT _template/attachment_template
{
  "index_patterns": ["*"],
  "settings": {
    "number_of_shards": 1,
    "number_of_replicas": 0
  },
  "mappings": {
    "dynamic": "true",
    "properties": {
      "data": {
        "type": "text",
        "fielddata": true
      }
    }
  },
  "ingest_pipeline": "attachment"
}
 
# 3. 索引文档 (以PDF文件为例)
POST /my_attachments/_doc?pipeline=attachment
{
  "data": {
    "value": "/path/to/your/document.pdf"
  }
}
 
# 4. 搜索文档
GET /my_attachments/_search
{
  "query": {
    "match": {
      "data": "search text"
    }
  }
}

请注意，你需要替换/path/to/your/document.pdf为你要索引的文件的实际路径。ingest-attachment插件将自动解析文件并索引其内容，使其可以用于全文搜索。

确保你的ElasticSearch集群有足够的资源来处理大型文件的解析和索引，因为这个过程可能会消耗大量内存和CPU资源。

- 阅读更多 -

【HTML — 构建网络】HTML 入门

System

2024-08-26

所有,html




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

这段代码是一个简单的HTML示例，它展示了如何创建一个基本的网页。这个网页包括一个标题、一个段落和一个链接。这对于学习如何构建基本的网页结构是非常有用的。

- 阅读更多 -

html插入视频的方法

System

2024-08-26

所有,html

在HTML中插入视频，可以使用<video>标签。以下是一个基本的例子：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

width和height属性用于设置视频的尺寸。
controls属性添加视频播放控件，如播放、暂停和音量控制。
<source>标签指定视频文件的路径和类型。
如果浏览器不支持<video>标签，会显示<source>标签之间的文本。

确保提供不同的视频格式以便不同的浏览器支持。常见的视频格式包括MP4 (MPEG-4 Part 14) 和 WebM (VP8 with Vorbis).

如果需要在不支持<video>标签的旧浏览器中播放视频，可能需要使用第三方播放器插件，如YouTube或Vimeo提供的嵌入代码。

- 阅读更多 -

前端H5+CSS3回到顶部功能

System

2024-08-26

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5+CSS3 回到顶部示例</title>
<style>
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
    z-index: 9999;
  }
  .back-to-top:hover {
    opacity: 0.8;
  }
</style>
</head>
<body>
<!-- 页面内容 -->
 
<div class="back-to-top">回到顶部</div>
 
<script>
  // 获取页面中的“回到顶部”按钮
  const btn = document.querySelector('.back-to-top');
 
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 当页面向下滚动超过500px时显示按钮，否则隐藏按钮
    if (window.pageYOffset > 500) {
      btn.style.display = 'block';
    } else {
      btn.style.display = 'none';
    }
  });
 
  // 点击按钮回到顶部的功能
  btn.addEventListener('click', function() {
    // 平滑滚动到页面顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>
</body>
</html>

这段代码实现了一个简单的回到顶部按钮，当页面向下滚动超过500px时显示这个按钮，点击按钮会平滑滚动至页面顶部。CSS部分定义了按钮的样式和位置，JavaScript部分则监听了滚动事件并处理了按钮的显示和点击事件。

- 阅读更多 -

前端JS特效第6波：H5+CSS3幻灯片图片切换代码

System

2024-08-26

所有,css3

以下是一个简单的H5和CSS3应用于创建幻灯片图片切换效果的代码示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯片图片切换</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 50px;
    overflow: hidden;
  }
  .slider img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;
 
  setInterval(function() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].classList.add('active');
  }, 3000); // 切换时间
</script>
 
</body>
</html>

这段代码使用了CSS3中的transition属性来平滑地过渡图片的透明度，并使用了JavaScript中的setInterval函数来定期更换当前活跃的图片。这个示例假设您有至少3张图片，并且它们的路径分别是image1.jpg、image2.jpg和image3.jpg。您可以根据实际情况调整图片的路径和数量。

- 阅读更多 -

学习css3，使用代码实现一根心爱的二踢脚_css画脚丫，源码+原理+手写框架

System

2024-08-26

所有,css3

在CSS中，我们可以使用边框（border）、圆角（border-radius）和透明度（opacity）等特性来画出一根心爱的二踢脚丫。以下是实现这个图案的代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心爱的二踢脚丫</title>
<style>
  .shoe {
    position: relative;
    width: 100px;
    height: 150px;
    background: #f0e68c;
    border-top-left: 50px solid #333;
    border-top-right: 50px solid #333;
    border-bottom: 10px solid #333;
    border-radius: 70% 70% 50% 50%;
    margin: 50px auto;
  }
 
  .shoe:before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background: #f0e68c;
    border-radius: 50%;
    z-index: -1;
  }
 
  .shoe:after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    background: #333;
    border-radius: 50%;
    z-index: -2;
  }
</style>
</head>
<body>
<div class="shoe"></div>
</body>
</html>

这段代码定义了一个.shoe类，它创建了一个带有底部边框的椭圆，并使用:before和:after伪元素来创建脚丫的上半部分和底部的圆形。通过调整尺寸和边框半径，可以进一步完善和优化这个图案，使其更加逼真。

- 阅读更多 -

link 与 @import：CSS 样式表的加载策略

System

2024-08-26

所有,css

在CSS中，有两种方式可以引入样式表：

使用<link>标签直接引入外部样式表。
使用@import规则在CSS文件中引入其他CSS文件。

<link>标签用于HTML文档中，而@import规则用于CSS文件内。

<link>标签




<link rel="stylesheet" type="text/css" href="styles.css">

<link>标签是XHTML标准的一部分，用于定义文档与外部资源（如CSS、图片等）的关系。浏览器会在解析HTML结构的同时下载<link>引用的资源。

@import规则




@import url("styles.css");

@import规则用于CSS文件中，它允许在一个CSS文件中引入另一个CSS文件。

区别

加载顺序：使用<link>的样式表会同时加载，而使用@import的样式表会等到页面全部加载完毕后再加载。
兼容性：@import可能不被一些老旧浏览器支持。
控制能力：@import可以在CSS文件中根据条件引入不同的样式表，而<link>不具备这种灵活性。

综上所述，通常推荐使用<link>标签来引入CSS，因为它更加直接、简单，并且是所有现代浏览器都支持的标准方法。

- 阅读更多 -

前端三剑客 —— CSS （坐标问题、定位问题和图片居中）

System

2024-08-26

所有,css

在CSS中，解决坐标问题、定位问题和图片居中可以使用不同的技术。以下是一些常用的方法：

坐标问题：使用position属性结合top、right、bottom、left属性来控制元素的位置。




.element {
  position: absolute;
  top: 100px;
  left: 200px;
}

定位问题：使用flexbox或grid布局系统来对子元素进行排版。




.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

图片居中：可以使用margin属性设置为auto来实现水平居中。




img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 根据需要设置宽度 */
}

或者使用flexbox来居中图片：




.container {
  display: flex;
  justify-content: center;
}
 
.container img {
  max-width: 100%; /* 根据需要设置最大宽度 */
}

这些是解决坐标问题、定位问题和图片居中的常见方法，具体使用哪种方法取决于具体的布局需求和上下文环境。

- 阅读更多 -

CSS-自适应导航栏（flex | grid）

System

2024-08-26

所有,css

以下是一个使用CSS Flexbox创建自适应导航栏的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应导航栏</title>
<style>
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #333;
  }
 
  .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
 
  .nav ul li {
    margin-left: 10px;
    margin-right: 10px;
  }
 
  .nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: block;
  }
 
  .nav ul li a:hover {
    background-color: #555;
  }
</style>
</head>
<body>
 
<div class="nav">
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</div>
 
</body>
</html>

这段代码创建了一个水平的导航栏，使用Flexbox布局进行对齐和空间分配。导航链接是一个无序列表，每个链接被包裹在一个列表项<li>中，并且使用了a元素的display: block属性来允许为链接指定宽度和填充。

- 阅读更多 -

Vite 中怎么添加全局 scss 文件

System

2024-08-26

所有,css

在Vite项目中添加全局SCSS文件，你需要做以下几步：

安装SCSS加载器：
确保你已经安装了sass或scss相关的包，例如sass或sass-loader。如果还没有安装，可以通过npm或yarn来安装：




npm install sass -D
# 或者
yarn add sass -D

创建全局SCSS文件：
在项目中创建一个全局的SCSS文件，比如styles/global.scss。
配置Vite配置文件：
在Vite配置文件中（通常是vite.config.js或vite.config.ts），使用Vite提供的插件API或配置选项来引入全局SCSS文件。

例如，你可以使用Vite提供的css.preprocessorOptions配置来指定全局样式文件：




// vite.config.js
import { defineConfig } from 'vite';
import scss from 'sass';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
});

在这个配置中，@import "@/styles/global.scss";指令会被加入到每个被Vite处理的SCSS文件中，使得global.scss中的样式规则会被全局应用。

注意：@ 符号通常在Vite配置中代表项目的src目录。

确保你的全局SCSS文件中的样式规则是全局作用域的，或者使用Vite提供的additionalData选项来避免局部样式意外地污染全局命名空间。

- 阅读更多 -