zvaljean / simple-tailwind-docs

hugo tailwind theme

simple-tailwind-docs

postcss 的使用

assets/css/theme.css 经过hugo 编译后，放在public中的css里， resources 中有对应的缓存文件 hugo -> postcss -> tailwind

nodejs

hugo 其实借助nodejs 来执行postcss, 所以可以使用其定义的相关变量比如 __dirname

相关主题

• mac phoenix
• https://docs.npmjs.com/cli/v7/configuring-npm/npmrc
• https://www.npmjs.com/package/sidebar-js
• docusaurus
• purgecss docs
• css layout
• Spread_syntax & three dots
• require function in js
• tailwindcss
• web frontend pink tutor
• hugo docs
• https://gohugo.io/news/0.75.0-relnotes/
• https://www.wangchucheng.com/zh/docs/hugo-eureka/getting-started/
• https://flowbite.com/docs/components/pagination/
• https://prettier.io/docs/en/options.html#bracket-line
• https://tree.nathanfriend.io/

tailwind play

• https://play.tailwindcss.com/

add toc

• https://dev.to/robole/add-a-table-of-contents-toc-to-your-blog-posts-99p

go-org

• https://niklasfasching.github.io/go-org/#footnote-1

theme

• https://bwaycer.github.io/hugo_tutorial.hugo/extras/menus/
• https://github.com/hugoinaction/hugoinaction
• https://hugocodex.org/blog/creating-a-menu-with-nested-pages/
• https://az.id.au/dev/hugo-recursive-templates/
• https://syntax.tailwindui.com/docs/how-to-contribute
• https://getdoks.org/docs/tutorial/start-new-project/#starter-theme
• https://jamstackthemes.dev/theme/#ssg=hugo&css=tailwind&archetype=blog
• https://github.com/alex-shpak/hugo-book.git
• https://github.com/wangchucheng/hugo-eureka.git
• https://github.com/thegeeklab/hugo-geekdoc
• https://github.com/dirkolbrich/hugo-tailwindcss-starter-theme.git

issue

开发时css加载问题

新添加的css属性值时，需要postcss处理后，才能使用，所以会出现修改后，但是效果 会改变的情况。特别时再引用第三方库时，会更加明显。故在主题开发阶段可使用如下命令

#由tailwind来监控css文件的变化，这样可以缓解该问题
tailwindcss -c ./assets/css/tailwind.config.js -i ./assets/css/theme.css  -o ./static/css/dist/theme-dev.css --watch

hugo 启动主题自带的示例网站命令

hugo server -s exampleSite --themesDir ../.. -E --disableFastRender --ignoreCache --noHTTPCache --forceSyncStatic