Laravel向惯性头组件问好

2021-07-04 22:00:03 laravel 阅读：758
最新发布的惯性.js一个叫做\"惯性头\"的新组件。这个新组件允许你更新HTML的标记中的和标记。在这个组件出现之前，尝试改变页面的虽然不是不可能，但不是很容易。您不仅可以在页面组件中轻松地完成此操作，还可以利用传递到页面的任何props。 想象一下，当您的用户正在阅读文章时，您可以动态设置打开的图形标记或更新页面标题，甚至可以更改favicon；所有这些都是可能的。 为了演示这个新功能，让我们从使用我最喜欢的Laravel初学者工具包Laravel Breeze开始。 首先创建一个新的Laravel应用程序。 1laravel new inertia-head-demo/pre> 一旦运行，将cd放入您的新项目，并在运行后运行 1composer require laravel/breeze --dev/pre> ，然后运行 1PHP artisan breeze:install vue/pre> ，您应该看到您的package.json中的devDependencies已更新，如下所示。 1\"devDependencies\": { 2\"@inertiajs/inertia\": \"^0.8.4\", 3\"@inertiajs/inertia-vue3\": \"^0.3.5\", 4\"@inertiajs/progress\": \"^0.2.4\", 5\"@tailwindcss/forms\": \"^0.2.1\", 6\"@vue/compiler-sfc\": \"^3.0.5\", 7\"autoprefixer\": \"^10.2.4\", 8\"axios\": \"^0.21\", 9\"laravel-mix\": \"^6.0.6\",10\"lodash\": \"^4.17.19\",11\"postcss\": \"^8.2.13\",12\"postcss-import\": \"^14.0.1\",13\"tailwindcss\": \"^2.1.2\",14\"vue\": \"^3.0.5\",15\"vue-loader\": \"^16.1.2\"16} 要利用这个，我们需要升级@inertiajs/inertia，@inertiajs/inertia-vue3的版本。我们也可以将@inertiajs/progress更新到最新版本，但这不是必需的。 1\"devDependencies\": {2\"@inertiajs/inertia\": \"^0.9.1\",3\"@inertiajs/inertia-vue3\": \"^0.4.2\",4\"@inertiajs/progress\": \"^0.2.5\", // optional5...6 } 接下来，让我们安装我们的JavaScript依赖项，构建资产并观察更改。 1npm install && npm run watch 接下来，我们要编辑应用程序布局并添加标记。我们在这里设置的是可以在页面级别覆盖的\"默认值\"。 在Breeze中，有两个布局组件，Guest.vue位于resources/js/Layouts/Guest.vue和Authenticated.vue位于resources/js/Layouts/Authenticated. vue所有auth视图都将使用Guest.vue布局，当用户通过身份验证并查看其仪表板后，Authenticated.vue将被使用。对于这个例子，我们将关注auth屏幕和Guest.vue布局；在标记中的Guest.vue布局中添加以下内容。 我在本地使用Laravel Valet，所以如果我去访问http://inertia-head-demo.test/login我应该希望看到该页的标题是\"惯性头演示\"，但是访问/login查看，标题是会显示\"Laravel\"或任何你的在你的.**30***设置为APP_NAME。原因是页面上应该只有一个标记，如果有多个，则页面上出现的第一个标记将优先。如果你检查app.blade.php文件，你会在第8行看到这个 1{{ config(\"app.name\", \"Laravel\") }} 如果你删除上面的行并刷新页面，我们应该会看到我们在版面中设置的标题。 好东西，对吗？好吧，让我们下一步。打开Login.vue并添加标记以覆盖我们在Guest.vue 中设置的默认值现在当您访问/login时，您将在浏览器选项卡中看到Inertia Head Demo - Login作为标题。 打开图形元标记 Facebook和Twitter都允许您自定义URL的预览。你可以在这里阅读Facebook的OG标签和Twitter卡片。 让我们从更新默认的组件开始，我们添加到Guest.vue添加以下内容。 1 2Inertia Head Demo 3 4 5 6 7 8 9101112131415 现在访问/login，你应该会看到这个。 1> 3 4 5 6 7 8 91011121314 你可以看到OG元标签，然后是标题。这里使用默认值，由于我们在Login.vue页面的中设置了标题，我们看到惯性正在删除默认标题并使用页面组件中的标题。 现在让我们尝试在Login.vue组件中设置OG标记。我要添加这个。 1 2Inertia Head Demo - Login 3 4 5 6 7 8 9101112131415 现在刷新并访问/login。。。发生什么事了！？ 1 2... 3 4 5 6 7 8 910111213141516171819202123 我们的标签现在与meta标签重复；为什么会发生这种情况？组件将始终确保只有一个标签。当涉及到标签时只是将默认值和Login.vue组件中的标签进行叠加，这就是为什么您会看到它们重复的原因。谢天谢地，解决这个问题非常简单。我们可以告诉如何通过添加head-key属性来处理重复项，确保标记呈现一次。 因此将Guest.vue惯性头更改为此。 1 2Inertia Head Demo 3 4 5 6 7 8 9101112131415 并将Login.vue中的组件更改为以下内容： 1 2Inertia Head Demo - Login 3 4 5 6 7 8 9101112131415 更新后，重新编译您的资产，刷新，你应该看到： 1 2...> 4 5 6 7 8 9101112131415 就是这样！还有更多关于的讨论，以及它与即将推出的特性（为惯性提供服务器端渲染）搭配时的亮点。惯性SSR已准备就绪，目前正在为惯性.js网站，但关于如何在Laravel Forge和Heroku上实现这一点的文档目前可供惯性赞助商使用。 谢谢阅读，如果您有任何问题，请随时在Twitter上联系。

CSS无头WordPress到底有多合适？

我想知道无头WordPress会在哪里登陆。\"headless\"指的是只使用WordPress管理，通过WordPress restapi构建面向用户的站点，而不是传统的WordPress主题结构？WordPress的未来？还是相对利基？需求在哪里？当然，对它有需求。我知道很多人都这么做。例如，Gatsby有一个gatsby-source-wordpress插件，它允许您以使用wordpressrestapi的方式从WordPress站点获取内容，并将其缓存为GraphQL，以便在React-power...

日期：2021-06-24 01:15:34 浏览：623

CSS制作带有粘性页眉和页脚的表格变得更容易了

不久前，当我在博客中看到HTML中的粘性页眉和页脚时，一个表同时有粘性页眉和粘性第一列。在它里面，我从来没有在任何、或元素上使用position: sticky，因为即使Safari和Firefox可以做到这一点，Chrome也做不到。但是它可以做表格单元格，比如和，这是一个相当不错的解决办法。好吧，这已经改变了。我通过Twitter听说Chrome在v91中\"重写了表格\"。https://t.co/vTBplXWWtT我看到它掉了下来，升级了，然后做了一个快速测试。嘿，看看有粘性的表格页眉和页脚。@C...

日期：2021-06-24 02:00:01 浏览：939

CSS技巧编年史XXXX

只是我最近做的一些非现场工作的一个小链接汇总。就像我习惯的那样。DevJourney播客#151 Chris Coyier从陶瓷到CSS技巧和代码笔\"Chris带我们从玩他的第一个C64到他的陶瓷文学学士，再回到web开发。我们讨论了他在这一过程中的不同立场，以及他们是如何缓慢但肯定地引导他走向web开发的。我们浏览了CSS技巧的创造和娱乐，在开放中学习，以及美好的一天是什么样子。Podrocket Podcast火箭手术：Kaelan和Chris Coyier比较笔记我被要求删除这里嵌入的音频，如果你想...

日期：2021-06-24 02:00:03 浏览：864

CSS使用子资源完整性保护您的网站

当您从外部服务器加载文件时，您相信您请求的内容是您期望的内容。由于您不自己管理服务器，因此您依赖于另一个第三方的安全性，从而增加了攻击面。信任第三方并不是天生的坏事，但它肯定应该在网站安全的背景下加以考虑。一个真实的例子这不是纯粹的理论危险。忽视潜在的安全问题可能而且已经造成严重后果。2019年6月4日，Malwarebytes宣布他们在网站上发现了一个恶意的略读程序NBA.com. 由于Amazon S3存储桶受损，攻击者能够修改JavaScript库以窃取客户的信用卡信息。值得担心的不仅仅是JavaSc...

日期：2021-06-24 02:00:03 浏览：768

CSS联合的可能性

这是首字母缩略词RSS中不是形容词的一个词。非常简单联合更新：Lol这里有两个错误。RSS是首字母缩写而不是首字母缩写，\"Really\"是副词而不是形容词。RSS不仅仅是RSS阅读器。尽管如此，如果我不喜欢RSS阅读器。它是关于把内容放在一种设计成可移植的格式。内容的API并不是一个隐喻，这就是它的字面含义。RSS一直在我的脑海中，因为它就像我的日报，但我敢打赌它并不是人们关注的最高峰，甚至是开发者。尽管如此，它还是受到了一点关注，因为谷歌在androidchrome中引入了一个\"following\...

日期：2021-06-24 03:00:02 浏览：596

CSS在开放细节元素上添加背景

关于元素有一点奇怪，那就是，当它打开时，并不总是100%清楚该元素内部的内容和不内部的内容。我不是说总是重要，或者说它是一个特别难解决的问题，我只是注意到它最近出现在我身上。这里有一个直观的例子：这里的文本在里面，什么不是？这个解决方案是…CSS。把的样式设计得有点独特，这样问题就解决了。即使你希望排版是一样的，或者你不想任何独家风格，直到被打开，这仍然是可能的。使用alpha透明填充，您甚至可以确保更深的嵌套保持清晰。对于只插入内联内容的&lt；详细信息&gt；（如\"spoiler\"UI或其他内容），...

日期：2021-06-24 03:00:04 浏览：763

CSS容器查询的聚宝盆

我不知道是什么原因，但是我的feed在过去的几周里充斥着关于CSS容器查询的文章。有关集装箱查询的热议实际上始于去年12月，当时米丽亚姆•苏珊娜（Miriam Suzanne）发布了一份提案（采纳了大卫•巴隆的提案），但3月底，Una Kravets在推特上发布的一条消息称，他们在chrome://flags的#enable-container-queries旗后投放了Chrome Canary 91.0.4459.0在如此短的时间内，容器查询已经覆盖了如此多的地方，而且规范甚至还不是最终的！我很高兴看到C...

日期：2021-06-24 03:00:04 浏览：921

CSS target=blank

那会不会让你的眼睛有点抽搐？就像…是打字错误。值的开头应该是带有下划线的>。就像…Welp, that\"s correct syntax!In the case of the no-underscore>, the blank部分只是一个名称。可能是任何东西。它可以是>，或者，可能是为了预示这里的目的：>。是一个特殊的关键字，它将在新选项卡中打开链接，每次都打开一个新选项卡。>将在新选项卡中打开第一个单击的链接，但任何共享>的链接都将在新打开的选项卡中打开。我从来不知道这一点！我相信这条微博的解释。我创建...

日期：2021-06-24 04:00:02 浏览：1004

CSS查看WCAG 2.5.5以获得更好的目标尺寸

你有没有经历过这样的挫折：试图点击移动设备上的一个按钮却什么也不做，因为目标大小不够大，而且它在你的按键上不起作用？也许你有更大的手指，像我一样，也可能是由于灵活性有限。这是因为我们，即用户，必须与之交互的元素的目标区域越来越小，我们来谈谈如何使其足够大，以便用户能够轻松地与元素交互。如果用户在一个小型手持式触摸屏设备上访问内容，而这个设备的不动产要紧得多，那么这将是一个特别大的问题。成功标准重温我在上一篇涉及WCAG 2.1标准的文章中谈到了成功标准，Label in Name。简言之，WCAG标准是我们...

日期：2021-06-24 04:00:03 浏览：544

CSS Trickz：Netlify随需应变构建器的实验

默认情况下，WordPress站点有一个API。想看看这个网站的最新帖子吗，只是一组特定的数据…JSON格式？给你。Alex Riviere用它做了一个笑话站点。起初，当加载该API客户端时，该站点将fetch。很好，但是如果我们认真考虑一下，它对于访问站点的人来说是非常低效的（也就是说，比服务器呈现的HTML慢），对于API命中率也不是很高。所以，Alex用Netlify函数重新编写了它。然后Netlify函数将从API中fetch（在云中的节点中），并为预呈现的HTML提供服务。这可能更好一些，但正如亚...

日期：2021-06-24 04:00:04 浏览：592