Git Product home page Git Product logo

vanilla-bootstrap-hugo-theme's Introduction

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

WARNING: This repo is no longer maintained. It's archived and read-only.

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

Vanilla Bootstrap

Netlify Status

A vanilla Bootstrap theme for Hugo.

Table of Contents

Demo

https://vanilla-bootstrap-hugo-theme.netlify.com/

Minimum Hugo version

Hugo version 0.81.0 or higher is required. View the Hugo releases and download the binary for your OS.

Installation

From the root of your site:

git submodule add https://github.com/zwbetz-gh/vanilla-bootstrap-hugo-theme.git themes/vanilla-bootstrap-hugo-theme

Updating

From the root of your site:

git submodule update --remote --merge

Run example site

From the root of themes/vanilla-bootstrap-hugo-theme/exampleSite:

hugo server --themesDir ../..

Configuration

Copy config.yaml from the exampleSite, then edit as desired.

Homepage content

By default, the homepage uses the config file's homeText param for content.

If you wish to provide content from a file, then create content/_index.md and it will be used instead. For example:

---
title: Home
---

Homepage content goes here.

Shortcodes

bootstrap-blockquote

Uses Bootstrap blockquotes to format your blockquotes nicely. Pass the quote inside the shortcode. The author argument is optional.

Here's an actual usage, and here's an example usage:

{{< bootstrap-blockquote author="Carl Jung" >}}
Knowing your own darkness is the best method for dealing with the darknesses of other people.
{{< /bootstrap-blockquote >}}

bootstrap-table

Uses Bootstrap tables to format your tables nicely. Pass the markdown table inside the shortcode, then pass the classes as an argument.

Here's an actual usage, and here's an example usage:

{{< bootstrap-table "table table-dark table-striped table-bordered" >}}
| Animal  | Sounds |
|---------|--------|
| Cat     | Meow   |
| Dog     | Woof   |
| Cricket | Chirp  |
{{< /bootstrap-table >}}

bootstrap-card

Uses Bootstrap cards and Hugo image processing to display your page bundle images nicely. Only the img, command, and options arguments are required.

Here's an actual usage, and here's an example usage:

{{< bootstrap-card
img="sun.jpg"
command="Resize"
options="700x"
title="The Sun"
text="The Sun is the star at the center of the Solar System."
alt="sun"
class="mb-3"
style="" >}}

Getting help

If you run into an issue that isn't answered by this documentation or the exampleSite, then visit the Hugo forum. The folks there are helpful and friendly. Before asking your question, be sure to read the requesting help guidelines.

Credits

In addition to Bootstrap and Hugo, thank you to:

vanilla-bootstrap-hugo-theme's People

Contributors

apreshill avatar danmaas avatar fgr avatar zwbetz-gh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vanilla-bootstrap-hugo-theme's Issues

How to customized CSS?

  {{ range .Site.Params.customCSS }}
  <link rel="stylesheet" href="{{ "/css/" | relURL }}{{ . }}">
  {{ end }}

has been added to head.html; it should work. However, if I overwrite .btn in custom.css,

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px dashed transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

The only change is from "solid" to "dashed" in "border", it does not show the correct style.
image
I had expected it to be:
image

So my question is, what is the proper way of customizing CSS? Thanks in advance.

some menu items will not highlight

Describe the bug
Hi there, I'm making a basic site with this theme (thank you). I'm having an issue where three of my menu items will not highlight when active (submit abstract, registration, and program). I'm not very sure why this is only happening for those three menu items, any ideas?

Here is my site: https://ahsn-conference-2021.netlify.com/

Here is my yaml menu:

menu:
  nav:
  - name: Welcome
    pre: home
    url: /
    weight: 1
  - name: Venue and Travel
    pre: map
    url: /venue/
    weight: 2
  - name: Keynote Speakers
    pre: message-circle 
    url: /keynotes/
    weight: 3
  - name: Submit Abstract
    pre: clipboard
    url: /abstract-submission/
    weight: 4
  - name: Registration
    pre: user-plus
    url: /registration/
    weight: 5
  - name: Program
    pre: book-open
    url: /program/
    weight: 6
  - name: Contact
    pre: help-circle
    url: /contact/
    weight: 7

github site rendered incorrectly

Describe the bug
github site rendered incorrectly. (it was perfect on http://localhost:1313)

This is the output on github page
Screen Shot 2019-08-17 at 11 08 50 PM

To Reproduce
Steps to reproduce the behavior:

  1. git clone repo under ./themes
  2. hugo server --theme=vanilla --buildDrafts --watch
  3. hugo --theme=<themename> --buildDrafts --baseUrl="http://<username>.github.io"
  4. push to the github master

Screenshots
see attached

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]

Smartphone (please complete the following information):

  • MAC version: mac high sierra 10.13.6 (17G65)
  • Hugo: Hugo Static Site Generator v0.57.2/extended darwin/amd64

thanks!

Image path

I put images under static/icon/my_image.png). I do

![Example image](/icon/my_image.png)

I can see it on local, but when I deploy it on github. it won't show.

Relative URls all the way to subpages

Describe the bug

Hi there! I'm really liking your simple theme and I want to upgrade my page to use it, so thank you in the first place for creating it :)

I'm having trouble at getting relativeURLs to work correctly and I believe that it can be considered a bug. I know that other themes handle it fairly well and it has been one of the main reasons why I recommend Hugo to people, because it can automatically handle pages being loaded at a domain root (e.g. normal website.com) or a path (using IPFS ipfs.io/ipfs/webPageHash)

To Reproduce
Steps to reproduce the behavior:

You can get the code at https://github.com/daviddias/daviddias.me/tree/go-vanilla and run ./publish.sh yourself or you can visit https://ipfs.io/ipfs/QmVMKKSioSmR1EhrTw1ZLcoFmPLpng6eWFYpUZhpJAthJx/blog/ to see how the page gets wonky.

It seems that https://github.com/zwbetz-gh/vanilla-bootstrap-hugo-theme/blob/master/layouts/partials/script.html#L1 never gets "relative'zed"

Expected behavior
A clear and concise description of what you expected to happen.

The Webpage to load regularly

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Mac OS X
  • Browser Firefox Quantum
  • Version 64

How can i turn to the next page in the blog article index?

How can i turn to the next page in my blog article index,
although I do not know frontend at all.
When i use Vanilla, I found that i can not set the buttons like "next page" & "pre page" on the page of article index.
Is there any Built-in options in Vanilla? Thank u.

the buttons i imagine like this:
2020-08-13_13-41

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.