如何设置非首页/博客页首区块100%宽度，其余内容保留侧边栏？

我明白你的痛点：插件都试过了不管用，想让特定段落/元素突破侧边栏的限制铺满整个页面，同时下面的内容还保持原来的带侧边栏布局。别慌，直接用自定义CSS就能解决，我给你分两种常见的主题布局场景来写具体代码，你照着改就行：

第一种情况：侧边栏是浮动布局（比如靠右浮动） #

先打开浏览器的开发者工具（按F12），看看你主题里主内容的容器类名（比如可能叫.main-content）和侧边栏的宽度（比如是20%或者250px固定宽度）。

让首段落全屏： #

/* 只在非首页、非博客页生效 */
body:not(.home):not(.blog) .main-content p:first-of-type {
    width: calc(100% + 20%); /* 加上侧边栏的宽度，这里换成你实际的侧边栏占比 */
    margin-left: -20%; /* 向左偏移侧边栏的宽度，让元素左对齐页面边缘 */
    padding-left: calc(20% + 20px); /* 调整文字位置，和其他内容对齐，20px是你主内容的内边距，按需改 */
}

让特定ID的元素全屏（比如你给元素加了id="full-width-section"）： #

body:not(.home):not(.blog) #full-width-section {
    width: calc(100% + 20%);
    margin-left: -20%;
    padding-left: calc(20% + 20px);
    padding-right: 20px; /* 保持右边和其他内容对齐 */
}

如果你的侧边栏是固定宽度（比如250px），就把上面的20%换成250px就行，比如width: calc(100% + 250px)，margin-left: -250px。

第二种情况：主题用Flex布局做的主内容+侧边栏 #

如果你的页面是用flex容器（比如.page-wrap）把主内容和侧边栏包起来的，主内容占80%，侧边栏占20%，那可以用绝对定位让元素突破容器：

body:not(.home):not(.blog) .main-content #full-width-section {
    position: relative;
    left: calc(-1 * (100vw - 80%)); /* 计算出页面总宽度和主内容宽度的差值，向左偏移 */
    width: 100vw; /* 直接用视口宽度铺满整个页面 */
    box-sizing: border-box;
    padding-left: calc((100vw - 80%) + 20px); /* 调整文字位置，和其他内容对齐 */
    padding-right: 20px;
}

额外提醒： #

• 记得替换代码里的类名/ID：一定要用开发者工具查你自己网站的实际选择器，别直接抄我的示例！
• 适配手机端：加个媒体查询，确保小屏幕下元素不会错位：

@media (max-width: 768px) {
    body:not(.home):not(.blog) .main-content p:first-of-type,
    body:not(.home):not(.blog) #full-width-section {
        width: 100%;
        margin-left: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
}

怎么加这些CSS？ #

你可以直接去主题的「自定义」→「附加CSS」里粘贴代码，或者用子主题的style.css文件，这样主题更新的时候代码不会丢。

这个方法完全不需要插件，直接通过CSS精准控制，完美实现你要的「首段落/特定元素全屏，下方内容保持侧边栏布局」的需求～

内容的提问来源于stack exchange，提问作者UserSoUndSo