feat(creator-studio): 图片宽度四档与作者行
- 通过 editor.BlockEdit 过滤器给 core/image 增加「半屏 / 中等 / 通栏 / 全宽」 四档宽度,选中图片时出现在区块工具条;宽度写入 className 并序列化到 post_content,前台样式即可生效,无需自定义区块或额外元数据 - 前台样式:半屏靠左 50%,中等 72%,通栏跟随正文行宽,全宽突破行宽但受容器 内边距约束;移动端半屏与全宽回退为整行,避免横向滚动 - 新增作者行(头像 + 昵称 + 身份说明),数据由 CreatorRest::author_payload() 从服务端给出,前端不自行拼装;无昵称时整行不渲染,头像缺失时回退首字占位 - 作者行放在摘要之后、正文之前 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
79909f449e
commit
f5e9420266
11 files changed
+680
-39
No files matched your search
@@ -456,6 +456,102 @@ $warn: #b4573f;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 图片宽度四档 ---------- */
|
||||
|
||||
.jio-creator__editor,
|
||||
.jio-page-submit .entry-content {
|
||||
.wp-block-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 半屏:围绕正文左侧,右侧留给说明文字。 */
|
||||
.wp-block-image.jio-img-w--half {
|
||||
width: 50%;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-image.jio-img-w--medium {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.wp-block-image.jio-img-w--wide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 全宽:突破正文行宽,但受容器 padding 约束避免横向滚动。 */
|
||||
.wp-block-image.jio-img-w--full {
|
||||
width: calc(100% + clamp(24px, 6vw, 64px));
|
||||
max-width: none;
|
||||
margin-left: calc(clamp(24px, 6vw, 64px) / -2);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 作者行 ---------- */
|
||||
|
||||
.jio-creator__author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 2px 0 20px;
|
||||
color: #8c9a94;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.jio-creator__author-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.jio-creator__author-avatar.is-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e3ece7;
|
||||
color: #4a5f57;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.jio-creator__author-name {
|
||||
color: #4a5f57;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.jio-creator__author-meta {
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: #eef5f2;
|
||||
color: #3c7d6c;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.jio-creator__author-hint {
|
||||
margin-left: auto;
|
||||
color: #b0bcb7;
|
||||
}
|
||||
|
||||
/* ---------- 常驻插入按钮 ---------- */
|
||||
|
||||
.jio-creator__insert {
|
||||
|
||||
Reference in new issue
Block a user