分类：前端 - 宏尘极客|笔记

网站添加 PWA 配置，使网站支持像应用一样安装

PWA（渐进式Web应用）是一种让网站具备类似原生应用体验的技术，支持离线访问和主屏添加功能。配置PWA需完成以下步骤：创建manifest.json文件定义应用元数据（如名称、图标等），并在HTML中引入；注册Service Worker以缓存资源实现离线访问；添加必要的Meta标签确保功能兼容性。使用Dream2.0 Plus主题时，部分配置可自动完成，简化操作流程。

其他工具技术前端

CSS 布局属性Display和Position介绍

CSS 布局属性Display和Position介绍 1. Display 属性 Block: 将元素渲染为块级元素，如 <div>、<p>。 Inline: 将元素渲染为内联元素，如 <span>、<a>。 None: 元素不会被渲染，也不会占据任何空间。

技术前端

Css选择器简介

CSS是用于描述HTML文档样式的语言，可控制网页布局、颜色、字体等视觉表现。其语法由选择器和声明组成，常见选择器包括元素选择器（通过HTML元素名选择）、类选择器（使用点标识）和ID选择器（使用井号标识）。CSS样式属性涵盖文本颜色、背景色、字体大小、对齐方式、边距等。示例展示了如何为段落设置颜色、字体、对齐等样式，通过选择器将样式应用到指定元素上。

技术前端

Halo博客 - 主题Dream for Halo 2.x 关于友链页面ID填写不正确时，后台显示评论未知的问题

本教程介绍如何正确获取页面ID以解决友链界面评论显示为“未知未知”的问题。步骤包括新建专用评论页面，设置标题为“友情链接”、别名为“friendly-links”并启用评论功能；随后通过浏览器开发者工具访问该页面，在源代码中搜索关键词定位评论模块并复制data-id值。最后将此ID填入指定位置即可确保评论正确显示为“页面页面标题”。

前端技术

Halo博客 - 主题Dream for Halo 2.x 关于友链关联用户而不是站点的修改方案

原始代码实现友链页面功能，显示分类友链列表及申请方法，默认关联用户信息。修改后关联站点信息：标题显示站点名称而非用户名；图标使用站点favicon而非用户头像；描述取自SEO设置。更改文件位于theme-dream\templates\links.html，重启容器生效。

前端技术

css 实现自动添加‘...’省略号，支持多行和单行显示，需要支持webkit的属性可用

本文介绍使用CSS实现文本省略号显示的方法，通过webkit属性控制单行或多行文本溢出效果。关键代码包括设置overflow: hidden、text-overflow: ellipsis，利用-webkit-box布局模型，调整-webkit-line-clamp值控制显示行数（1为单行，3为多行），并配合word-break: break-all处理自动换行。该方法需兼容webkit内核浏览器。

前端技术