我的第一篇Blot博客
【免费下载链接】BlotTurns a folder into a website项目地址: https://gitcode.com/gh_mirrors/bl/Blot
这是使用Blot创建的第一篇文章!🎉
Blot让静态博客变得如此简单,只需编辑Markdown文件,就能自动生成精美的网页。
### 3. 本地预览博客 启动Blot开发服务器: ```bash npm start打开浏览器访问http://localhost:4000,你将看到刚刚创建的博客文章已经自动发布到网站上了。
Blot自动将Markdown文件转换为美观的网页
自定义你的博客外观
选择内置主题
Blot提供多种内置主题模板,存放在app/templates/source/目录下。你可以通过修改配置文件切换主题:
- 打开
config.js文件 - 找到
template配置项 - 设置为你喜欢的主题名称,如:
module.exports = { // 其他配置... template: 'minimal' // 使用极简主题 };自定义CSS样式
如果内置主题不能满足需求,你可以在template/目录下创建style.css文件,添加自定义样式:
/* 自定义博客标题样式 */ .blog-title { color: #2c3e50; font-family: 'Georgia', serif; text-align: center; margin: 2rem 0; } /* 自定义文章内容样式 */ .entry-content { line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 0 1rem; }发布你的博客
本地文件发布
最简单的发布方式是直接使用本地文件系统:
- 将你的博客内容整理到指定文件夹
- 在Blot配置中设置该文件夹路径
- Blot会自动监控文件变化并更新网站
云端同步发布
Blot支持多种云端存储服务,让你可以在任何设备上管理博客:
- Dropbox同步:配置方法见
app/clients/dropbox/目录下的说明文档 - Git同步:通过Git仓库实现版本控制和多设备同步
- Google Drive同步:支持Google Drive文件夹自动同步
高级功能探索
文章标签与分类
通过在文章开头添加元数据,可以实现文章分类和标签功能:
--- title: "Blot高级使用技巧" date: "2023-11-15" tags: ["Blot", "静态博客", "教程"] --- # Blot高级使用技巧 ...自定义路由
Blot允许你通过修改app/blog/routes.js文件来自定义网站路由,实现更灵活的页面结构。
插件扩展
Blot支持通过插件扩展功能,你可以在app/plugins/目录下找到现有插件或开发自己的插件。
常见问题解决
图片不显示怎么办?
确保图片路径正确,建议将图片放在entries/images/目录下,并使用相对路径引用:
示例图片如何设置自定义域名?
编辑config.js文件,添加域名配置:
module.exports = { // 其他配置... domain: 'yourblog.com' };【免费下载链接】BlotTurns a folder into a website项目地址: https://gitcode.com/gh_mirrors/bl/Blot
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考