# Themes of IG ## Structure ```css my-instagram-theme/ ├── layouts/ │ ├── index/ │ │ └── index.html │ ├── post/ │ │ └── single.html │ ├── partials/ │ │ ├── header.html │ │ ├── footer.html │ │ ├── menu.html │ │ └── pagination.html │ ├── category/ │ │ └── list.html │ └── tag/ │ └── list.html ├── static/ ├── theme.toml └── README.md ``` #### index.html ```html=0 {{ define "main" }} <div class="container"> <div class="row"> {{ range .Site.RegularPages }} <div class="col-md-4"> <a href="{{ .Permalink }}"> <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="img-fluid"> <h2>{{ .Title }}</h2> </a> </div> {{ end }} </div> </div> {{ end }} ``` #### single.html ```html=0 {{ define "main" }} <article> <header> <h1>{{ .Title }}</h1> <p class="meta"> <span class="date">{{ .Date.Format "January 02, 2006" }}</span> {{ with .Params.author }} <span class="author">{{ . }}</span> {{ end }} </p> </header> {{ if .Params.featured_image }} <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="img-fluid"> {{ end }} <div class="content"> {{ .Content }} </div> </article> {{ end }} ``` #### header.html ```html=0 <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Taxonomies.categories }} <li class="nav-item"> <a class="nav-link" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> </li> {{ end }} </ul> </div> </nav> </header> ``` #### footer.html ```html=0 <footer> <div class="container"> <div class="row"> <div class="col-md-6"> <p>{{ .Site.Title }}</p> <p>{{ .Site.Description }}</p> </div> <div class="col-md-6"> <ul class="social-media"> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-facebook"></i></a></li> </ul> </div> </div> </div> </footer> ``` #### menu.html ```html=0 {{ if .Site.Menus.main }} <nav> <ul> {{ range .Site.Menus.main }} <li><a href="{{ .URL }}" {{ if eq .URL $.Page.URL }}class="active"{{ end }}>{{ .Name }}</a></li> {{ end }} </ul> </nav> {{ end }} ``` #### pagination.html ```html=0 <nav> <ul class="pagination"> {{ if .Paginator.HasPrev }} <li class="page-item"> <a class="page-link" href="{{ .Paginator.Prev.URL }}" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> </li> {{ end }} {{ range .Paginator.Pages }} {{ if .IsPage }} {{ if eq .Paginator.PageNumber .PageNumber }} <li class="page-item active"><span class="page-link">{{ .PageNumber }}</span></li> {{ else }} <li class="page-item"><a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a></li> {{ end }} {{ else }} <li class="page-item disabled"><span class="page-link">{{ .Title }}</span></li> {{ end }} {{ end }} {{ if .Paginator.HasNext }} <li class="page-item"> <a class="page-link" href="{{ .Paginator.Next.URL }}" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> </li> {{ end }} </ul> </nav> ``` #### list.html of categories ```html=0 {{ define "main" }} <div class="container"> <h1>{{ .Title }}</h1> {{ range .Data.Pages }} <div class="row"> <div class="col-md-6"> <a href="{{ .RelPermalink }}"><img src="{{ .Params.image }}" alt="{{ .Title }}"></a> </div> <div class="col-md-6"> <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2> <p>{{ .Summary }}</p> </div> </div> <hr> {{ end }} {{ partial "pagination.html" . }} </div> {{ end }} ``` #### list.html of tags ```html=0 {{ define "main" }} <div class="container"> <h1>{{ .Title }}</h1> {{ range .Data.Pages }} <div class="row"> <div class="col-md-6"> <a href="{{ .RelPermalink }}"><img src="{{ .Params.image }}" alt="{{ .Title }}"></a> </div> <div class="col-md-6"> <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2> <p>{{ .Summary }}</p> </div> </div> <hr> {{ end }} {{ partial "pagination.html" . }} </div> {{ end }} ``` #### theme.toml ```toml=0 name = "Instagram" license = "MIT" description = "An Instagram-inspired Hugo theme" homepage = "https://github.com/yourusername/hugo-instagram-theme" tags = ["instagram", "photo", "gallery"] [author] name = "Your Name" homepage = "https://github.com/yourusername" # Define the necessary template files [outputs] home = ["HTML", "RSS", "JSON"] page = ["HTML"] section = ["HTML"] taxonomy = ["HTML"] # Define the required Hugo version [min] version = "0.79.0" # Set the Hugo module configuration [module] # This theme requires Hugo 0.79.0 or higher min_version = "0.79.0" [[module.imports]] path = "github.com/yourusername/hugo-instagram-theme/layouts/partials" ``` #### config.toml ```toml=0 baseURL = "/" languageCode = "en-us" title = "My Instagram-Inspired Hugo Site" # Set the theme to the Instagram-inspired theme theme = "instagram" # Set the default content type for new pages defaultContentLanguage = "en" # Enable pretty URLs (no ".html" extensions) uglyURLs = false # Enable Hugo's built-in taxonomy support [taxonomies] tag = "tags" category = "categories" # Set the date format for your site dateFormat = "January 2, 2006" # Set the pagination settings for list pages paginate = 10 paginatePath = "page" # Set custom parameters for the Instagram theme [params] accentColor = "#c13584" # Customize the accent color of the theme ``` #### readme.md # Instagram-Inspired Hugo Theme This is a Hugo theme based on the design of Instagram, with a focus on showcasing visual content in a clean and modern way. ## Features - Responsive design that looks great on desktop and mobile devices - Customizable color scheme - Support for displaying images in a grid layout - Pagination for long lists of content - Integration with Hugo's built-in taxonomies (categories and tags) - Social media sharing buttons for individual pages ## Installation To use this theme in your Hugo site, you can add it as a submodule to your site's `themes` directory: ```shell $ cd /your/hugo/site $ git submodule add https://github.com/yourusername/instagram-hugo-theme.git themes/instagram ``` Then, in your site's `config.toml` file, set the `theme` parameter to `instagram`: ```makefile theme = "instagram" ``` ## Configuration This theme comes with a few customizable parameters that you can set in your site's `config.toml` file: ```toml [params] accentColor = "#ff8c00" # Change this to customize the accent color of the theme ``` ## Usage To use this theme to display your content, you can create pages and posts as usual in Hugo. The theme includes templates for the following page types: - `index.html`: the homepage of your site - `single.html`: a single content page, such as a blog post or photo page - `list.html`: a list of pages within a certain taxonomy, such as categories or tags The theme also includes several partial templates that you can use to customize the look and feel of your site, including: - `header.html`: the top navigation bar of your site - `footer.html`: the bottom footer section of your site - `menu.html`: a side menu that can be toggled open and closed on smaller screens - `pagination.html`: pagination links for long lists of content ## Credits This theme was created by Your Name. Special thanks to the following projects and resources for inspiration and support: - [Bootstrap](https://getbootstrap.com/) - [Font Awesome](https://fontawesome.com/) - [Hugo](https://gohugo.io/) - [Unsplash](https://unsplash.com/) (for the sample images used in this README) ## License This theme is released under the MIT License. See the `LICENSE` file for more information.