当前位置：首页 > news >正文

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

news 2026/7/28 23:31:30

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

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

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

准备工作：搭建基础环境

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

安装Node.js和npm：Simply主题需要Node.js环境来运行构建工具。你可以从Node.js官网下载并安装适合你操作系统的版本。
安装Ghost CLI：Ghost CLI是Ghost博客的命令行工具，使用以下命令安装：
```
npm install -g ghost-cli
```
创建Ghost博客：使用Ghost CLI创建一个新的Ghost博客实例：
```
ghost install local
```

获取Simply主题

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

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

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

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

安装与部署主题

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

进入主题目录：
```
cd simply
```
安装依赖：
```
npm install
```
构建主题：
```
npm run build
```
部署主题：
```
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：

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

编辑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"/> --}}

在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主题提供了多种主页布局选项，让你可以根据内容特点选择最适合的展示方式：

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

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

自定义颜色方案

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

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

配置评论系统

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

注册Disqus账号并获取disqusShortName
编辑partials/article/article-comments.hbs文件
替换文件内容为以下代码，并将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}}