datasette-json-html

基于JSON值渲染HTML的Datasette插件，使用render_cell插件钩子。

此插件会查找与非常特定的JSON格式匹配的单元格值，并在Datasette界面渲染时将它们转换为HTML。

链接

{
    "href": "https://simonwillison.net/",
    "label": "Simon Willison"
}

将渲染为<a href="">链接

<a href="https://simonwillison.net/">Simon Willison</a>

您可以使用"title"键为链接设置工具提示

{
    "href": "https://simonwillison.net/",
    "label": "Simon Willison",
    "title": "My blog"
}

生成

<a href="https://simonwillison.net/" title="My blog">Simon Willison</a>

您还可以包括一个描述，它将在链接下方显示。如果描述中包含换行符，则将转换为<br>元素

select json_object(
    "href", "https://simonwillison.net/",
    "label", "Simon Willison",
    "description", "This can contain" || x'0a' || "newlines"
)

生成

<strong><a href="https://simonwillison.net/">Simon Willison</a></strong><br>This can contain<br>newlines

• 文字JSON链接演示

链接列表

[
    {
        "href": "https://simonwillison.net/",
        "label": "Simon Willison"
    },
    {
        "href": "https://github.com/simonw/datasette",
        "label": "Datasette"
    }
]

将渲染为逗号分隔的<a href="">链接列表

<a href="https://simonwillison.net/">Simon Willison</a>,
<a href="https://github.com/simonw/datasette">Datasette</a>

href属性必须以https://或http://或/开头，以避免潜在的安全漏洞攻击（例如以javascript:开头的URL）。

链接列表不能包含"description"键。

• 文字链接列表演示

图像

图像标签更为复杂。最基本的形式如下

{
    "img_src": "https://placekitten.com/200/300"
}

这将渲染为

<img src="https://placekitten.com/200/300">

但您也可以包括一个或多个alt、caption、width和href。

如果包含宽度或alt，它们将被添加为属性

{
    "img_src": "https://placekitten.com/200/300",
    "alt": "Kitten",
    "width": 200
}

生成

<img src="https://placekitten.com/200/300"
    alt="Kitten" width="200">

• 文字图像演示

href键将导致图像被包裹在链接中

{
    "img_src": "https://placekitten.com/200/300",
    "href": "http://www.example.com"
}

生成

<a href="http://www.example.com">
    <img src="https://placekitten.com/200/300">
</a>

caption键将整个内容包裹在一个花哨的图/图例块中

{
    "img_src": "https://placekitten.com/200/300",
    "caption": "Kitten caption"
}

生成

<figure>
    <img src="https://placekitten.com/200/300"></a>
    <figcaption>Kitten caption</figcaption>
</figure>

预格式化文本

您可以使用{"pre": "text"}来在<pre>HTML标签中渲染文本

{
    "pre": "This\nhas\nnewlines"
}

生成

<pre>This
has
newlines</pre>

如果"pre"键的值本身是JSON对象，则该JSON将被格式化输出

{
    "pre": {
        "this": {
            "object": ["is", "nested"]
        }
    }
}

生成

<pre>{
  &#34;this&#34;: {
    &#34;object&#34;: [
      &#34;is&#34;,
      &#34;nested&#34;
    ]
  }
}</pre>

• 预格式化文本与JSON演示
• 使用预格式化文本演示Mandelbrot集，示例来源于SQLite文档中的此示例

结合SQLite JSON函数使用

要充分利用此插件，最佳方式是结合SQLite的JSON函数。例如

select json_object(
    "href", "https://simonwillison.net/",
    "label", "Simon Willison"
);

• json_object()链接演示

您可以使用这些函数从表中的数据构建与插件协同工作的JSON对象

select id, json_object(
    "href", url, "label", text
) from mytable;

• 构建表链接的演示

json_group_array()函数是一个类似于group_concat()的聚合函数，它允许您在GROUP BY子句的配合下构建JSON对象的列表。

这意味着您可以用来构建动态链接列表，例如

select
    substr(package, 0, 12) as prefix,
    json_group_array(
        json_object(
            "href", url,
            "label", package
        )
    ) as package_links
from packages
group by prefix

• json_group_array()演示

urllib_quote_plus() SQL函数

由于此插件旨在与构建底层JSON结构的SQL一起使用，您可能需要从SQL查询返回的结果中构建动态URL。

此插件注册了一个名为urllib_quote_plus()的自定义SQLite函数，以帮助您完成此操作。它允许您在SQL查询中使用Python的urllib.parse.quote_plus()函数。

以下是如何使用它的一个示例

select id, json_object(
    "href",
    "/mydatabase/other_table?_search=" || urllib_quote_plus(text),
    "label", text
) from mytable;