Comments (6)
ok, after spending some time, I did it myself, it's easy
- create an about-me.html file at the root of the project
Let's have content like below
---
layout: default
robots: noindex
---
<div>
This is about me
</div>
- Add below line in index.html
<ul class="navigation">
<li class="navigation__item"><a href="{{ site.baseurl }}/about-me" title="link to {{ site.title }} about-me" class="about-button">/about-me</a></li>
</ul>
- add below in main.js file, so that when "about-me" button is clicked, panel should be collapsed
$('a.about-button').click(function (e) {
if ($('.panel-cover').hasClass('panel-cover--collapsed')) return
currentWidth = $('.panel-cover').width()
if (currentWidth < 960) {
$('.panel-cover').addClass('panel-cover--collapsed')
$('.content-wrapper').addClass('animated slideInRight')
} else {
$('.panel-cover').css('max-width', currentWidth)
$('.panel-cover').animate({'max-width': '530px', 'width': '40%'}, 400, swing = 'swing', function () {})
}
})
if (window.location.hash && window.location.hash == '#about') {
$('.panel-cover').addClass('panel-cover--collapsed')
}
PS: I have little knowledge on javascript and css, so please excuse my poor coding skill
from jekyll-uno.
Hey @MatthewThomasMiller I'm late to the party but was trying to figure this out for my own needs and I figured it could help you or someone else. It's a bit longer of a solution, so I can't just post the code in the comments.
But the idea is to split your index in a few parts and use ajax to load those separately to the display area, so you avoid switching pages.
I did this for 3 pages on my site - Projects, Resume and Blog. Projects and Resume are treated as separate blogs (through category filtering) and blog filters out those 2 categories to retain the blog itself. (You could just have a static page using the same logic (sections of index))
You can check out or copy the code here: https://github.com/TalkinWhip/TalkinWhip.github.io
The relevant parts are in main.js (line 6 ff., until the mobile portion) and in index.html (the whole <ol class="post-list"> has been expanded into 3 sections for each "page"). And of course the buttons in the header.html as jrp posted earlier.
It's not a particularly elegant solution as I am not a very good programmer but it works for me and hopefully it helps someone in a pinch.
from jekyll-uno.
I also need the same feature. I must say, the theme is simple and elegant. Thanks for the theme :)
from jekyll-uno.
For step #2 you actually add the code to "header.html" located in "_includes" directory and not index.html.
Full path would be "/_includes/header.html"
from jekyll-uno.
Thanks for this fix. I too needed some sort of "About Me" page added to this theme.
Quick question though: I added the code above and the "About Me" button shows up. It works, but there is one remaining (and annoying) issue. When clicking on the "About Me" button the animation is different than when I click on the "blog" button. The animation with the blog button is smooth and gradual, but the animation when clicking on the "About Me" button is abrupt and jerky (i.e., it jumps to the collapsed version of the display instead of slowly readjusting). Any ideas on the reason for this or how to fix it?
from jekyll-uno.
I followed the approach suggested by @TalkinWhip, and managed to add the new button with a consistent animation.
Required changes can be seen in this PR: https://github.com/vmorenoluna/vmorenoluna.github.io/pull/1/files
I'm not a frontend developer, I'm sure it can be improved.
edit:
this PR fixes a couple of page transaction issues introduced in the first PR https://github.com/vmorenoluna/vmorenoluna.github.io/pull/2/files
from jekyll-uno.
Related Issues (20)
- How did you generate the favicons? HOT 3
- Update Jekyll to 3.7 gain livereload HOT 2
- Change Permalink from "/#blog" to "/blog/" HOT 1
- Font/Background Color in Code Blocks HOT 1
- Unable to load blog post HOT 1
- Remove JS
- Not working on Jekyll v.4.1.1 HOT 5
- Resize profile.jpg HOT 2
- Jekyll-uno displaying improperly and not functioning properly on mobile HOT 4
- Mastodon icon HOT 1
- Blog is broken HOT 4
- Undefined Method "includes_load_paths" HOT 1
- Invalid initial state of the theme (?)
- Uno theme bug in its baseurl setup HOT 1
- Update JQuery HOT 1
- Post does not display category. HOT 1
- display issue with Persian (Arabic-script) text HOT 1
- Blog Content Animation split between first 2 clicks
- Cannot deploy site with netlify : view different from local jekyll serve HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jekyll-uno.