Socila links in jekyll main page at the bottom

Help
1

Hi,

I’m new in jekyll community I try to figured it how to do some but with no result. I’m using jekyll in no-style-please theme. My page looks like this:

www
www717×520 32.3 KB

I would like using some codes or svg icon add my linkedn account and the github repo. I read about the I should add footer.html in _includes then make new entry in _config.yml using social_links text. But all of this cost my a week of attempts with no result. Maybe in this theme it’s not possible to add things like this, but I think it’s unlikely. Can someone show step by step how to properly add it? and yes I was using a google in time when I was trying fix it by myself :slight_smile:

2

you can certainly do that, but there are lot of ways to go about it. A quick look at that theme shows it does not have a footer, so if you want to add that (as an include would be good) and put them there that would work. You could then include the footer at the bottom of the default layout which should make it show on every page.

As for adding stuff into the config, you could do that or you could just put it in the footer. Adding things to the config is more for making something universal - so another person using YOUR theme could change it easily rather than having to find it in the footer include.

I’d encourage you to do some jekyll tutorials videos on youtube to get an understanding of how it all works. Just focusing on one theme may make it hard to understand what is happening. There is a really old youtube series that was awesome - maybe 20 different 10 minute videos, most of that would still apply. There are likely new ones as well I’m sure.

3

If it is possible to share your repo (GitHub, GitLab, etc.), that would be helpful, and we can help you come up with a solution for your specific scenario. That said, here is a basic approach you want to take:

I assume you have at least one layout you are using in the _layouts folder, and for this post, I will assume you call it default.html. Inside the HTML <body> tag, I assume you will display the content for the post, so you have a page that looks something like this:

./layouts/default.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My podcast</title>
</head>
<body>
    {% comment %} display the post content {% endcomment %}
    {{ content }}
</body>
</html>

If that is all you are doing, then you could write some HTML that adds the footer to the bottom of your page directly underneath the {{ content }} element.

If you have more than one layout and want the footer to be more reusable, you would add the footer content as an include. Create a folder at the root of your Jekyll site named _includes and then create a file called whatever you want, like footer.html. Inside that footer, you might want to add a little HTML semantic section so you can style it (like make a slightly different background color, set default font styles, etc.). The code would look like this:

./includes/footer.html

<footer class="sitefooter">
    Add your html code here
</footer>

Now, your new layout will look like this:

./_layouts/default.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My podcast</title>
</head>
<body>
    {% comment %} display the post content {% endcomment %}
    {{ content }}
    {%- include footer.html -%}
</body>
</html>

That is all you need to do. Using the _config.yml file is useful if you want to store some commonly used data, like the link to your LinkedIn site, but that is not a requirement. You can do something as simple as writing the HTML code in the footer.html file without ever using _config.yml.

4

Hello,

Thanks for respond. I try to fix some stuff by myself. And now it looks better.

1
1975×556 34 KB

but I would like replace this = /////// this border-line:

2
21891×291 22.9 KB

I try to use inspect on this page and find the code, and I did:

}
.site-footer {
border-top: 1px solid #e8e8e8;
padding: 30px 0;
}

but it’s in css and in my footer.html I used html. Also I would like to delete this underlines:

3

but I don’t know how.

In my jekyll would I did to make the footer was creating footer.html file in _includes. My code below:

obraz
obraz880×536 23.6 KB

Probably it’s messy code I’m not a programmer everything what I need to have I google. I will be appreciate to help mi with this 2 things, if the repo of my site is still necessary I upload it on my github.

5

I wonder if that is because hrefs have an underline style?

See if this article helps:

7

Thank You Bill for help :slight_smile: ! I almost resolve my all issues :slight_smile:

Maybe You know how to put my own text into main page sidebar not the default, I mean something like this:

capture2