mkdocs relative url paths are truncated? - mkdocs

According to the mkdocs user guide, I should be able to put relative paths into my "nav" section in order to point outside of the root of my documentation tree. However, if I use the following mkdocs.yml:
site_name: Test
site_url: https://example.com/foo/
nav:
- Home: '../'
- Home2: '../../'
- Test: 'index.md'
Then the relevant bit of the generated output file is
<!-- Main navigation -->
<ul class="nav navbar-nav">
<li class="navitem">
Home
</li>
<li class="navitem">
Home2
</li>
<li class="navitem active">
Test
</li>
</ul>
In order words, the 'go up a directory' part of the relative path has been removed, and so the link points to the wrong place. I also get some warnings during build:
WARNING - A relative path to '../' is included in the 'nav' configuration,
which is not found in the documentation files
WARNING - A relative path to '../../' is included in the 'nav' configuration,
which is not found in the documentation files
What gives? This is almost verbatim copied from the mkdocs user guide. I'm using mkdocs 1.2.3 on python 3.6

Related

images don't show up using <img> HTML tag

I set a tag to a local path it works normally on my computer BUT when I deploy it using GitHub pages services the images don't load at all
here is the code:
<ol>
<li>Go To Apperance > Menu</li>
<li>Create a new menu by clicking on create a new menu</li>
<img src="./images/social1.PNG" width="80%" alt="Social Icons">
<li>Add your menu items as <strong>Custom links</strong> in left side menu</li>
<img src="./images/social2.PNG" width="80%" alt="Social Icons">
</ol>
You should change src="./images/socialX.PNG" either to an absolute path or given that you opt for relative paths and under the assumption that the images directory is placed inside your website's repository, then its name should be prepended to form the final relative path src="/repo_name/images/socialX.PNG".
I checked your repository.
Your used relative path correctly, but you missed spell.
In URL, case is sensitive. Your folder name is "Images", but you tried "images", That's why your code not working.
For example, Try https://ryadh020.github.io/HireMe-theme-doc/Images/front1.PNG instead of https://ryadh020.github.io/HireMe-theme-doc/images/front1.PNG.
Please make sure you upload the images as well.
and the link URL is accurate to its file, (I am not sure where the dot is referring, maybe try removing it or add two dots).
Hope you found this helpful :)

Getting an error when linking contact form in html i have tried everything

<nav class="Navbar">
<ul>
<li>
<a href=“index.html”>Home</a></li>
<li>
<a href=“contact.html”>About</a></li>
<li>
<a href=“Services.html”>Services</a></li>
<li>
<a href=“Contact.html”>Contact</a></li>
This is the error i get
Cannot GET /%E2%80%9CContact.html%E2%80%9D
The contact form you saved as "contact.html", check that the page can load independently and please check if it is saved in same folder as your document. You might want to get its src/ folder.
close your </ul> and </nav>
check your link and learn about relative and absolute links. a url will solve that problem if it is remote. if its local, make sure its not in a different directory.
check this page out
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
i bet one of those 2 things helps. keep us posted

Return to the homepage and move to the section

the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.

Responsive Web Design with Bootstrap CSS

I have built a site that I am trying to make responsive...with Bootstrap CSS it is actually fairly easy - but I am running into a weird problem. Everything works fine...except when I visit one page (the "Settings" page), when I'm holding my iPhone upright...the links stop working in the navbar (I try to click on them but nothing happens). However, if I turn my iPhone, and hold it horizontally, the navbar links start working again. Has anyone ever seen this problem? Here is relevant code:
navbar.html (I am using angular, and it doesn't make sense for the nav buttons to function on one page...and not on another):
<div class="header" ng-controller="NavbarCtrl">
<h2 id="redbox" class="text-muted">[H]</h2><h3 class="text-muted">ackabox</h3>
<ul class="nav nav-pills pull-right">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/login')}">Login</li>
<li ng-show="currentUser" ng-class="{active: isActive('/settings')}">Settings</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/signup')}">Sign up</li>
<li ng-show="currentUser" ng-class="{active: isActive('/logout')}">Logout</li>
</ul>
</div>
I don't really know what else to include for code...it just seems like a glitch with responsive web design that might have some weird solution I don't know about. Any help would be greatly appreciated.
UPDATE
I posted the site to git: https://github.com/eamonwhiter73/hackabox
Node modules are included...you just have to run MongoDB instance...and then cd to the site directory in your console...and type grunt serve. That will load the site automatically into the browser on localhost:9000.
Also, for MongoDB to function - mind this line in lib/config/env/development.js:
...
uri: 'mongodb://localhost/hackabox'
...
You may have to change this depending on how you have MongoDB set up on your computer (I am on a Mac, but I know that for Windows, it might be a slightly different syntax - or you may be using a username and password...just google it).
Have at it (and check out the cool forum that I built into the site)!
Found the real culprit - oddly enough - it was just a float:left in the css for .header > h2 and .header > h3 - when I removed that it fixed everything - need to figure out a different way to reformat my header though :)

Click on Anchor <a> Searches for a page in duplicate nested hierarchy which does not exist

I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.
<div id="menu">
<ul class="menu">
<li><span>About Us</span>
<div>
<ul>
<li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
The problem is because you are using relative paths to your pages.
It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.
You need to add a / to the beginning of your URL to make it relative to the root of the site:
<ul>
<li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:
<ul>
<li><span>Phone</span></li>
<li><span>Email</span></li>
</ul>
I believe href="" is your problem here.
Try href="#" or href="javascript:;"