如何循环存储以呈现有关戴森协议的博客（第 6 部分）
如何循环存储以呈现有关戴森协议的博客（第 6 部分）
欢迎回到戴森协议教程系列。
请注意，UI 正在开发中，提供的某些屏幕截图可能无法反映我们网站 UI 的当前版本。
在我们的上一个教程中，您学习了如何使用一些简单的 CSS 和 HTML 使您的网站在 Dyson 协议上看起来更漂亮。
在今天的教程中，您将学习：
- 如何使用内置
戴森/QueryPrefixStorage函数访问存储在具有特定前缀的索引中的数据。 - 如何循环 在存储的信息列表上，并将列表中的每个项目呈现为博客文章。
如果您是戴森协议生态系统的新手，请从以下教程开始获取您的戴森币并创建您的第一个函数：
戴森协议：如何使用 Keplr 钱包（并获得免费的 DYS）
请不要犹豫跳到 我们的 Discord 服务器 如果您遇到困难或有任何疑问。请记住，通过将脚本地址粘贴到我们的 Discord 服务器的 testnet-airdrop 通道中，您始终可以获得更多 DYS 硬币。
第 1 步：从上次中断的地方继续。
与往常一样，您将返回到您在上一个教程中处理的脚本。
为此，首先在浏览器中打开一个新选项卡，然后转到 dysonvalidator.com
您的脚本地址尚不可见，但不要惊慌——您只需要解锁您的钱包。点击 连接钱包 ， 然后 连接 Keplr ，然后输入您的 Keplr 登录详细信息。
Connect your wallet
现在您应该在窗口顶部看到您的脚本地址。
如果您在桌面上访问 Dyson 协议，请单击脚本地址。您的浏览器将导航到您的脚本，其中应该可以看到上一教程中的代码行。
Navigate to your script
如果您在移动设备上访问 Dyson 协议并且看不到您的脚本地址—— 不要恐慌！ 按下屏幕右上角的三个水平条按钮，菜单将下拉显示您的脚本地址。
How to open the menu on mobile
单击您的脚本地址，浏览器将导航到您的脚本。
Navigate to your script on mobile
在继续之前，请确保您的脚本代码如下。如果它看起来有什么不同，那没关系。只需从脚本中删除所有代码行，然后将以下行复制并粘贴到脚本中，然后单击保存。
如果您在上一教程结束后对脚本的 CSS 或 HTML 进行了任何其他更改，最好将您的代码恢复为我们在此处使用的代码，以便更轻松地进行调试。
导入html
从字符串导入模板
从dy导入_chain，get_script_address，get_caller
def say_hello(my_name: str):
断言 get_script_address() == get_caller(), "权限被拒绝"
数据=“你好”+我的名字
print(data) # 帮助调试
返回_链（
"戴森/sendMsgCreateStorage",
创建者=get_script_address(),
index=get_script_address() + "/my_greeting",
数据=数据，
力=真，
)
def get_greeting():
返回_链（
“戴森/查询存储”，
index=get_script_address() + "/my_greeting",
)
def 渲染页面（正文：str）：
返回模板（
"""<!doctype html>
<html>
<head>
<title>你好世界</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.标题{
文字阴影：#FC0 1px 0 10px；
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">问候！</h1>
<p>$身体</p>
</div>
</body>
</html>
"""
).safe_substitute(body=body)
def 应用程序（环境，start_response）：
start_response("200 ok", [("Content-type", "text/html")])
greeting_data = get_greeting()["result"]["storage"]["data"]
返回 [
render_page(html.escape(greeting_data)).encode(),
]
最后，通过将脚本渲染到 webapp 并查看它来确保您的脚本是正确的。
就像之前的教程一样，首先你需要保存你的脚本。输入您的姓名 问好 ，然后单击 运行say_hello .
接下来，在新选项卡中导航到以下 URL，将占位符替换为您的脚本地址。
https://[YOUR_SCRIPT_ADDRESS_HERE].dysonvalidator.com/
如果一切正常，您应该会在浏览器中看到您的姓名。它应该类似于：
How your Dyson website should look
您现在可以开始本教程了！
第 2 步：重命名您的函数和变量，使其更直观。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
在本教程中，您将学习如何创建一个简单的博客，因此重命名您的一些变量和函数是有意义的，以便它们的名称更符合其用途。
首先，更改名称 问好 作用于 最新帖子 ，并将其参数的名称从 我的名字 至 身体。 函数的参数类型不会改变。
接下来，替换新重命名的第二行 最新帖子 作用于：
数据=正文
现在这将保存给定的参数 最新帖子 存储而不添加任何其他内容。
由于您不再访问存储的问候语，而是从存储中调用存储的帖子，因此更改 get_greeting 函数名 get_post .
最后，反映您在 应用 功能。
将应用程序函数的第二行替换为：
post_data = get_post()["结果"]["存储"]["数据"]
将应用程序函数的倒数第二行替换为：
render_page(html.escape(post_data)).encode(),
第 3 步：改进 new_post 函数的功能，将标题作为参数。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
您现在有一个功能可以将博客文章的内容保存到存储中，但这不是一篇很好的博客文章——它缺少标题！
不过，实现标题既好又容易。更新您的 最新帖子 包含的功能 标题：str 作为参数。接下来，替换第二行 最新帖子 功能：
数据 = f"{title} -- {body}"
在这里，您将作为参数提供的标题和正文组合起来，并将它们存储为单个 f弦 .然后将此 f 字符串呈现为博客文章。
让我们看看这有什么变化！首先，点击 节省 在你的剧本上。
接下来，将标题和正文输入到您的 最新帖子 如下例所示：
点击 运行 new_post ，然后导航到您的网页并刷新页面。它现在应该看起来像这样：
第 4 步：重构 get_post 函数以直接返回数据。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
到现在为止 get_post 函数返回了一个字典，其中 应用 函数稍后必须查看以找到您保存在 最新帖子 功能。
让我们重构一下，以便字典查找在 get_post 代替功能。这将使将来更容易进行更改。
替换第一行 get_post 功能：
响应 = _链（
并将以下行添加到末尾 get_post 功能：
返回响应[“结果”][“存储”][“数据”]
现在替换第二行 应用 使用以下函数来反映您刚刚所做的更改：
post_data = get_post()
保存您的脚本并导航到您的网页。它看起来应该与上一步结束时的表现没有什么不同。
第 5 步：重构 new_post 函数以将数据存储在动态位置。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
到现在为止， 最新帖子 函数已将数据存储在硬编码索引处 [SCRIPT_ADDRESS]/my_greeting .理想情况下，您的博客上需要多篇博文，因此您需要开始将每篇博文保存到新位置。
您可以将每篇博客文章保存在基于文章标题的净化版本的索引中，而不是使用硬编码索引。标题已使用 re.sub() 防止在索引中使用任何非单词字符。
要使用 re.sub()，请通过在代码顶部添加以下内容将其导入脚本：
导入re2
将以下代码复制并粘贴为第二行和第三行之间的新行 最新帖子 功能：
title_slug = re2.sub("\W+", "-", 标题)
现在替换倒数第四行 最新帖子 具有以下功能：
index=get_script_address() + "/post/v1/" + title_slug,
第 6 步：更新 get_post 函数以仅返回来自特定索引的存储帖子。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
现在，您发布的每个新帖子都将根据其标题保存在动态位置，但 get_post 函数不知道在哪里寻找它们。
在上一步中，您实施了一项更改，这意味着所有新帖子都存储在带有前缀的位置 get_script_address() + "/post/v1/" .
这特别方便，原因有两个：
- 通过使用
v1您实质上是在“版本化”您的数据方案，这将使数据迁移更容易进行。 - 您可以使用我们内置的变体根据前缀访问存储的帖子
戴森/查询存储功能，dysonQueryPrefixStorage.
考虑到这一点，更改名称 get_post 作用于 获取所有帖子 因为它现在将用于访问所有存储的博客文章。
现在替换新命名的第二行和第三行 获取所有帖子 使用以下代码函数：
"戴森/QueryPrefixStorage",
前缀=get_script_address() + "/post/v1/"
如果您现在保存并运行脚本，您的网站将显示错误，因为它仍在尝试从一篇文章中访问数据。
现在，替换你的最后一行 获取所有帖子 具有以下功能：
# str 帮助开发
返回str（响应[“结果”]）
最后，替换你的第二行 应用 功能：
post_data = get_all_posts()
接下来，保存您的脚本，并创建一些新的博客文章。要创建新博客文章，请输入新标题和正文，然后单击 运行 new_post .使用不同的标题和正文多次执行此操作，以测试您刚刚完成的操作。
现在导航到您的网站，您可以在其中看到新帖子的原始数据，看起来应该是这样的：
第 7 步：实现一个函数以将所有博客文章呈现为列表。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
虽然查看您保存的所有博客文章的原始数据非常方便，但这并不是在您的网站上显示它的最漂亮的方式。让我们实现一个新函数来解决这个问题。
由于您不再希望您的网站简单地呈现您帖子的原始数据的打印输出，请替换您的最后两行 获取所有帖子 具有以下功能：
返回响应[“结果”]
现在在结束后添加两个换行符 渲染页面 函数并添加以下代码行：
def render_posts(posts: list[dict[str, str]]):
返回 （
"<ul> "
+ "".join(["<li> " + html.escape(s["data"]) + "</li> " 用于帖子中的 s])
+ "</ul> "
)
你的新 渲染帖子 函数使用一个 for 循环 遍历存储的博客文章列表并将它们呈现为[ <li>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) （列表）元素中的[ <ul>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) （无序列表）元素。
现在替换倒数第二行 应用 具有以下功能以使用您的新功能 渲染帖子 功能：
render_page(render_posts(post_data["storage"])).encode(),
保存您的脚本，看看这如何改变了您的博客！它现在应该看起来像这样：
第 8 步：重命名您网站的标题以反映其作为博客的新功能。
以下代码显示了您将在此步骤中进行的更改，删除的行以红色突出显示，添加的行以绿色突出显示：
剩下要做的就是在你的 HTML 中做一点小小的改动 渲染页面 功能以反映您的网站作为博客的新用途。
代替 问候 和 帖子 在。。之间 <h1> 中的标签 <body> 你的 渲染页面 函数的 HTML。
恭喜，您已经完成了第六个戴森协议教程！
您的代码现在应该如下所示：
导入re2
导入html
从字符串导入模板
从dy导入_chain，get_script_address，get_caller
def new_post（标题：str，正文：str）：
断言 get_script_address() == get_caller(), "权限被拒绝"
数据 = f"{title} -- {body}"
title_slug = re2.sub("\W+", "-", 标题)
print(data) # 帮助调试
返回_链（
"戴森/sendMsgCreateStorage",
创建者=get_script_address(),
index=get_script_address() + "/post/v1/" + title_slug,
数据=数据，
力=真，
)
def get_all_posts():
响应 = _链（
"戴森/QueryPrefixStorage",
前缀=get_script_address() + "/post/v1/"
)
返回响应[“结果”]
def 渲染页面（正文：str）：
返回模板（
"""<!doctype html>
<html>
<head>
<title>你好世界</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.标题{
文字阴影：#FC0 1px 0 10px；
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">帖子！</h1>
<p>$身体</p>
</div>
</body>
</html>
"""
).safe_substitute(body=body)
def render_posts(posts: list[dict[str, str]]):
返回 （
"<ul> "
+ "".join(["<li> " + html.escape(s["data"]) + "</li> " 用于帖子中的 s])
+ "</ul> "
)
def 应用程序（环境，start_response）：
start_response("200 ok", [("Content-type", "text/html")])
post_data = get_all_posts()
返回 [
render_page(render_posts(post_data["storage"])).encode(),
]
到目前为止，您现在应该能够：
- 使用内置
戴森/QueryPrefixStorage函数访问存储在具有特定前缀的索引中的数据。 - 循环存储信息列表并将列表中的每个项目呈现为博客文章。
好的，现在你有了一个简单的博客！虽然它确实有效，但它看起来并不特别令人兴奋。在继续下一个教程之前，请尝试使用您在上一个教程中学到的一些 CSS 自定义您的博客。
一旦您对博客的外观感到满意，请在我们的 Discord 频道上分享！
这就是本教程的全部内容，但请继续关注下一个，您将学习如何存储复杂的帖子 JSON 对象并将它们呈现到您的网站。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
