diff --git a/README.md b/README.md index 19bef5e4..95cfb0fa 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,9 @@ A responsive, clean and simple [Hexo](http://hexo.io) theme for a personal websi - Projects list - I18n support - Disqus / Utterances -- Google analytics / Baidu Tongji / [Umami Analytics](https://umami.is) +- Google analytics / Baidu Tongji / [Umami Analytics](https://umami.is) +- Web-App manifests +- Custom style injection - Font Awesome icons - Simplicity @@ -64,23 +66,23 @@ A responsive, clean and simple [Hexo](http://hexo.io) theme for a personal websi # theme: landscape theme: cactus ``` - + See below for more information on how to customize this theme. 3. Create pages and articles with the `hexo new [layout] ` command. For example, to create an "about me" page, run: - + ```sh $ hexo new page about ``` - + This will create a new file in `source/about/index.md` Similarly, you can create a new article with - + ```sh $ hexo new post "hello world" ``` - + and add some interesting content in `source/_posts/hello-world.md`. 4. Run: `hexo generate` and `hexo server` @@ -258,7 +260,7 @@ Set the `rss` field in the `_config.yml` to one of the following values: ### Analytics -Add you Google, Baidu, Cloudflare or Umami Analytics `tracking_id` to the `_config.yml`. +Add your Google, Baidu, Cloudflare or Umami Analytics `tracking_id` to the `_config.yml`. ```yml google_analytics: @@ -280,6 +282,55 @@ umami_analytics: script_name: umami.js ``` +### Web-App Manifests + +Cactus supports [Web-App Manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest). Add an entry like this to the `_config.yml`: + +```yml +manifest: + url: /manifest.json +``` + +This will tell Cactus to insert a manifest link into generated HTML files. + +```html +<link rel="manifest" href="/meta/manifest.json"> +``` + +Example of a simple `manifest.json` file: + +```json +{ + "name": "MyApp", + "short_name": "MyApp", + "theme_color": "#323232", + "background_color":"#323232", + "display":"standalone", + "icons": [ + { + "src": "/images/my-app-icon-128x128.png", + "sizes": "128x128", + "type":"image/png" + } + ] +} +``` + +### Custom Style Injection + +Want to overwrite Cactus' styles with your own? No problem. Put a `global.styl` ([Stylus](https://stylus-lang.com/)) or `global.css` (normal CSS) file at `source/css/global.styl` or `source/css/global.css` and tell Cactus where to find it. + +```yaml +styles: + - url: /css/global +``` + +Hexo will compile Stylus files as needed and Cactus will include a link to the style sheet in all generated HTML files. + +```html +<link rel="stylesheet" href="/css/global.css"> +``` + ### CDN Load Javascript and CSS resources from a CDN. Enabled by default, loads all resources from [cdnjs](https://cdnjs.com/). @@ -362,7 +413,7 @@ date: 2017-12-24 23:29:53 tags: - Foo - Bar -categories: +categories: - Baz --- @@ -384,7 +435,7 @@ Similarly, you can create a page with an overview of all categories by running: $ hexo new page categories ``` -and adding `type: categories` to the front-matter of `source/categories/index.md`. +and adding `type: categories` to the front-matter of `source/categories/index.md`. Finally, don't forget to create a link to these pages, for example in the navigation menu: diff --git a/_config.yml b/_config.yml index 6cf87edc..dd5de34b 100644 --- a/_config.yml +++ b/_config.yml @@ -24,7 +24,7 @@ nav: # The 'icon' keys should correspond to Fontawesome icon names # (see https://fontawesome.com/icons?d=gallery&s=brands); # only 'mail' is an exception. -# You can optionally add a 'label' key to set the title attribute on the link. +# You can optionally add a 'label' key to set the title attribute on the link. # 'icon' value will be used as title when 'label' is missing. social_links: - @@ -131,6 +131,17 @@ favicon: url: /images/apple-touch-icon.png gravatar: false +# Inserts a <link> to a web-app manifest file. +# +# manifest: +# url: /manifest.json + +# Add custom CSS styles to every page. +# This will try to compile an Stylus file at /css/global.styl +# or a normal CSS sheet at /css/global.css +# styles: +# - url: /css/global + # The color scheme that should be used to highlight codeblocks. # See source/css/_highlight for a list of all available color schemes. # highlight: rainbow diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index 91806da5..b6ebf5dd 100644 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -12,6 +12,12 @@ google_plus: theme.open_graph.google_plus, }) %> <%- meta(page) %> + + <% if (theme.manifest) { %> + <% if (theme.manifest.url) { %> + <link rel="manifest" href="<%= url_for(theme.manifest.url) %>"> + <% } %> + <% } %> <% if (theme.favicon) { %> <% if (theme.favicon.desktop) { %> <% if (theme.gravatar && (theme.gravatar.email || theme.gravatar.hash) && theme.favicon.desktop.gravatar) { %> @@ -54,6 +60,11 @@ <%- partial('./umami_analytics.ejs') %> <!-- styles --> <%- css('css/style') %> + <% if (theme.styles) { %> + <% for (var i in theme.styles) { %> + <%- css(theme.styles[i].url) %> + <% } %> + <% } %> <!-- persian styles --> <% if (theme.direction && theme.direction === 'rtl') { %> <%- css('css/rtl') %>