README

为您的静态站点提供动态用户数据。

如果您曾经想在静态网站上添加一些用户数据，那么轮廓（Silhouette）就是为您准备的。

安装

1. 通过Composer引入该包

   composer require pattern/silhouette
   

2. 发布配置文件

   php artisan vendor:publish --provider=Pattern\Silhouette\ServiceProvider
   

3. 如果您正在使用Eloquent驱动程序作为您的用户，请将您的用户模型添加到您的.env文件中

   SILHOUETTE_ELOQUENT_MODEL=App\User
   

使用方法

注意：轮廓依赖于AlpineJS来发挥其魔力。如果您还没有将Alpine包含在项目中，您需要这样做。

{{ silhouette attributes="name,email,initials,avatar" }}
    {{ silhouette:auth }}
        {{ silhouette:name }}
        {{ silhouette:email }}
        {{ silhouette:attribute }}
        ...
    {{ /silhouette:auth }}
    {{ silhouette:guest }}
        Content you would want a guest to see.
    {{ /silhouette:guest }}
{{ /silhouette}}

一切从{{ silhouette }}标签对开始。参数是可选的；默认情况下，轮廓会尝试返回用户的姓名、电子邮件地址、首字母和头像。

在{{ silhouette:auth }}标签对内部的内容只有在用户认证的情况下才会显示。在这个标签对内部，您可以访问默认属性或您在attributes参数中指定的属性。

同样，在{{ silhouette:guest }}对内部的内容只有在访问者不是认证用户的情况下才会显示。

高级使用方法

如上所述，轮廓使用AlpineJS来获取和显示用户数据。这是一个在您的网站上添加交互性的好方法，而无需承诺使用像React或Vue（或Svelte、Elm、Angular等）这样的大型框架，但有一个稍微复杂一些的使用场景可能会让一些人感到困惑：嵌套的x-data对象。

例如，如果您想让用户能够点击他们的头像来切换“账户”菜单，您可能会这样做

{{ silhouette }}
  {{ silhouette:auth }}
    <div x-data="{ show: false }">
      <button x-on:click="show = !show">
        <img src="{{ silhouette:avatar }}"
      </button>
      <template x-if="show">
        <nav>
          <p>Welcome, {{ silhouette:name }}</p>
          <a href="/account">Account</a>
          <a href="/logout">Logout</a>
        </nav>
      </template>
    </div>
  {{ /silhouette:auth }}
  {{ silhouette:guest }}
    <nav>
      <a href="/login">Login</a>
    </nav>
  {{ /silhouette:guest }}
{{ /silhouette }}

这种方法的缺点是，由于轮廓的工作方式，您已经嵌套了一个新的不知道silhouette对象的x-data上下文。

Alpine通过事件和监听器提供了一种在组件之间（甚至在这个例子中是嵌套组件之间）传递数据的方式。为了让上面的例子工作，我们需要将silhouette对象添加到我们的x-data中，并通过x-on指令监听父级silhouette对象的变化

{{ silhouette }}
  {{ silhouette:auth }}
    <div 
      x-data="{ show: false, silhouette: {} }" 
      x-on:silhouette.window="silhouette = $event.detail">
      <button x-on:click="show = !show">
        <img src="{{ silhouette:avatar }}"
      </button>
      <template x-if="show">
        <nav>
          <p>Welcome, {{ silhouette:name }}</p>
          <a href="/account">Account</a>
          <a href="/logout">Logout</a>
        </nav>
      </template>
    </div>
  {{ /silhouette:auth }}
  {{ silhouette:guest }}
    <nav>
      <a href="/login">Login</a>
    </nav>
  {{ /silhouette:guest }}
{{ /silhouette }}

致谢

非常感谢Mike Martin提出的出色想法和一些早期的测试。

许可证

在MIT许可证下发布，有关详细信息，请参阅LICENSE。