<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="https://v1sta.xyz/wp-content/plugins/pretty-rss-feeds/xslt/pretty-feed.xsl" type="text/xsl" media="screen" ?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:media="http://search.yahoo.com/mrss/">

<channel>
	<title>2026年3月22日 &#8211; 景の域</title>
	<atom:link href="https://v1sta.xyz/2026/03/22/feed/" rel="self" type="application/rss+xml" />
	<link>https://v1sta.xyz</link>
	<description>远景的幻想空间</description>
	<lastBuildDate>Mon, 30 Mar 2026 19:01:23 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://v1sta.xyz/wp-content/uploads/2026/03/V1sta-Orb-Output512-2-60x60.png</url>
	<title>2026年3月22日 &#8211; 景の域</title>
	<link>https://v1sta.xyz</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>基于WP区块小工具添加h-card MF2微格式信息卡</title>
		<link>https://v1sta.xyz/life/create-h-card-mf2-with-wp-gutenberg-blocks/</link>
					<comments>https://v1sta.xyz/life/create-h-card-mf2-with-wp-gutenberg-blocks/#respond</comments>
		
		<dc:creator><![CDATA[域主 V1STA]]></dc:creator>
		<pubDate>Sun, 22 Mar 2026 10:40:35 +0000</pubDate>
				<category><![CDATA[日常]]></category>
		<guid isPermaLink="false">https://v1sta.xyz/?p=3633</guid>

					<description><![CDATA[要让IndieWeb生态的解析器正确识别网站的信息，需要有一个h-card格式的MicroFormats2微格 &#8230; <a href="https://v1sta.xyz/life/create-h-card-mf2-with-wp-gutenberg-blocks/" class="more-link">继续阅读<span class="screen-reader-text">基于WP区块小工具添加h-card MF2微格式信息卡</span> <span class="meta-nav">&#8594;</span></a>]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">要让IndieWeb生态的解析器正确识别网站的信息，需要有一个h-card格式的MicroFormats2微格式卡片。</p>



<p class="wp-block-paragraph">可以使用 <a href="https://indiewebify.me/validate-h-card/">IndieWebify.me</a> 提供的工具验证。</p>



<p class="wp-block-paragraph">但是WordPress本身不支持MF2微格式，适配了MF2微格式的主题也相当有限（而且我真的很喜欢自行修改的2014主题），而在WP的插件库也很少有类似的插件，自行开发子主题或插件的难度非常高、且不易维护。</p>



<p class="wp-block-paragraph">对于一般人而言，使用古腾堡的区块小工具不失为一种简易的方式。<br>不过，直接在主题外观的小工具页面编辑区块是很困难的行为，若是使用「旧版小工具」的附加插件改变主题页面，则几乎没有编辑选项。</p>



<p class="wp-block-paragraph">对于这个情况，古腾堡提供了一种类似软链接方式的「可同步区块模板」，在一处编辑，即可同步到所有位置。</p>



<span id="more-3633"></span>


<div class="wp-block-image">
<figure class="alignright size-full is-resized"><a href="https://v1sta.xyz/wp-content/uploads/2026/03/image-5.png" data-lbwps-width="349" data-lbwps-height="482" data-lbwps-srcsmall="https://v1sta.xyz/wp-content/uploads/2026/03/image-5-217x300.png"><img data-dominant-color="eef1f2" data-has-transparency="false" fetchpriority="high" decoding="async" width="349" height="482" sizes="(max-width: 349px) 100vw, 349px" src="https://v1sta.xyz/wp-content/uploads/2026/03/image-5.png" alt="" class="wp-image-3640 not-transparent" style="--dominant-color: #eef1f2; width:221px;height:auto" srcset="https://v1sta.xyz/wp-content/uploads/2026/03/image-5.png 349w, https://v1sta.xyz/wp-content/uploads/2026/03/image-5-217x300.png 217w" /></a></figure>
</div>


<p class="wp-block-paragraph">在全区块主题中，这是非常有用的功能；而如果使用旧版小工具，也可以在某一页面创建好区块模板，随后切换到代码编辑器（快捷键为Ctrl+Shift+Alt+M），将这个区块模板的代码复制出来，粘贴至「区块」小工具中。</p>



<p class="wp-block-paragraph">通过使用行列/堆叠以及组合区块，排列出横板平铺图标视图的信息卡。接下来稍微有些棘手，需要将其转换为HTML代码，然后在对应的组件中填写<a href="https://microformats.org/wiki/h-card" data-type="link" data-id="https://microformats.org/wiki/h-card">h-card</a>对应的CSS class类。</p>



<p class="wp-block-paragraph">排版大纲如下：</p>



<ul class="wp-block-list">
<li>区块行
<ul class="wp-block-list">
<li>LOGO/头像图片</li>



<li>间隙</li>



<li>区块堆叠
<ul class="wp-block-list">
<li>名称</li>



<li>简介</li>
</ul>
</li>
</ul>
</li>
</ul>



<figure class="wp-block-image size-large"><a href="https://v1sta.xyz/wp-content/uploads/2026/03/image-1.png" data-lbwps-width="1026" data-lbwps-height="589" data-lbwps-srcsmall="https://v1sta.xyz/wp-content/uploads/2026/03/image-1-300x172.png"><img data-dominant-color="e9eaea" data-has-transparency="false" style="--dominant-color: #e9eaea;" decoding="async" width="1024" height="588" sizes="(max-width: 1024px) 100vw, 1024px" src="https://v1sta.xyz/wp-content/uploads/2026/03/image-1-1024x588.png" alt="" class="wp-image-3636 not-transparent" srcset="https://v1sta.xyz/wp-content/uploads/2026/03/image-1-1024x588.png 1024w, https://v1sta.xyz/wp-content/uploads/2026/03/image-1-300x172.png 300w, https://v1sta.xyz/wp-content/uploads/2026/03/image-1-768x441.png 768w, https://v1sta.xyz/wp-content/uploads/2026/03/image-1.png 1026w" /></a></figure>


<div class="wp-block-image">
<figure class="alignright size-full"><a href="https://v1sta.xyz/wp-content/uploads/2026/03/image-2.png" data-lbwps-width="241" data-lbwps-height="301" data-lbwps-srcsmall="https://v1sta.xyz/wp-content/uploads/2026/03/image-2.png"><img data-dominant-color="f5f5f6" data-has-transparency="false" style="--dominant-color: #f5f5f6;" decoding="async" width="241" height="301" sizes="(max-width: 241px) 100vw, 241px" src="https://v1sta.xyz/wp-content/uploads/2026/03/image-2.png" alt="" class="wp-image-3637 not-transparent"/></a></figure>
</div>


<p class="wp-block-paragraph">在行或组部分（大纲位置大于子元素的组），添加CSS类 ，使其声明为微格式信息。</p>



<p class="wp-block-paragraph">CSS类如下：</p>



<p class="wp-block-paragraph"><code>hcard-display h-card vcard u-author</code></p>



<p class="wp-block-paragraph">随后是添加需要显示的内容，主要是图片和文字。这里首先编辑好内容，随后需要转换为HTML内容，确保 <a href="https://microformats.org/wiki/h-card#Properties">h-card属性</a> 能够填入对应的HTML元素当中。</p>



<p class="wp-block-paragraph">其中要声明为主要的信息卡，那么 <code>rel="me"</code> 属性也是必不可少的。</p>



<p class="wp-block-paragraph">然后将其HTML设定为aside以便于识别。</p>



<p class="wp-block-paragraph">当然也可以直接抄下面这段HTML，但是请务必对于HTML结构有一个清晰的认知。</p>



<figure class="wp-block-image size-full"><a href="https://v1sta.xyz/wp-content/uploads/2026/03/image-3.png" data-lbwps-width="669" data-lbwps-height="562" data-lbwps-srcsmall="https://v1sta.xyz/wp-content/uploads/2026/03/image-3-300x252.png"><img data-dominant-color="e8e9ea" data-has-transparency="false" style="--dominant-color: #e8e9ea;" loading="lazy" decoding="async" width="669" height="562" sizes="auto, (max-width: 669px) 100vw, 669px" src="https://v1sta.xyz/wp-content/uploads/2026/03/image-3.png" alt="" class="wp-image-3638 not-transparent" srcset="https://v1sta.xyz/wp-content/uploads/2026/03/image-3.png 669w, https://v1sta.xyz/wp-content/uploads/2026/03/image-3-300x252.png 300w" /></a></figure>



<p class="wp-block-paragraph">以本域为例，我将其放置在页脚小工具的部分。</p>



<figure class="wp-block-image size-large"><a href="https://v1sta.xyz/wp-content/uploads/2026/03/image-4.png" data-lbwps-width="1248" data-lbwps-height="381" data-lbwps-srcsmall="https://v1sta.xyz/wp-content/uploads/2026/03/image-4-300x92.png"><img data-dominant-color="3d4041" data-has-transparency="false" style="--dominant-color: #3d4041;" loading="lazy" decoding="async" width="1024" height="313" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://v1sta.xyz/wp-content/uploads/2026/03/image-4-1024x313.png" alt="" class="wp-image-3639 not-transparent" srcset="https://v1sta.xyz/wp-content/uploads/2026/03/image-4-1024x313.png 1024w, https://v1sta.xyz/wp-content/uploads/2026/03/image-4-300x92.png 300w, https://v1sta.xyz/wp-content/uploads/2026/03/image-4-768x234.png 768w, https://v1sta.xyz/wp-content/uploads/2026/03/image-4.png 1248w" /></a></figure>



<p class="wp-block-paragraph">并通过 IndieWebify.me 的测试：</p>



<figure class="wp-block-image size-large"><a href="https://v1sta.xyz/wp-content/uploads/2026/03/image-6.png" data-lbwps-width="1051" data-lbwps-height="710" data-lbwps-srcsmall="https://v1sta.xyz/wp-content/uploads/2026/03/image-6-300x203.png"><img data-dominant-color="e7f0e7" data-has-transparency="false" style="--dominant-color: #e7f0e7;" loading="lazy" decoding="async" width="1024" height="692" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://v1sta.xyz/wp-content/uploads/2026/03/image-6-1024x692.png" alt="" class="wp-image-3646 not-transparent" srcset="https://v1sta.xyz/wp-content/uploads/2026/03/image-6-1024x692.png 1024w, https://v1sta.xyz/wp-content/uploads/2026/03/image-6-300x203.png 300w, https://v1sta.xyz/wp-content/uploads/2026/03/image-6-768x519.png 768w, https://v1sta.xyz/wp-content/uploads/2026/03/image-6.png 1051w" /></a></figure>



<p class="wp-block-paragraph">另外，介绍另一种方式是使用 <a href="https://microformats.org/code/hcard/creator">microformats.org 的 hcard 创建器</a>，同样是基于HTML生成，填写好各种对应的信息之后，将其作为HTML小工具添加至侧边栏或其他地方。相较于上述的方案，这个方式需要自行编辑HTML，因此美观度也需要自行调整。</p>

<p><a href="https://v1sta.xyz/life/create-h-card-mf2-with-wp-gutenberg-blocks/" rel="nofollow">来源</a></p>]]></content:encoded>
					
					<wfw:commentRss>https://v1sta.xyz/life/create-h-card-mf2-with-wp-gutenberg-blocks/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<enclosure url="https://v1sta.xyz/wp-content/uploads/2026/03/image-5.png" length="38807" type="image/png"/><media:content url="https://v1sta.xyz/wp-content/uploads/2026/03/image-5.png" width="349" height="482" medium="image" type="image/png"/>	</item>
	</channel>
</rss>
