You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

166 lines
3.8 KiB

  1. # Hyde
  2. Hyde is a brazen two-column [hugo](https://gohugo.io) theme based on the [Jekyll](http://jekyllrb.com) theme of the same name.
  3. It pairs a prominent sidebar with uncomplicated content.
  4. ![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png)
  5. ## Contents
  6. - [Installation](#installation)
  7. - [Options](#options)
  8. - [Sidebar menu](#sidebar-menu)
  9. - [Sticky sidebar content](#sticky-sidebar-content)
  10. - [Themes](#themes)
  11. - [Reverse layout](#reverse-layout)
  12. - [Disqus](#disqus)
  13. - [Google Analytics](#google-analytics)
  14. - [Author](#author)
  15. - [Ported by](#ported-by)
  16. - [License](#license)
  17. ## Installation
  18. To install Hyde as your default theme, first install this repository in the `themes/` directory:
  19. $ cd themes/
  20. $ git clone https://github.com/spf13/hyde.git
  21. Second, specify `hyde` as your default theme in the `config.toml` file. Just add the line
  22. theme = "hyde"
  23. at the top of the file.
  24. ## Options
  25. Hyde includes some customizable options, typically applied via classes on the `<body>` element.
  26. ### Sidebar menu
  27. Create a list of nav links in the sidebar by assigning "menu=main" in the front matter.
  28. ### Sticky sidebar content
  29. By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disabled this by removing the `.sidebar-sticky` class from the sidebar's `.container`. Sidebar content will then normally flow from top to bottom.
  30. ```html
  31. <!-- Default sidebar -->
  32. <div class="sidebar">
  33. <div class="container sidebar-sticky">
  34. ...
  35. </div>
  36. </div>
  37. <!-- Modified sidebar -->
  38. <div class="sidebar">
  39. <div class="container">
  40. ...
  41. </div>
  42. </div>
  43. ```
  44. ### Themes
  45. Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).
  46. ![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png)
  47. There are eight themes available at this time.
  48. ![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)
  49. To use a theme, add the `themeColor` variable under `params`, like so:
  50. **TOML**
  51. ```toml
  52. theme = "hyde"
  53. [params]
  54. themeColor = "theme-base-09"
  55. ```
  56. **YAML**
  57. ```yaml
  58. theme: "hyde"
  59. params:
  60. themeColor: "theme-base-09"
  61. ```
  62. To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
  63. ### Reverse layout
  64. ![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png)
  65. To reverse page orientation, add the `layoutReverse` variable under `params`, like so:
  66. **TOML**
  67. ```toml
  68. theme = "hyde"
  69. [params]
  70. layoutReverse = true
  71. ```
  72. **YAML**
  73. ```yaml
  74. theme: "hyde"
  75. params:
  76. layoutReverse: true
  77. ```
  78. ### Disqus
  79. You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable `disqusShortname` to your config file.
  80. **TOML**
  81. ```toml
  82. disqusShortname = "spf13"
  83. ```
  84. **YAML**
  85. ```yaml
  86. disqusShortname : spf13
  87. ```
  88. > **Note:** Previous version 1.0 the Disqus shortname had to be defined inside the `[params]` block.
  89. ## Google Analytics
  90. Google Analytics can be enabled by assigning your tracking code to the `googleAnalytics` variable in the config file:
  91. **TOML**
  92. ```toml
  93. googleAnalytics = "Your tracking code"
  94. ```
  95. **YAML**
  96. ```yaml
  97. googleAnalytics: Your tracking code
  98. ```
  99. ## Author
  100. **Mark Otto**
  101. - <https://github.com/mdo>
  102. - <https://twitter.com/mdo>
  103. ## Ported By
  104. **Steve Francia**
  105. - <https://github.com/spf13>
  106. - <https://twitter.com/spf13>
  107. ## License
  108. Open sourced under the [MIT license](LICENSE.md).
  109. <3