devdojo/tails

使用Tails构建美观的着陆页和设计，并通过API使用此包获取这些设计

维护者

详细信息

github.com/thedevdojo/tails

主页

源代码

问题

安装次数： 1,704

依赖项: 0

建议者: 0

安全: 0

星标: 58

关注者: 2

分支: 12

公开问题: 0

v1.2.0 2024-06-26 19:07 UTC

Requires

Requires (Dev)

MIT 7b580e61a6c05b174535ddc1cd4c626e5b40e92c

  • Tony Lea <tony.woop@devdojo.com>

devdojotails

This package is auto-updated.

Last update: 2024-08-26 19:27:13 UTC

README

Latest Version on Packagist Total Downloads

Tails Package Image

此包将允许您轻松获取在Tails页面构建器中创建的设计。按照以下步骤学习如何安装、配置和使用此包。

1. 安装包

您可以通过composer安装此包

composer require devdojo/tails

2. 发布配置

运行以下命令以发布Tails配置

php artisan vendor:publish --tag=tails

3. 获取API密钥

访问https://devdojo.com/tails/app并从菜单中点击开发者API密钥按钮。

Developer API Key Menu Item

点击此按钮会弹出一个类似以下窗口的模态窗口

Generate New API Key

只需单击生成我的API密钥按钮，您就会看到您的新API密钥。

Tails API Key

如果您需要重新生成密钥，可以点击重新生成我的API密钥按钮，它将被刷新。

5. 将API密钥添加到.env

您需要将上一步骤中获得的API密钥添加到您的.env文件中。它看起来可能如下所示

TAILS_API_KEY=b6561d56fcf291ecd34627f95814da8c8771b32f31caccbb2e8578639518351e

6. 测试连接

我们为您添加了一个非常简单的artisan调用，以测试功能并确认您的应用程序正在与Tails API通信。只需运行以下artisan命令。

php artisan tails:ping

如果您收到一条说pong的响应，则表示您已成功验证并连接到API。

7. 显示设计

我们使在您的应用程序内部显示使用tails创建的设计变得非常简单。您可以从特定路由加载页面或将在现有blade文件中包含设计。让我们首先介绍如何在路由上显示页面。

通过路由显示页面

最简单的方法是在您的routes/web.php文件中添加以下内容以添加Tails路由

Tails::get('/', 'project-name');

这将从名为project-name的项目的主页加载设计。您可以通过单击项目顶部的设置栏找到您特定项目的slug。

Tails Settings

这将显示以下模态窗口

Tails Project Settings Modal

在上面的图像示例中，您将使用的slug是my-website，因此您的路由看起来如下所示

Tails::get('/', 'my-website');

这不必映射到主页，它可以是任何路由

Tails::get('welcome', 'my-website');

此外，您可以使用点表示法从特定项目加载任何页面

Tails::get('about', 'my-website.about');

上面的代码👆将从my-website项目中的about页面获取设计，并从您的应用程序的/about路由加载它🤙简单得像Mac & Cheesy！

在现有文件中显示设计

接下来，您可能希望在现有blade文件中包含一个特定的设计。您可以使用以下语法轻松完成此操作

@tails('my-website');

使用点表示法，您还可以加载特定页面的设计

@tails('my-website.about')

默认情况下，@tails指令将只返回设计中的<body>内容。如果您希望获取页面的完整HTML，可以在:符号之后指定它，如下所示

@tails('mywebsite.about:html')

使用@tails指令，您可以使用:符号检索特定页面的所有信息。以下是API响应的示例结构

{
    html: 'Full HTML of the page',
    header: 'Header info for the page',
    body: 'Body content for the page',
    footer: 'Footer content for the page',
    project: {
        title: 'Title',
        slug: 'slug',
        icon: 'icon',
        icon_type: 'Type os icon or link (may also be upload, but this is also just a link url)',
        settings: 'settings',
        custom_head: 'custom head content',
        custom_footer: 'custom footer content',
        cdn_css: 'Comma separated list of CSS CDN links',
        cdn_js: 'Comma separated list of JS CDN links',
        created_at: 'Date Created',
        updated_at: 'Last Updated'
    },
    page: {
        title: 'Title',
        slug: 'slug',
        settings: 'settings',
        custom_head: 'custom head content',
        custom_footer: 'custom footer content',
        styles: 'The TailwindCSS styles, you will need to wrap these in a <style> tag if you wish to apply the styles to a page',
        order: 'Really only relevant in the editor, but you can also use these orders to display them somewhere on your site',
        created_at: 'Date Created',
        updated_at: 'Last Updated',
        components: {
            [
                html: 'HTML of specific component',
                order: 'The order of the component on the page',
                created_at: 'Date Created',
                updated_at: 'Last Updated',
            ]
        }
    }
}

您可以使用@tails指令来检索所有这些信息。

@tails('my-website');
@tails('my-website:html');
@tails('my-website:header');
@tails('my-website:body');
@tails('my-website:footer');

@tails('my-website:project.title');
@tails('my-website:project.slug');
...

@tails('my-website:page.title');
@tails('my-website:page.slug');
...

以下是一个如何显示具有压缩样式和HTML正文内容的页面的示例。

<style>
    @tails('my-website:page.styles')
</style>

@tails('my-website')

8. 启用Webhook

默认情况下，从Tails API获取设计的所有请求都会在您的应用程序端进行缓存。这意味着当用户访问您的网站或应用程序时，它不需要与Tails API通信，从而加快页面加载速度。不幸的是，由于它已缓存，您的应用程序需要知道此页面的新版本已被更新，并向用户显示更新后的版本。您可以通过启用Webhook轻松解决这个问题。

启用Webhook并设置您的Webhook URL

在项目设置对话框中，左侧有一个名为Webhook的选项卡，在此选项卡上您需要启用Webhook并输入您的Webhook URL。

Webhook

您的Webhook URL将是your-website.com/tails/webhook，此路由/tails/webhook已在此包中添加。您只需将URL输入到文本区域即可。

注意：如果您需要更改tails webhook URL，请设置TAILS_WEBHOOK_URL环境变量。这将把/tails/webhook改为您想要的任何内容。

将Webhook密钥添加到您的.env

在Webhook对话框中，您还会看到一个名为Webhook Key的另一个输入框，您需要复制此值并将其粘贴到您的.env文件中。

TAILS_WEBHOOK_KEY=DWpXWMHxAdePDleePCYyGgEs2VGe6j

这是一个安全措施，它将确保Tails应用程序是唯一向该端点发送请求的应用程序。在您将此密钥添加到环境文件并在Webhook对话框中更新正确的URL后，您应该一切就绪。

每次您在Tails应用程序中工作并保存页面时，它都会向您的应用程序发送Webhook，告知哪些页面需要从缓存中清除，这样在下一个人访问该页面时就可以提供新版本。

注意：如果您在本地计算机上开发应用程序，请确保它可以通过实时URL访问。您可以使用Expose或Ngrok等工具创建本地网站的实时URL。它们都有一些免费选项，可以用于测试您的Webhook功能。顺便说一句，使用https://版本而不是http://版本效果更好。

9. 🍻 就这样了

这是如何设置此包并与Tails一起使用的简介。

感谢您使用Tails，如果您有任何问题或建议，请随时通过Twitter联系我们，我们将尽快回复您。再次感谢您使用我们的产品。您真棒 🤘

🗑 删除缓存文件

您可以使用Webhook自动清除缓存页面并显示最新版本；然而，您也可以通过运行以下命令手动清除这些缓存文件：

php artisan tails:clear

现在，当您查看调用Tails API的页面时，您将获得该页面的新版本。

更新日志

有关最近更改的更多信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献。

安全

如果您发现任何安全相关的问题，请通过tony@devdojo.com发送电子邮件，而不是使用问题跟踪器。

鸣谢

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件。

Laravel 包模板

此包使用 Laravel 包模板 生成。