1.在source/css文件夹下新建custom.css文件（也可以自定义其它文件名），添加内容：
/* =================================================== */
/* == 仅控制宽度，不影响侧边栏 == */
/* =================================================== */
/* 这些样式只在 body 标签有一个叫 .fullscreen-mode 的 class 时才会生效 */
/* --- Part 1: 针对【文章页面】的全屏样式 --- */
/* 定位到文章页最外层容器 .post，并让其撑满 */
body.fullscreen-mode .post #body-wrap,
body.fullscreen-mode .post #content-inner,
body.fullscreen-mode .post #post {
width: 100vw !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 移除文章内容的宽度限制 */
body.fullscreen-mode .post #article-container.container {
max-width: none !important;
padding: 20px 40px !important; /* 给左右留一点点边距，防止文字贴边 */
}
/* 隐藏文章页顶部大图和底部版权区，以获得更好全屏效果 */
body.fullscreen-mode .post #header,
body.fullscreen-mode .post #footer {
display: none !important;
}
/* --- Part 2: 针对【主页】文章列表的全屏样式 --- */
/* 定位到主页最外层容器 .page，并移除其宽度限制 */
body.fullscreen-mode .page #content-inner {
width: 100vw !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 给主页的文章卡片列表区域加一点边距，防止卡片贴边 */
body.fullscreen-mode .page #recent-posts {
padding: 40px !important;
}
/* =================================================== */
/* == Part 3: 移动端适配 (响应式设计) == */
/* =================================================== */
@media screen and (max-width: 768px) {
/* 上面的 @media screen and (max-width: 768px) 的意思是：
“如果屏幕宽度小于或等于 768px (典型的平板和手机宽度)，
就执行花括号 { } 里的所有样式。”
*/
/* 在手机上，减小文章页的左右边距 */
body.fullscreen-mode .post #article-container.container {
padding: 20px 15px !important; /* 左右边距从 40px 大幅减小到 15px */
}
/* 在手机上，减小主页文章列表的左右边距 */
body.fullscreen-mode .page #recent-posts {
padding: 20px 15px !important; /* 左右边距从 40px 大幅减小到 15px */
}
}
2. 在source/js文件夹下新建mode-switcher.js文件（也可以自定义其它文件名），添加内容：
// IIFE to avoid polluting global scope
(function() {
// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
const CLASS_NAME = 'fullscreen-mode';
const STORAGE_KEY = 'theme_fullscreen_mode';
const BUTTON_ID = 'fullscreen-toggle-btn';
// Find the container for the button
const rightsideConfig = document.getElementById('rightside-config-hide');
// If the container doesn't exist, do nothing
if (!rightsideConfig) {
return;
}
// --- 1. Create the button ---
const button = document.createElement('button');
button.id = BUTTON_ID;
button.type = 'button';
button.title = '切换全屏模式';
button.innerHTML = '<i class="fas fa-expand"></i>';
// Add the button to the page
rightsideConfig.appendChild(button);
// --- 2. Function to apply the mode ---
const applyMode = (isFullScreen) => {
if (isFullScreen) {
document.body.classList.add(CLASS_NAME);
button.innerHTML = '<i class="fas fa-compress"></i>'; // Change icon to "compress"
} else {
document.body.classList.remove(CLASS_NAME);
button.innerHTML = '<i class="fas fa-expand"></i>'; // Change icon to "expand"
}
};
// --- 3. Add click event listener to the button ---
button.addEventListener('click', () => {
const isCurrentlyFullScreen = document.body.classList.contains(CLASS_NAME);
// Toggle the mode and save the new state
applyMode(!isCurrentlyFullScreen);
localStorage.setItem(STORAGE_KEY, !isCurrentlyFullScreen);
});
// --- 4. Check localStorage on page load and apply the saved mode ---
const savedMode = localStorage.getItem(STORAGE_KEY);
// If savedMode is 'true', apply fullscreen, otherwise default to not fullscreen
applyMode(savedMode === 'true');
});
})();
3. 修改_config.butterfly.yml（这里是你的主题配置文件），在inject字段修改成如下内容：
inject:
head:
- <link rel="stylesheet" href="/css/custom.css">
bottom:
- <script src="/js/mode-switcher.js"></script>
配置完成后在右下角的控制按钮里多了一个全屏切换。