datasette-css-properties

一个使用CSS属性的极其实验性的Datasette输出插件，灵感来自Chris Coyier的Custom Properties as State。

安装

在Datasette相同的环境中安装此插件。

$ datasette install datasette-css-properties

使用

安装后，此插件将为每个查询结果添加一个.css输出格式。这将返回查询的第一行作为有效的CSS文件，将每一列定义为自定义属性

示例：[链接](https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css)生成

:root {
  --pk: '1';
  --name: 'The Mystery Spot';
  --address: '465 Mystery Spot Road, Santa Cruz, CA 95065';
  --latitude: '37.0167';
  --longitude: '-122.0024';
}

如果您将此样式表链接到您的页面，您可以进行类似以下操作；

<link rel="stylesheet" href="https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css">
<style>
.attraction-name:after { content: var(--name); }
</style>
<p class="attraction-name">Attraction name: </p>

默认情况下，值将以CSS字符串的形式引用。如果您想返回不带引号的“原始”值（例如，设置一个数值或颜色的CSS属性），您可以使用?_raw=column-name参数指定该列名称。这可以多次传递。

考虑此示例查询

select
  '#' || substr(sha, 0, 6) as [custom-bg]
from
  commits
order by
  author_date desc
limit
  1;

这返回了最近提交的提交的前6个字符，带有一个#前缀。CSS的输出渲染版本如下所示

:root {
  --custom-bg: '#97fb1';
}

将?_raw=custom-bg添加到URL生成此内容

:root {
  --custom-bg: #97fb1;
}

这可以像这样用作颜色值

h1 {
    background-color: var(--custom-bg);
}

开发

要本地设置此插件，首先检出代码。然后创建一个新的虚拟环境

cd datasette-css-properties
python3 -mvenv venv
source venv/bin/activate

或者如果您正在使用pipenv

pipenv shell

现在安装依赖项和测试

pip install -e '.[test]'

要运行测试

pytest