news 2026/7/28 23:31:30

从零开始的博客搭建：使用Simply主题构建个人品牌的完整教程

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
从零开始的博客搭建：使用Simply主题构建个人品牌的完整教程

从零开始的博客搭建：使用Simply主题构建个人品牌的完整教程

【免费下载链接】simplyTheme for Ghost inspired on Medium项目地址: https://gitcode.com/gh_mirrors/si/simply

Simply主题是一款受Medium启发的Ghost博客主题，它能帮助你快速搭建一个美观且功能丰富的个人博客。本教程将引导你完成从环境准备到主题定制的全过程，让你轻松拥有一个专业的个人品牌博客。

准备工作：搭建基础环境

在开始使用Simply主题前，你需要先准备好以下环境：

  1. 安装Node.js和npm：Simply主题需要Node.js环境来运行构建工具。你可以从Node.js官网下载并安装适合你操作系统的版本。

  2. 安装Ghost CLI：Ghost CLI是Ghost博客的命令行工具，使用以下命令安装：

    npm install -g ghost-cli

  3. 创建Ghost博客：使用Ghost CLI创建一个新的Ghost博客实例：

    ghost install local

获取Simply主题

现在，你需要获取Simply主题的源代码。使用以下命令克隆主题仓库：

git clone https://gitcode.com/gh_mirrors/si/simply

克隆完成后，你会得到一个包含Simply主题所有文件的目录。

Simply主题包含丰富的文件结构，包括模板文件、样式表、脚本和图片资源

安装与部署主题

将Simply主题部署到你的Ghost博客非常简单：

  1. 进入主题目录：

    cd simply

  2. 安装依赖：

    npm install

  3. 构建主题：

    npm run build

  4. 部署主题：

    ghost deploy

部署完成后，你可以在Ghost管理界面的"设计"选项中激活Simply主题。你会发现博客的外观已经焕然一新，本地所做的更改也会自动应用到博客中。

基础配置：打造个性化博客

Simply主题提供了丰富的配置选项，让你可以根据自己的需求定制博客。以下是一些基础配置：

社交媒体链接

添加社交媒体链接可以让访问者更容易找到你的其他在线平台。编辑Dashboard -> Code injection -> Site Footer，添加以下代码：

<script> var followSocialMedia = { youtube: ["YOUR_URL", "YOUR_TITLE"], instagram: ["YOUR_URL", "YOUR_TITLE"], github: ["YOUR_URL", "YOUR_TITLE"], linkedin: ["YOUR_URL", "YOUR_TITLE"], rss: ["YOUR_URL", "YOUR_TITLE"], /* 'snapchat': ['YOUR_URL','YOUR_TITLE'], 'dribbble': ['YOUR_URL','YOUR_TITLE'], ...其他社交媒体 */ }; </script>

只需取消注释并填写你想要显示的社交媒体链接即可。

深色/浅色模式Logo

Simply主题支持深色和浅色模式，你可以为不同模式设置不同的Logo：

  1. 将深色模式Logo添加到assets/images/logo-dark-mode.png

  2. 编辑partials/layout/header.hbs文件，取消注释深色模式Logo行：

    <img src="{{img_url @site.logo size="m"}}" class="header-logo-img max-h-9 logo-default" alt="{{@site.title}}" width="115" height="30"/> {{!-- <img src="{{asset "images/logo-dark-mode.png"}}" class="header-logo-img max-h-9 hidden logo-dark-mode" alt="" width="115" height="30"/> --}}

  3. 在Dashboard -> Code injection -> Site Header添加样式：

    <style> .is-head-transparent .logo-default, .dark .logo-default { display: none !important } .is-head-transparent:not(.has-menu) .logo-dark-mode, .dark .logo-dark-mode { display: block } </style>

高级定制：打造独特博客体验

选择主页布局

Simply主题提供了多种主页布局选项，让你可以根据内容特点选择最适合的展示方式：

  1. Featured：展示最新的特色文章，占据整个屏幕长度
  2. Featured slider：展示最新的3篇特色文章，以轮播形式呈现
  3. Publication cover：以出版物封面形式展示博客

Publication Cover布局为博客提供了简洁而专业的外观

自定义颜色方案

Simply主题默认会跟随浏览器主题，但你也可以手动设置默认模式：

  1. 打开src/css/abstracts/variables.css文件
  2. 修改--color-mode变量的值为light或dark

配置评论系统

Simply主题支持多种评论系统，包括Disqus、Facebook Comments和Hyvor Talk。以Disqus为例：

  1. 注册Disqus账号并获取disqusShortName
  2. 编辑partials/article/article-comments.hbs文件
  3. 替换文件内容为以下代码，并将HERE_YOUR_DISQUS_SHORT_NAME替换为你的Disqus短名称：
<div id="post-comments" class="post-comments bg-gray-150 pt-8 pb-8"> <div class="mx-auto px-4 max-w-5xl"> {{!-- Disqus Comments --}} <div id="disqus_thread"></div> </div> </div> {{#contentFor "scripts"}} <script> (function(d, s, id) { var disqus_config = function () { this.page.url = '{{url absolute="true"}}'; this.page.identifier = 'ghost-{{comment_id}}'; }; function loadDisqus() { var currentScroll = d.scrollingElement.scrollTop; var disqusTarget = d.getElementById('disqus_thread'); if (d.getElementById(id)) return; if( disqusTarget && (currentScroll > disqusTarget.getBoundingClientRect().top - 150) ) { var js = d.createElement(s); js.id = id; js.src = 'https://HERE_YOUR_DISQUS_SHORT_NAME.disqus.com/embed.js'; js.async = true; js.defer = true; js.setAttribute('data-timestamp', +new Date()); d.body.appendChild(js); window.removeEventListener('scroll', loadDisqus); } } window.addEventListener('scroll', loadDisqus); document.querySelector('.js-dark-mode').addEventListener('click', function() { if (window.DISQUS) { DISQUS.reset({ reload: true, config: disqus_config }); } }); }(document, 'script', 'disqus-js')); </script> {{/contentFor}}

优化与扩展：提升博客功能

配置分页

Simply主题默认使用无限滚动分页，但你也可以改为数字分页：

  1. 打开partials/pagination.hbs文件
  2. 注释掉无限滚动相关代码
  3. 取消注释数字分页代码

Simply主题提供多种分页样式选择

设置字体

你可以选择博客文章使用无衬线字体(sans)或衬线字体(serif)：

  1. 打开src/css/base/typography.css文件
  2. 修改body的font-family属性为font-sans或font-serif

选择适合你博客风格的字体可以提升阅读体验

配置新闻通讯

Simply主题在文章底部提供了新闻通讯订阅表单：

  1. 打开partials/components/newsletter.hbs文件
  2. 修改表单文本和样式
  3. 配置邮件服务提供商信息

新闻通讯功能帮助你与读者保持联系

总结：开启你的博客之旅

通过本教程，你已经了解了如何使用Simply主题搭建和定制一个专业的Ghost博客。从环境准备到主题部署，再到个性化配置，Simply主题提供了丰富的选项让你打造独特的博客体验。

记住，博客的成功不仅仅在于外观，更在于内容。利用Simply主题提供的优雅设计，专注于创作有价值的内容，你的个人品牌一定会脱颖而出！

现在，是时候开始你的博客之旅了。祝你创作愉快！

【免费下载链接】simplyTheme for Ghost inspired on Medium项目地址: https://gitcode.com/gh_mirrors/si/simply

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/28 23:28:09

TPIC7710EVM评估板深度解析：从硬件拆解到软件实操的电机控制实战指南

1. 项目概述与核心价值在嵌入式电机控制系统的开发初期&#xff0c;最头疼的往往不是算法本身&#xff0c;而是如何快速、稳定地搭建一个能够验证芯片功能的硬件环境。自己画板、打样、焊接、调试&#xff0c;一套流程走下来&#xff0c;少则一两周&#xff0c;多则一个月&…

作者头像 李华
网站建设 2026/7/28 23:27:22

Linux之文件--缓冲区和c封装

缓冲区在哪里read&#xff1a;操作系统把内核缓冲区的数据&#xff0c;拷贝到你传入的用户内存buf&#xff1b; 如果内核缓冲区没有需要的数据 → OS 发起硬件请求&#xff0c;从磁盘加载数据进入内核缓冲区&#xff0c;再拷贝给应用。write&#xff1a;把应用buf的数据&#x…

作者头像 李华
网站建设 2026/7/28 23:25:53

Unity材质引用丢失的自动化修复方案与最佳实践

1. 问题现象与根源剖析如果你在Unity开发中经常从Asset Store下载资源&#xff0c;那么大概率遇到过这个让人头疼的问题&#xff1a;兴致勃勃地导入一个精美的模型包、一套炫酷的粒子特效&#xff0c;或者一个完整的场景示例&#xff0c;结果在项目视图中一看&#xff0c;所有材…

作者头像 李华
网站建设 2026/7/28 23:21:19

本地AI编程助手搭建指南：基于DeepSeek API的轻量化开发环境部署

这次我们来看一个本地 AI 开发环境搭建项目&#xff1a;Codex。如果你正在寻找一个能替代 ChatGPT 订阅、又能方便接入国产大模型&#xff08;比如 DeepSeek&#xff09;的本地化方案&#xff0c;这篇文章就是为你准备的。Codex 的核心价值在于&#xff0c;它提供了一个集成的开…

作者头像 李华
网站建设 2026/7/28 23:18:46

C/C++二叉树遍历全解析：递归与迭代实现及工程实践指南

1. 项目概述&#xff1a;为什么二叉树遍历是C/C程序员的必修课&#xff1f; 如果你正在学习C或C&#xff0c;并且已经接触到了“数据结构与算法”这个领域&#xff0c;那么“二叉树的遍历”绝对是一个绕不开的核心关卡。这不仅仅是教科书上的一个章节&#xff0c;更是你理解递归…

作者头像 李华
网站建设 2026/7/28 23:18:39

终极指南：5分钟学会使用XCOM 2替代模组启动器AML

终极指南&#xff1a;5分钟学会使用XCOM 2替代模组启动器AML 【免费下载链接】xcom2-launcher The Alternative Mod Launcher (AML) is a replacement for the default game launchers from XCOM 2 and XCOM Chimera Squad. 项目地址: https://gitcode.com/gh_mirrors/xc/xco…

作者头像 李华