柚子/做了个小东西来解析SPK

做了个小东西来解析SPk

效果如下：

（以下代码中的https://spk.yzzi.icu/可替换为国内镜像https://deepin-community-store.gitee.io/spk-resolv/）

在 Hugo 博客中使用

想要在 Hugo 博客中使用需要利用 Hugo 提供的 shortcode 功能 (文末提供纯 shortcode 来实现的代码)

首先在 layouts/shortcodes 目录下创建 spk. Html，然后填充内容如下：

<iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width=400
    height=210
    src="https://spk.yzzi.icu/?spk={{.Get 0 }}">
</iframe>

然后在需要插入卡片的地方用以下形式写

{{< spk "spk://store/themes/top.yzzi.wallpaper" >}}

在 Hexo 博客中使用

Hexo 博客可直接用 {% raw %} {% endraw %} 来插入

{% raw %}
<iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width=400
    height=210
    src="https://spk.yzzi.icu/?spk=spk://store/themes/top.yzzi.wallpaper">
</iframe>
{% endraw %}

Hugo 纯 shortcode 本地版

<style>
article.card {
    border: 1px solid #eaeaea;
    border-radius: 5px;
}

section.a1{
    padding: 12px;
    display: flex;
    flex-direction: row;
    text-align: left;
}

#title{
    border-bottom: 0px;
}

#icon{
    margin-right: 10px;
}

#icon:hover {
    transform: rotate(666turn);
    transition-delay: 3s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}

div.button{
    float: right;
}

footer.footer{
    padding: 12px;
    display: flex;
    flex-direction: row-reverse;
    border-top: 1px solid #eaeaea;
    background: #fafafa;
}

button.b1{
    min-width: 80px;
    height: 32px;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 5px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    background: #000;
    border: 1px solid #000;
    color: #fff;
    position: relative;
    cursor: pointer;
    margin-left: 4px;
}

#icon {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
</style>
<article class="card">
    <section class="a1">
        <img src="" id="icon">
        <div class="text">
        <h2 id="title"></h2>
        <h5 id="more"></h5>
        </div>
    </section>
    <footer class="footer">
            <button class="b1" id="button1" onclick="goSPK()">
                用星火商店安装
            </button>
            <button class="b1" id="button1" onclick="window.open('http://spark-app.store/download')">
                下载星火商店
            </button>
            <button class="b1" id="button1" onclick="copySPK()">
                复制SPK
            </button>
    </footer>
</article>
<script type="text/javascript">
function goSPK(){
    window.location.href="{{ .Get 0}}";
}

function copySPK(){
    const el = document.createElement('input')
    // 给input元素赋值需要复制的文本
    el.setAttribute('value', "{{ .Get 0}}")
    // 将input元素插入页面
    document.body.appendChild(el)
    // 选中input元素的文本
    el.select()
    // 复制内容到剪贴板
    document.execCommand('copy')
    // 删除input元素
    document.body.removeChild(el)
    alert('复制成功')
}

//调用 
var spk="{{ .Get 0}}";
var newspk=spk;
if(!spk.indexOf('spk://'))
{
    newspk = spk.slice(6);
}
var jsonUrl="https://cdn.d.store.deepinos.org.cn/"+newspk+"/app.json";
var titleElement = document.getElementById("title");
var iconElement = document.getElementById("icon");
var moreElement = document.getElementById("more");
var buttonElement = document.getElementById("button1");
var iconUrl="https://cdn.d.store.deepinos.org.cn/"+newspk+"/icon.png";

fetch(jsonUrl)
    .then((response) => response.json())
    .then((json) => {
        titleElement.innerText=json.Name;
        moreElement.innerText=json.More;
        if(json.icons == undefined)
        {
            iconElement.src = iconUrl;
        }else{
            iconElement.src = json.icons;
        }
    });
</script>