Pretty Statamic Theme URLs
Some people dislike ugly URLs. I am one of those people. If you are too, this article is for you.
Problem
In Statamic, generally speaking, you place your theme files in:
/_themes/my_theme/
Which makes your asset URLs (images, js, etc) look like:
http://mysite.com/_themes/my_theme/css/my_theme.css
We want them like this:
http://mysite.com/assets/css/my_theme.css
Previously you could use the asset pipeline, and just hard code /assets/my_theme.css
. Statamic would see if there was a corresponding file in your actual theme folder, and serve it through that URL. They’ve since deprecated this because of the performance overhead.
Solution
To continue to use the asset URLs, follow these steps:
- Move the contents of
/_themes/my_theme/
folder to/assets/
In
_config/settings.yaml
, update the following:_theme: assets _themes_path:
(Yes,
_themes_path
is meant to be blank)Now you can use
{{ theme:partial src="theme.css" }}
and it will output as/assets/css/mytheme.css
.
Bonus tip
You can simplify your template code even further by making better use of the theme
tag.
Instead of typing out
<link rel="stylesheet" href="{{ theme:css src='my_theme' }}" />
Just do this:
{{ theme:css src="my_theme" tag="yes" }}
# Outputs: <link rel="stylesheet" href="/assets/css/my_theme.css" />
The tag="yes"
parameter works for CSS (link
), JS (script
) and image (img
) types.
Comments
blog comments powered by Disqus