网站公安报备/大众点评seo关键词优化

网站公安报备,大众点评seo关键词优化,wordpress2014,app开发项目前言 Svelte，一个语法简洁、入门容易，面向未来的前端框架。 从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1： Svelte …

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

image.png

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

高级路由

剩余参数

如果路由段的数量未知，您可以使用剩余语法 — 例如您可以像这样实现 GitHub 的文件查看器…

/[org]/[repo]/tree/[branch]/[...file]

…在这种情况下，对 /sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md 的请求将导致以下参数可供页面使用：

// @noErrors
{org: 'sveltejs',repo: 'kit',branch: 'main',file: 'documentation/docs/04-advanced-routing.md'
}

[!NOTE] src/routes/a/[...rest]/z/+page.svelte 将匹配 /a/z（即完全没有参数）以及 /a/b/z 和 /a/b/c/z 等。请确保检查剩余参数的值是否有效，例如使用匹配器。

404 页面

剩余参数还允许您渲染自定义 404。给定这些路由…

src/routes/
├ marx-brothers/
│ ├ chico/
│ ├ harpo/
│ ├ groucho/
│ └ +error.svelte
└ +error.svelte

…如果您访问 /marx-brothers/karl，marx-brothers/+error.svelte 文件将不会被渲染，因为没有匹配到路由。如果您想渲染嵌套的错误页面，您应该创建一个匹配任何 /marx-brothers/* 请求的路由，并从中返回 404：

src/routes/
├ marx-brothers/
+++| ├ [...path]/+++
│ ├ chico/
│ ├ harpo/
│ ├ groucho/
│ └ +error.svelte
└ +error.svelte

/// file: src/routes/marx-brothers/[...path]/+page.js
import { error } from '@sveltejs/kit';/** @type {import('./$types').PageLoad} */
export function load(event) {error(404, 'Not Found');
}

[!NOTE] 如果您不处理 404 情况，它们将出现在 handleError 中

可选参数

像 [lang]/home 这样的路由包含一个名为 lang 的必需参数。有时需要让这些参数成为可选的，这样在这个例子中 home 和 en/home 都指向同一个页面。您可以通过将参数包裹在另一对括号中来实现：[[lang]]/home

注意，可选路由参数不能跟在剩余参数后面（[...rest]/[[optional]]），因为参数是"贪婪"匹配的，可选参数永远不会被使用。

匹配

像 src/routes/fruits/[page] 这样的路由会匹配 /fruits/apple，但它也会匹配 /fruits/rocketship。我们不希望这样。您可以通过在 params 目录中添加一个 匹配器 — 它接收参数字符串（"apple" 或 "rocketship"）并在有效时返回 true — 来确保路由参数格式正确…

/// file: src/params/fruit.js
/*** @param {string} param* @return {param is ('apple' | 'orange')}* @satisfies {import('@sveltejs/kit').ParamMatcher}*/
export function match(param) {return param === 'apple' || param === 'orange';
}

…并增强您的路由：

src/routes/fruits/[page+++=fruit+++]

如果路径名不匹配，SvelteKit 将尝试匹配其他路由（使用下面指定的排序顺序），最终返回 404。

params 目录中的每个模块对应一个匹配器，除了 *.test.js 和 *.spec.js 文件，这些文件可用于对匹配器进行单元测试。

[!NOTE] 匹配器在服务端和浏览器中都会运行。

排序

多个路由可能匹配同一个路径。例如，以下每个路由都会匹配 /foo-abc：

src/routes/[...catchall]/+page.svelte
src/routes/[[a=x]]/+page.svelte
src/routes/[b]/+page.svelte
src/routes/foo-[c]/+page.svelte
src/routes/foo-abc/+page.svelte

SvelteKit 需要知道正在请求哪个路由。为此，它根据以下规则进行排序…

  • 更具体的路由具有更高的优先级（例如，没有参数的路由比有一个动态参数的路由更具体，以此类推）
  • 带有匹配器的参数（[name=type]）比没有匹配器的参数（[name]）具有更高的优先级
  • [[optional]] 和 [...rest] 参数将被忽略，除非它们是路由的最后一部分，在这种情况下它们被视为最低优先级。换句话说，x/[[y]]/z 在排序时被视为与 x/z 等同
  • 平局通过字母顺序解决

…导致此排序结果，这意味着 /foo-abc 将调用 src/routes/foo-abc/+page.svelte,而 /foo-def 将调用 src/routes/foo-[c]/+page.svelte 而不是不太具体的路由:

src/routes/foo-abc/+page.svelte
src/routes/foo-[c]/+page.svelte
src/routes/[[a=x]]/+page.svelte
src/routes/[b]/+page.svelte
src/routes/[...catchall]/+page.svelte

编码

某些字符不能用于文件系统 — Linux 和 Mac 上的 /，Windows 上的 \ / : * ? " < > |。# 和 % 字符在 URL 中有特殊含义，[ ] ( ) 字符在 SvelteKit 中有特殊含义，所以这些字符也不能直接用作路由的一部分。

如果要在路由中使用这些字符，您可以使用十六进制转义序列，其格式为 [x+nn]，其中 nn 是十六进制字符代码：

  • \ — [x+5c]
  • / — [x+2f]
  • : — [x+3a]
  • * — [x+2a]
  • ? — [x+3f]
  • " — [x+22]
  • < — [x+3c]
  • > — [x+3e]
  • | — [x+7c]
  • # — [x+23]
  • % — [x+25]
  • [ — [x+5b]
  • ] — [x+5d]
  • ( — [x+28]
  • ) — [x+29]

例如，要创建一个 /smileys/:-) 路由，您需要创建一个 src/routes/smileys/[x+3a]-[x+29]/+page.svelte 文件。

您可以使用 JavaScript 确定字符的十六进制代码：

':'.charCodeAt(0).toString(16); // '3a'，因此使用 '[x+3a]'

您也可以使用 Unicode 转义序列。通常您不需要这样做，因为您可以直接使用未编码的字符，但如果出于某种原因您不能有包含例如表情符号的文件名，那么您可以使用转义字符。换句话说，这些是等效的：

src/routes/[u+d83e][u+dd2a]/+page.svelte
src/routes/🤪/+page.svelte

Unicode 转义序列的格式是 [u+nnnn]，其中 nnnn 是介于 0000 和 10ffff 之间的有效值。（与 JavaScript 字符串转义不同，不需要使用代理对来表示超过 ffff 的代码点。）要了解更多关于 Unicode 编码的信息，请参考 使用 Unicode 编程。

[!NOTE] 由于 TypeScript 难以处理以 . 字符开头的目录，在创建例如 .well-known 路由时，您可能会发现对这些字符进行编码会很有用：src/routes/[x+2e]well-known/...

高级布局

默认情况下，布局层次结构 反映了 路由层次结构。在某些情况下，这可能不是您想要的。

(group)

也许您有一些路由是"应用"路由，应该有一个布局（例如 /dashboard 或 /item），而其他路由则是"营销"路由，应该有一个不同的布局（/about 或 /testimonials）。

我们可以用一个括号括起来的目录名称对这些路由进行分组 — 与普通目录不同，(app) 和 (marketing) 不影响路由的 URL 路径名：

src/routes/
+++│ (app)/+++
│ ├ dashboard/
│ ├ item/
│ └ +layout.svelte
+++│ (marketing)/+++
│ ├ about/
│ ├ testimonials/
│ └ +layout.svelte
├ admin/
└ +layout.svelte

您也可以直接将一个 +page 放在 (group) 中，例如如果 / 应该是一个 (app) 或 (marketing) 页面。

跳出布局

根布局适用于您的应用的每个页面 — 如果省略，它默认为 {@render children()}。如果您希望某些页面有不同于其余页面的布局层次结构，那么您可以将整个应用放在一个或多个组内，除了 不应继承公共布局的路由。

在上面的例子中，/admin 路由不继承 (app) 或 (marketing) 布局。

+page@

页面可以在逐个路由的基础上跳出当前布局层次结构。假设我们在前面例子的 (app) 组内有一个 /item/[id]/embed 路由：

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
+++│ │ │ │ └ +page.svelte+++
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

通常，这将继承根布局、(app) 布局、item 布局和 [id] 布局。我们可以通过附加 @ 后跟路由段名来重置到其中一个布局 — 对于根布局，使用空字符串。在此例子中，我们可以选择以下选项：

  • +page@[id].svelte - 继承自 src/routes/(app)/item/[id]/+layout.svelte
  • +page@item.svelte - 继承自 src/routes/(app)/item/+layout.svelte
  • +page@(app).svelte - 继承自 src/routes/(app)/+layout.svelte
  • +page@.svelte - 继承自 src/routes/+layout.svelte
src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
+++│ │ │ │ └ +page@(app).svelte+++
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

+layout@

像页面一样，布局本身也可以使用相同的方式跳出其父布局层次结构。例如，+layout@.svelte 组件将将重置其所有子路由的层次结构。

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte  // 使用 (app)/item/[id]/+layout.svelte
│ │ │ ├ +layout.svelte  // 继承自 (app)/item/+layout@.svelte
│ │ │ └ +page.svelte    // 使用 (app)/item/+layout@.svelte
│ │ └ +layout@.svelte   // 继承自根布局，跳过 (app)/+layout.svelte
│ └ +layout.svelte
└ +layout.svelte

何时使用布局分组

并非所有用例都适合使用布局分组，您也不应该觉得必须使用它们。可能您的用例会导致复杂的 (group) 嵌套，或者您不想为一个特例引入 (group)。使用其他方式如组合（可复用的 load 函数或 Svelte 组件）或 if 语句来实现您想要的效果也完全可以。以下示例展示了一个回退到根布局并复用其他布局也可以使用的组件和函数：

<!--- file: src/routes/nested/route/+layout@.svelte --->
<script>import ReusableLayout from '$lib/ReusableLayout.svelte';let { data, children } = $props();
</script><ReusableLayout {data}>{@render children()}
</ReusableLayout>

/// file: src/routes/nested/route/+layout.js
// @filename: ambient.d.ts
declare module "$lib/reusable-load-function" {export function reusableLoad(event: import('@sveltejs/kit').LoadEvent): Promise<Record<string, any>>;
}
// @filename: index.js
// ---cut---
import { reusableLoad } from '$lib/reusable-load-function';/** @type {import('./$types').PageLoad} */
export function load(event) {// Add additional logic here, if neededreturn reusableLoad(event);
}

进一步阅读

  • 教程:高级路由

Svelte 中文文档

点击查看中文文档：SvelteKit 高级路由

系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/73628.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu系统保姆级Paperless-ngx部署指南：零基础实现文档云端化管理

Ubuntu系统保姆级Paperless-ngx部署指南：零基础实现文档云端化管理

文章目录 前言1.关于Paperless-ngx2.Docker部署3.简单使用paperless4.安装cpolar内网穿透5. 配置公网地址6. 配置固定公网地址总结 前言 在当今快节奏的办公环境中&#xff0c;文档管理成为了一个不可忽视的问题。想象一下这样的场景&#xff1a;你需要一份重要的合同&#xf…
阅读更多...
PostgREST实现DBaaS（数据库即服务）

PostgREST实现DBaaS（数据库即服务）

目录 配置使用 验证 token使用 上文部署高可用PostgreSQL14集群后&#xff0c;本文介绍PostgREST&#xff0c;以及如何基于PostgREST实现数据库即服务&#xff0c;PostgREST可以在 PostgreSQL 数据库上通过解析数据库结构&#xff08;如表、视图、存储过程、权限等&#xff…
阅读更多...
基于yolov11的铁路轨道铁轨缺陷检测系统python源码+pytorch模型+评估指标曲线+精美GUI界面

基于yolov11的铁路轨道铁轨缺陷检测系统python源码+pytorch模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv11的铁路轨道铁轨缺陷检测系统是一种高效、准确的自动化检测技术&#xff0c;专门用于识别和检测铁轨上的各种缺陷。该系统利用YOLOv11这一先进的深度学习模型&#xff0c;实现了对Corrugation&#xff08;波纹磨耗&#xff09;、Spalling&#xff08;剥…
阅读更多...
华为hcie证书考什么，怎么备考？

华为hcie证书考什么，怎么备考？

新盟教育 | 华为HALP授权培训合作伙伴 在ICT领域&#xff0c;华为HCIE证书是含金量极高的专业认证&#xff0c;它是对个人技术能力和专业素养的高度认可。对于渴望在网络、云计算、大数据等前沿领域深入发展的从业者而言&#xff0c;华为HCIE证书是一块强有力的职业敲门砖。 …
阅读更多...
华为hcia——Datacom实验指南——配置IPv4静态路由，默认路由和浮动静态路由

华为hcia——Datacom实验指南——配置IPv4静态路由，默认路由和浮动静态路由

什么是IPv4 IPv4静态路由&#xff0c;是手动配置的&#xff0c;不会随着网络拓扑的变化而变化&#xff0c;所配置的路由信息也不会在网络中传播&#xff0c;所以它主要运用在小型网络或者作为动态路由的补充。 IPv4的配置 配置的命令很简单 IP route-static &#xff08;目…
阅读更多...
Linux一步部署主DNS服务器

Linux一步部署主DNS服务器

​ #!/bin/bash #部署DHCP服务 #userli 20250319if [ "$USER" ! "root" ]then echo"错误&#xff1a;非root用户&#xff0c;权限不足&#xff01;"exit 0fi#防火墙与高级权限 systemctl stop firewalld && systemctl disable firewalld…
阅读更多...
JumpServer：一款企业级开源堡垒机

JumpServer：一款企业级开源堡垒机

在数字化运维时代&#xff0c;如何高效、安全地管控企业内部资产&#xff1f;JumpServer 作为一款完全开源的堡垒机&#xff0c;凭借其强大的 4A&#xff08;身份认证、授权控制、账号管理、安全审计&#xff09;能力与灵活的架构设计&#xff0c;实现事前授权、事中监察、事后…
阅读更多...
STM32硬件IIC与OLED使用

STM32硬件IIC与OLED使用

OLED屏幕介绍 OLED即有机发光管(Organic Light-Emitting Diode,OLED)。OLED显示技术具有自发光、广视角、几乎无穷高的对比度、较低功耗、极高反应速度、可用于绕曲性面板、使用温度范围广、构造及制程简单等有点&#xff0c;被认为是下一代的平面显示屏新兴应用技术 OLED显示…
阅读更多...
idea自动生成注释

idea自动生成注释

idea 自动生成注释 1 创建类时&#xff0c;自动生成注释 模板代码如下 /** * program: ${PROJECT_NAME} * * description: ${description} * * author: yun * * create: ${YEAR}-${MONTH}-${DAY} ${HOUR}:${MINUTE} **/ 2 在方法上使用快捷键生成注释 先新建一个…
阅读更多...
可视化图解算法：删除有序（排序）链表中重复的元素-II

可视化图解算法：删除有序（排序）链表中重复的元素-II

1. 题目 描述 给出一个升序排序的链表&#xff0c;删除链表中的所有重复出现的元素&#xff0c;只保留原链表中只出现一次的元素。 例如&#xff1a; 给出的链表为1→2→3→3→4→4→5, 返回1→2→5. 给出的链表为1→1→1→2→3 返回2→3. 数据范围&#xff1a;链表长度 0≤…
阅读更多...
树莓派超全系列文档--(7)RaspberryOS播放音频和视频

树莓派超全系列文档--(7)RaspberryOS播放音频和视频

播放音频和视频 播放音频和视频VLC 媒体播放器vlc GUIvlc CLI使用 cvlc 在没有图形用户界面的情况下播放媒体 在 Raspberry Pi OS Lite 上播放音频和视频指定音频输出设备指定视频输出设备同时指定音频和视频输出设备提高数据流播放性能 文章来源&#xff1a; http://raspberr…
阅读更多...
Wireshark学习

Wireshark学习

Wireshark简介 抓包前 1.打开wireshark得到下面的界面 2.选择菜单栏上捕获-> 选项&#xff0c;勾选WLAN网卡&#xff08;这里需要根据各自电脑网卡使用情况选择&#xff0c;简单的办法可以看使用的IP对应的网卡&#xff09;。点击开始。启动抓包。 3.wireshark启动后&am…
阅读更多...
[OS_4] 数学视角 | 多状态 | 模型检查器 | 程序验证(math)

[OS_4] 数学视角 | 多状态 | 模型检查器 | 程序验证(math)

程序 状态机 gdb 单步执行 状态迁移 状态里有什么&#xff1f;gdb 可以打印有一些特殊的状态迁移 硬件 状态机 指令执行 状态迁移 从 CPU Reset 开始执行 FirmwareFirmware 加载操作系统 (程序) 操作系统 状态机 (毫无疑问) 程序是一种真正意义上的 “数学严格” 的…
阅读更多...
互联网的“神经中枢”域名根服务器是如何演变的？

互联网的“神经中枢”域名根服务器是如何演变的？

互联网如同一条隐形的纽带&#xff0c;将全球数十亿人的生活和工作紧密相连。而在这庞大的网络体系中&#xff0c;域名根服务器则是支撑其平稳运行的“神经中枢”。那么域名根服务器是如何演变的呢&#xff1f; 一、域名根服务器互联网的“地址簿” 想象一下&#xff0c;当你…
阅读更多...
6.2、认证主要产品与应用

6.2、认证主要产品与应用

目录 认证主要产品认证产品主要技术指标认证技术应用认证技术应用 - 校园网应用认证技术应用 - 网络路由认证认证技术应用 - 用户登录设备认证技术应用 - 人脸识别门禁与eID 认证主要产品 应用认证产品主要形态有三种&#xff0c;硬件模式、软件模式和软硬相结合。硬件比如说认…
阅读更多...
一套SaaS多租户医疗云his源码，基于云计算的医院信息管理系统（云HIS）

一套SaaS多租户医疗云his源码，基于云计算的医院信息管理系统（云HIS）

基于云计算的医院信息管理系统&#xff08;云HIS&#xff09;&#xff0c;通过SaaS服务模式提供。这种云HIS系统设计考虑了模板化、配置化、智能化和可扩展性&#xff0c;覆盖了基层医疗机构的核心工作流程&#xff0c;并且能够与监管系统无缝对接&#xff0c;满足未来的扩展需…
阅读更多...
基于杜鹃鸟鲶鱼优化（Cuckoo Catfish Optimizer，CCO）算法的多个无人机协同路径规划（可以自定义无人机数量及起始点），MATLAB代码

基于杜鹃鸟鲶鱼优化（Cuckoo Catfish Optimizer，CCO）算法的多个无人机协同路径规划（可以自定义无人机数量及起始点），MATLAB代码

一、杜鹃鸟鲶鱼优化算法 杜鹃鸟鲶鱼优化&#xff08;Cuckoo Catfish Optimizer&#xff0c;CCO&#xff09;算法模拟了杜鹃鸟鲶鱼的搜索、捕食和寄生慈鲷行为。该算法的早期迭代侧重于执行多维包络搜索策略和压缩空间策略&#xff0c;并结合辅助搜索策略来有效限制慈鳔的逃逸空…
阅读更多...
FPGA_DDS_IP核

FPGA_DDS_IP核

接下来对FPGA的DDS的ip核进行学习。 首先对DDS需要有些了解 DDS信号发生器采用直接数字频率合成&#xff08;Direct Digital Synthesis&#xff0c;简称DDS&#xff09;技术&#xff0c;简单来说就是 需要一个系统频率和一个输入的数字数据 &#xff0c;用这个系统频率计算出…
阅读更多...
libpng-1.6.47-windows编译

libpng-1.6.47-windows编译

本文操作按照《c&c开源库编译指南》中内容规范编写&#xff0c;编译环境配置、工具下载、目录规划&#xff0c;及更多其他开源库编译方法请参考该文章。 c&c开源库编译指南&#xff1a;https://blog.csdn.net/binary0006/article/details/144086155 本文章中的源代码已…
阅读更多...
linux安装配置Nacos

linux安装配置Nacos

环境&#xff1a;centos7、mysql8.0、nacos2.5.1 1.下载Nacos安装包 https://github.com/alibaba/nacos/releases?spm5238cd80.72a042d5.0.0.46bacd36C42EfG 我这边选的是最新的稳定版本2.5.1 2. 放到 linux 服务器中解压安装 解压 tar -xvf nacos-server-2.5.1.tar.gz 进入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023