2026.04.12 工具分享页面完整排版(豆包版)
雷霜
|
|
|
11
|
0
|
->随笔

1177 字
|
12 分钟

工具分享页面完整排版（可直接复制使用）

说明：以下内容直接复制到「工具分享」页面的编辑框（切换到「代码模式」粘贴），发布后即可呈现你想要的效果，无需修改任何内容（除了链接替换成你自己的分类链接）。

一、页面完整代码（直接复制粘贴）

<!-- 工具分享页面顶部：标题+筛选区+搜索区 -->
<div style="text-align: center; margin: 30px 0;">
  <h1 style="font-size: 28px; margin-bottom: 20px; color: #333;">常用工具分享</h1>
  <p style="color: #666; margin-bottom: 30px;">整理日常常用的开发、效率、设计工具，按需筛选，快速找到你需要的工具</p>
  
  <!-- 筛选标签（格子样式） -->
  <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 25px;">
    <a href="https://你的博客域名/tools" style="padding: 8px 18px; background: #f5f5f5; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">全部工具</a>
    <a href="https://你的博客域名/category/tools/kaifa-gongju" style="padding: 8px 18px; background: #f5f5f5; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">开发工具</a>
    <a href="https://你的博客域名/category/tools/xiaolv-gongju" style="padding: 8px 18px; background: #f5f5f5; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">效率工具</a>
    <a href="https://你的博客域名/category/tools/sheji-gongju" style="padding: 8px 18px; background: #f5f5f5; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">设计工具</a>
    <a href="https://你的博客域名/category/tools/qianduan-gongju" style="padding: 8px 18px; background: #f5f5f5; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">前端工具</a>
    <a href="https://你的博客域名/category/tools/python-gongju" style="padding: 8px 18px; background: #f5f5f5; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">Python工具</a>
  </div>
  
  <!-- 搜索框区域 -->
  <div style="max-width: 600px; margin: 0 auto;">
    <form action="https://你的博客域名/" method="get" style="display: flex; gap: 10px;">
      <input type="text" name="s" placeholder="搜索工具名称（如：VSCode、截图工具）" style="flex: 1; padding: 12px 15px; border: 1px solid #eee; border-radius: 8px; font-size: 15px;">
      <input type="hidden" name="cat" value="工具分享分类ID">
      <button type="submit" style="padding: 12px 25px; background: #2c3e50; color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease;">搜索工具</button>
    </form>
    <p style="font-size: 12px; color: #999; margin-top: 8px; text-align: left;">提示：可搜索工具名称、功能关键词，精准找到所需工具</p>
  </div>
</div>

<!-- 分割线 -->
<hr style="border: none; border-top: 1px solid #eee; margin: 30px 0;">

<!-- 下方工具卡片列表（和摄影页风格统一） -->
<div style="display: flex; flex-wrap: wrap; gap: 20px; padding: 0 20px; max-width: 1200px; margin: 0 auto;">
  <!-- 工具卡片1（示例，每篇工具文章对应一个卡片，发布文章后自动生成） -->
  <div style="width: calc(33.333% - 14px); background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease;">
    <img src="工具封面图链接" alt="工具名称" style="width: 100%; height: 180px; object-fit: cover;">
    <div style="padding: 15px;">
      <span style="padding: 3px 8px; background: #e3f2fd; color: #1976d2; font-size: 12px; border-radius: 4px; margin-right: 5px;">开发工具</span>
      <h3 style="font-size: 18px; margin: 10px 0; color: #333;"><a href="工具文章链接" style="text-decoration: none; color: #333;">工具名称（如：VSCode 详细使用指南）</a></h3>
      <p style="font-size: 14px; color: #666; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">工具简介（1-2句话，如：轻量强大的代码编辑器，支持多语言、插件扩展，适合前端/后端开发）</p>
      <a href="工具文章链接" style="display: inline-block; padding: 6px 12px; background: #f5f5f5; color: #333; text-decoration: none; font-size: 13px; border-radius: 4px;">查看详情</a>
    </div>
  </div>
  
  <!-- 工具卡片2（示例） -->
  <div style="width: calc(33.333% - 14px); background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease;">
    <img src="工具封面图链接" alt="工具名称" style="width: 100%; height: 180px; object-fit: cover;">
    <div style="padding: 15px;">
      <span style="padding: 3px 8px; background: #e8f5e9; color: #388e3c; font-size: 12px; border-radius: 4px; margin-right: 5px;">效率工具</span>
      <h3 style="font-size: 18px; margin: 10px 0; color: #333;"><a href="工具文章链接" style="text-decoration: none; color: #333;">工具名称（如：Snipaste 截图工具）</a></h3>
      <p style="font-size: 14px; color: #666; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">工具简介（1-2句话，如：免费好用的截图+贴图工具，支持标注、取色，提升日常办公效率）</p>
      <a href="工具文章链接" style="display: inline-block; padding: 6px 12px; background: #f5f5f5; color: #333; text-decoration: none; font-size: 13px; border-radius: 4px;">查看详情</a>
    </div>
  </div>
  
  <!-- 工具卡片3（示例） -->
  <div style="width: calc(33.333% - 14px); background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease;">
    <img src="工具封面图链接" alt="工具名称" style="width: 100%; height: 180px; object-fit: cover;">
    <div style="padding: 15px;">
      <span style="padding: 3px 8px; background: #fff3e0; color: #f57c00; font-size: 12px; border-radius: 4px; margin-right: 5px;">设计工具</span>
      <h3 style="font-size: 18px; margin: 10px 0; color: #333;"><a href="工具文章链接" style="text-decoration: none; color: #333;">工具名称（如：Pixlr 在线修图）</a></h3>
      <p style="font-size: 14px; color: #666; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">工具简介（1-2句话，如：免费在线修图工具，无需安装，支持裁剪、调色、抠图，适合快速修图）</p>
      <a href="工具文章链接" style="display: inline-block; padding: 6px 12px; background: #f5f5f5; color: #333; text-decoration: none; font-size: 13px; border-radius: 4px;">查看详情</a>
    </div>
  </div>
</div>

<!-- 加载更多按钮（可选） -->
<div style="text-align: center; margin: 40px 0;">
  <a href="https://你的博客域名/category/tools" style="padding: 10px 20px; border: 1px solid #eee; border-radius: 8px; color: #333; text-decoration: none; transition: all 0.3s ease;">查看更多工具</a>
</div>

二、一步一步操作指南（小白零门槛）

1. 先准备2个关键信息（必做）

  • 你的博客域名：比如 https://xxx.com（替换代码里所有「https://你的博客域名/」）
  • 工具分享分类ID： 操作：后台 → 文章 → 分类目录 → 找到「工具分享」分类 → 点击编辑 → 地址栏里「tag_ID=xx」的「xx」就是分类ID（替换代码里「工具分享分类ID」）

2. 替换筛选标签链接（必做）

代码里的筛选标签链接，替换成你自己的子分类链接，获取方法：

后台 → 文章 → 分类目录 → 找到「开发工具」「效率工具」等子分类 → 点击「查看」→ 复制浏览器地址栏的链接，替换代码里对应标签的链接即可。

示例：「开发工具」的链接是 https://xxx.com/category/tools/kaifa-gongju，就替换代码里对应「开发工具」的链接。

3. 粘贴到页面并发布（必做）

  1. 后台 → 页面 → 新建页面 → 标题输入「工具分享」，别名设为「tools」
  2. 点击编辑框右上角的「代码」（切换到代码模式），把上面的完整代码复制粘贴进去
  3. 替换完「博客域名」「分类ID」「筛选链接」后，点击「发布」

4. 添加到导航栏（必做）

后台 → 外观 → 菜单 → 找到刚新建的「工具分享」页面 → 添加到导航栏 → 保存菜单，刷新前台即可看到。

5. 自动生成工具卡片（关键）

代码里的「工具卡片」是示例，你发布工具类文章后，需要替换成「自动调用文章」的方式，不用手动添加卡片：

编辑「工具分享」页面 → 切换到「可视化模式」→ 删除示例卡片 → 插入「最新文章」区块 → 设置「仅显示分类：工具分享」「布局：网格/卡片」「列数：3列」→ 保存更新，即可自动显示所有工具文章卡片。

三、样式优化（和摄影页、编程页统一）

复制以下CSS代码，粘贴到「外观 → 自定义 → 额外CSS」，点击发布，即可让工具卡片和摄影页风格统一，hover有放大效果：

/* 工具分享页面 样式优化（和摄影页、编程页统一） */
/* 筛选标签 hover 效果 */
.page-id-tools a[href*="category/tools"]:hover {
    background: #2c3e50;
    color: white !important;
}
/* 工具卡片 hover 效果 */
.page-id-tools .wp-block-latest-posts__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.page-id-tools .wp-block-latest-posts__post {
    width: calc(33.333% - 14px) !important;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    padding: 0 !important;
}
.page-id-tools .wp-block-latest-posts__post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
/* 卡片图片适配 */
.page-id-tools .wp-block-latest-posts__post img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    margin: 0 !important;
}
/* 卡片文字样式 */
.page-id-tools .wp-block-latest-posts__post-title {
    font-size: 18px !important;
    padding: 0 15px !important;
    margin: 10px 0 !important;
}
.page-id-tools .wp-block-latest-posts__post-excerpt {
    font-size: 14px !important;
    color: #666 !important;
    padding: 0 15px !important;
    margin-bottom: 15px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 搜索框样式优化 */
.page-id-tools input[type="text"]:focus {
    outline: none;
    border-color: #2c3e50;
}
.page-id-tools button[type="submit"]:hover {
    background: #34495e;
}
/* 手机端适配 */
@media (max-width: 768px) {
    .page-id-tools .wp-block-latest-posts__post {
        width: 100% !important;
    }
    .page-id-tools .wp-block-search__form {
        flex-direction: column;
    }
    .page-id-tools .wp-block-search__input {
        width: 100% !important;
    }
}

四、补充说明（避坑+优化）

  • 筛选标签点击后，会跳转对应分类页，显示该分类下的工具文章，无需复杂设置，稳定不出错。
  • 搜索框仅搜索「工具分享」分类下的内容，不会搜到随笔、编程等其他内容（因为加了分类ID隐藏参数）。
  • 工具文章发布时，记得选对应子分类（开发/效率/设计等），并上传「特色图片」（作为卡片封面图）。
  • 如果想调整卡片列数，把CSS里「width: calc(33.333% – 14px)」改成「50%」就是2列，「25%」就是4列。

五、最终效果预览（和你想要的完全一致）

  1. 顶部：页面标题 + 圆角筛选格子（hover变深色）
  2. 中间：搜索框（带提示文字）+ 搜索按钮
  3. 下方：3列工具卡片（和摄影页风格统一，hover放大）
  4. 底部：查看更多按钮（可选）
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇