这样可以直接将 gemini canvas 生成的页面嵌入到这里展示。
shortcode 实现
function custom_iframe_srcdoc_shortcode($atts, $content = null) {
// 默认的宽度和高度为 100%，表示相对父容器
$atts = shortcode_atts(
array(
'width' => '100%', // 默认宽度为父容器宽度的 100%
'height' => '100%', // 默认高度为父容器高度的 100%
),
$atts,
'iframe_srcdoc'
);
// 使用 srcdoc 属性插入 HTML 内容，并设置宽度和高度为父容器大小的百分比
$iframe_html = '<iframe srcdoc="' . esc_attr($content) . '" style="width: ' . esc_attr($atts['width']) . '; height: ' . esc_attr($atts['height']) . ';" frameborder="0"></iframe>';
return $iframe_html;
}
add_shortcode('iframe_srcdoc', 'custom_iframe_srcdoc_shortcode');
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>优化后的页面布局</title>
<script src='https://unpkg.com/@tailwindcss/browser@4'></script>
<link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' rel='stylesheet'>
<style>
body {
font-family: 'Inter', sans-serif;
}
.uicore-cover-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.2s ease-in-out;
}
.uicore-cover-img:hover {
transform: scale(1.1);
}
</style>
</head>
<body class='bg-gray-100 dark:bg-gray-900 p-4'>
<main class='max-w-7xl mx-auto'>
<section class='py-8'>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-6'>
<div class='overflow-hidden'>
<a href='#' class='flex flex-col sm:flex-row items-start sm:items-center'>
<div class='w-full sm:w-1/3 h-24 sm:h-32 md:h-40 uicore-cover-img rounded-t-lg sm:rounded-l-lg sm:rounded-t-none rounded-tl-lg rounded-bl-lg' style='background-image: url(https://uicore.co/framework/layouts/wp-content/uploads/2021/07/blog-9-650x494.webp); aspect-ratio: 1 / 1;'></div>
<div class='p-4 sm:p-6 sm:w-2/3'>
<p class='text-xs text-orange-500 dark:text-orange-400 mb-2 uppercase'>PERSONAL GROWTH</p>
<h3 class='text-xl font-semibold text-gray-900 dark:text-white mb-2 leading-tight'>10 Simple Practices That Will Help You Get 1% Better Every Day</h3>
<p class='text-xs text-gray-600 dark:text-gray-300 mt-2'>UIADMIN JULY 20, 2021</p>
</div>
</a>
</div>
<div class='overflow-hidden'>
<a href='#' class='flex flex-col sm:flex-row items-start sm:items-center'>
<div class='w-full sm:w-1/3 h-24 sm:h-32 md:h-40 uicore-cover-img rounded-t-lg sm:rounded-l-lg sm:rounded-t-none rounded-tl-lg rounded-bl-lg' style='background-image: url(https://uicore.co/framework/layouts/wp-content/uploads/2021/07/blog-9-650x494.webp); aspect-ratio: 1 / 1;'></div>
<div class='p-4 sm:p-6 sm:w-2/3'>
<p class='text-xs text-orange-500 dark:text-orange-400 mb-2 uppercase'>PERSONAL GROWTH</p>
<h3 class='text-xl font-semibold text-gray-900 dark:text-white mb-2 leading-tight'>5 Uses of Artificial Intelligence that will blow your mind</h3>
<p class='text-xs text-gray-600 dark:text-gray-300 mt-2'>UIADMIN JULY 20, 2021</p>
</div>
</a>
</div>
</div>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-6 mt-6'>
<div class='overflow-hidden'>
<a href='#' class='flex flex-col sm:flex-row items-start sm:items-center'>
<div class='w-full sm:w-1/3 h-24 sm:h-32 md:h-40 uicore-cover-img rounded-t-lg sm:rounded-l-lg sm:rounded-t-none rounded-tl-lg rounded-bl-lg' style='background-image: url(https://uicore.co/framework/layouts/wp-content/uploads/2021/07/blog-9-650x494.webp); aspect-ratio: 1 / 1;'></div>
<div class='p-4 sm:p-6 sm:w-2/3'>
<p class='text-xs text-orange-500 dark:text-orange-400 mb-2 uppercase'>DESIGN, PERSONAL GROWTH</p>
<h3 class='text-xl font-semibold text-gray-900 dark:text-white mb-2 leading-tight'>This Long-Awaited Technology May Finally Change the World</h3>
<p class='text-xs text-gray-600 dark:text-gray-300 mt-2'>UIADMIN JULY 20, 2021</p>
</div>
</a>
</div>
<div class='overflow-hidden'>
<a href='#' class='flex flex-col sm:flex-row items-start sm:items-center'>
<div class='w-full sm:w-1/3 h-24 sm:h-32 md:h-40 uicore-cover-img rounded-t-lg sm:rounded-l-lg sm:rounded-t-none rounded-tl-lg rounded-bl-lg' style='background-image: url(https://uicore.co/framework/layouts/wp-content/uploads/2021/07/blog-9-650x494.webp); aspect-ratio: 1 / 1;'></div>
<div class='p-4 sm:p-6 sm:w-2/3'>
<p class='text-xs text-orange-500 dark:text-orange-400 mb-2 uppercase'>DESIGN</p>
<h3 class='text-xl font-semibold text-gray-900 dark:text-white mb-2 leading-tight'>Design Thinking: Building a Design System for an Existing Product</h3>
<p class='text-xs text-gray-600 dark:text-gray-300 mt-2'>UIADMIN AUGUST 31, 2020</p>
</div>
</a>
</div>
</div>
</section>
</main>
</body>
</html>