heimfisch / blogtheme
一个基于Bootstrap的简单博客主题。查看演示页面和所有可用模板 https://dev.heinisch-design.de/demo/blogtheme。
Requires
- automad/package-installer: ^1.1 || dev-master
README
注意
本主题正在开发中
Automad的BlogTheme
这是一个基于Bootstrap的简单主题,包含3种布局和可选侧边栏。此主题具有浅色和深色模式。
包含的模板
本软件包包含以下简化模板,仅供演示用途
page.php
模板表示一个带有导航栏、内容区域和菜单侧边栏的基本页面。post.php
模板包含一个可过滤和可排序的页列表,可以用作博客或组合的框架。blog.php
模板展示了会话变量和set
函数的使用。
还包括一个带有一些选项的导航栏
☝️ 在进行试验时,只需将这些模板应用于您的安装中的任何页面即可看到它们的效果!
浅色/深色模式
此模板检测操作系统首选的浅色或深色模式并使用它。
<script>
(function () {
const htmlElement = document.querySelector("html")
if(htmlElement.getAttribute("data-bs-theme") === 'auto') {
function updateTheme() {
document.querySelector("html").setAttribute("data-bs-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
updateTheme()
}
})();
</script>
您可以在设置中禁用此功能。
本地软件包
-
在Automad软件包目录之外开始开发新的软件包是一种好习惯。因此,将目录更改为Automad之外您想要开发新主题的目录。假设您想将软件包放入主目录中的
dev
目录。cd ~/dev
-
使用Composer在
dev
目录中创建新的骨架主题。composer create-project automad/theme-skeleton my-theme
-
切换到新主题目录,并编辑
composer.json
和theme.json
文件。这里使用VS Code作为编辑器。至少更改供应商和主题名称。cd my-theme code composer.json
还编辑了
theme.json
中的名称。code theme.json
-
现在切换到Automad的根目录。例如
~/Sites/automad-site
。cd ~/Sites/automad-site
-
编辑Automad安装的
composer.json
文件。code composer.json
将以下片段添加到Automad的composer文件中(注意软件包的路径)。
{ ... "repositories": [ { "type": "path", "url": "~/dev/my-theme" } ], ... }
-
仍然在Automad目录中,运行以下Composer命令。
composer require my-vendor/my-theme:@dev
现在,您的主题在Automad中可用,您可以开始开发模板。在所有设置完成后,现在是时候为您的主题创建一个仓库了。
创建Git仓库
开发完成后,是时候发布您的作品了。
-
初始化新的Git仓库并提交文件。
cd ~/dev/my-theme git init git add . git commit -m "First commit"
-
为您的完成的主题创建一个遵循语义版本控制方案的第一个版本标签。
git tag -a 1.0.0 -m "my version 1.0.0"
-
在GitHub上创建一个新的仓库。
-
现在,将其URL添加为本地仓库的远程,并推送更改。在创建仓库时,URL将在GitHub页面上打印出来。
git remote add origin /remote/URL/of/your/new/repo git push -u origin master
注册您的软件包
现在是时候将您的主题软件包提交到Packagist了。在成功注册后,它将自动显示在软件包浏览器中。
速查表
如果您希望在未阅读完整文档的情况下开始开发主题或扩展,可以从速查表开始。