Jack's Space 09月12日
博客主题与插件设置分享
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文作者分享了其WordPress博客的主题和插件配置。博主使用了免费的Blocksy主题及其配套插件Blocksy Companion,并提供了导入样式的dat文件。文章详细介绍了封面图的制作方法,涉及Keynote、Unsplash、AI生成图以及Photoshop抠图。此外,还列举了Meow Gallery、Memos、NeoDB等一系列功能性插件,用于实现相册、说说、书影音、好物推荐等页面。博主还分享了MiSans字体的使用方法以及其他自定义CSS,特别是针对深色模式的优化,旨在帮助其他新手博主搭建和优化自己的博客。

💡 **主题选择与配置**:博主选择了免费的Blocksy主题和Blocksy Companion插件,并提供了一个dat文件,用户可以通过导入该文件快速还原作者的博客样式。这为新手博主提供了一个便捷的起点,可以参考并在此基础上进行个性化调整,探索属于自己的博客风格。

🖼️ **封面图制作流程**:文章详细拆解了博客封面图的制作过程,作者使用Keynote作为主要工具,结合Unsplash等免费图库或AI生成的图像,通过Photoshop或豆包工具进行抠图,再导入Keynote模板进行排版。这种方法简单易学,适合需要为文章添加个性化封面的博主。

🛠️ **实用插件推荐**:博主列举并介绍了多款功能性插件,包括用于图片展示的Meow Gallery和Meow Lightbox,用于生成“说说”页面的Memos,以及用于“书影音”、“好物”、“应用推荐”、“网站推荐”和“人生地图”等页面的专用插件。这些插件丰富了博客的功能性,使其能够展示更多样化的内容。

✨ **字体与自定义样式**:文章分享了如何引入小米MiSans字体,并通过自定义CSS代码实现博客的整体视觉风格,特别强调了针对深色模式的样式调整。这些细节的分享,有助于用户在保持博客美观的同时,也提升了用户在不同光照环境下的阅读体验。

首先,感谢大家一直以来对我这个小破站的关注与支持♥️。自博客成型以来,陆陆续续有网友来询问我博客主题的相关设置。于是我打算在这篇文章中简单拆解一下目前的主题配置,希望能对同为新手的朋友有所帮助,也希望你能在这个过程中摸索出属于自己的博客风格。

主题

我使用的是免费版的 Blocksy 主题,只需在 WordPress 主题商店中搜索 “blocksy” 即可下载安装。

接着,需要安装一个名为 Blocksy Companion 的插件,同样可以在 WordPress 插件商店中直接搜索并安装。

Blocksy 是一个设置简便且具备较高自定义性的主题。如果要详解我如何从“默认”样式调整为现在的样式,过程会略显复杂,加上时间久远,具体配置我也记不太清了 😅。你可以参考 Dayu 的 这篇文章,导入我准备的 dat 文件即可快速还原样式。

虽然我和 Dayu 都使用了 Blocksy 主题,但呈现出的风格各有不同。如果你更喜欢他博客的设计风格,也不妨试试看 😉

封面

有不少朋友问过我博客文章的封面图是怎么做的,其实每一张封面都是我用 Keynote(苹果自带的演示软件)手动制作的。

我会先制作一个模板文件,之后每次只需修改标题并替换封面中的物体图片即可。

封面中的物体图像,若不是软件图标或商品图,一般来自 Unsplash 这类提供免费图片的站点,或是通过 AI 生成。之后我会用 PhotoShop 或豆包工具抠出主体图像,替换进 Keynote 模板中,整个流程算是比较简单的。

主题相关插件

以下是我目前博客中使用的一些插件:

字体

本博客采用小米的 MiSans 字体。

只需在 自定义额外 CSS 中添加以下代码,即可生效:

/* 字体相关css */
@import url("https://font.sec.miui.com/font/css?family=MiSans:400,450:Chinese_Simplify,Latin&display=swap");

@font-face {
font-family: "MiSans", sans-serif;
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "MiSans" !important;
}

其他自定义 CSS

为了实现当前博客的视觉效果,我还在 自定义额外 CSS 中加入了一些样式代码,其中相当一部分是配合深色模式所使用的。

.stackablelink a{
color: #475671
}

/* 说说相关css */
.atk-content {
color: var(--theme-palette-color-3);
}

a.commentsLink{
color: var(--theme-palette-color-3);
border: 1px solid currentcolor;
border-radius:8px;
}

div.atk-comment-count.atk-dropdown-wrap {
color: var(--theme-palette-color-3);
}

button.atk-send-btn {
border-radius: 8px !important;
}

div.atk-main-editor {
border-radius:8px;
}

ul.atk-dropdown.atk-fade-in{
border-radius:8px !important;
}


/* 黑色模式下,搜索页面背景色 */
html.dmb-html-dark [data-header*="type-1"] #search-modal {
  background-color: rgba(71, 79, 92, 0.98);
}

/* 黑色模式下,好物页面文字 */
html.dmb-html-dark div.goods-exhibition-title {
  color: #475671;
}

html.dmb-html-dark div.goods-exhibition-description {
  color: #475671;
}

/* 黑色模式下,应用页面文字 */
html.dmb-html-dark div.app-name {
color: #475671;
}

html.dmb-html-dark p.app-description {
color: #475671;
}


/* 黑色模式下,书影音页面文字 */
html.dmb-html-dark button.neodb-nav-item {
color: #ffffff;
}

html.dmb-html-dark button.neodb-type-item {
color: #ffffff;
}

html.dmb-html-dark button.load-more-button.button {
color: #ffffff;
background-color: #293241;
}

html.dmb-html-dark .neodb-title a {
color: #ffffff !important
}


/* 黑色模式下,友情链接页面文字 */
html.dmb-html-dark a.latest-post-title {
color: #475671
}

html.dmb-html-dark div.friend-card {
background-color: #293241
}

/* 文章目录的样式 */
.rtoc-mokuji-content.frame2::before {
  border-radius: 8px;
}
button.rtoc_open_close.rtoc_open {
border-radius: 8px;
color: #475671;
}

/* 回复按钮样式 */
a.comment-reply-link {
border-radius: 8px !important;
}

#cancel-comment-reply-link {
border-radius: 8px;
}

我的 WordPress 博客主题与插件设置分享最先出现在Jack's Space

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

WordPress 博客搭建 Blocksy主题 插件 MiSans字体 自定义CSS 博客优化 新手教程 WordPress theme plugins custom CSS blogging tips
相关文章