I’m building a personal hugo website and am deploying it via Gitlab pages. This worked pretty well so far, except for a strange bug I ran into recently:
I’ve changed my homepage from “_index.md” to “index.md” (topmost index file in the tree) in order to access pictures in sub-folders as page resources, which I wasn’t able to access with it named “_index.md”. This worked well building the page locally (using hugo 0.88.1), but as soon as I’ve uploaded these changes to Gitlab, my gitlab page became nearly empty (no content (where pictures were included), just header and footer).
I’ve played a while with gitlab-ci in order to track it down.
Resulting page as expected: Files · bd036ee1b5eee9481cda3673414dcaff8a2753da · Roy Meissner / rmeissn.gitlab.io · GitLab 2
Resulting page nearly empty: Files · e885460a88ae9b7e6f1356fcdcb90ac4a33c5351 · Roy Meissner / rmeissn.gitlab.io · GitLab 2
The second link is just one commit later, renaming “_index.md” to “index.md”. This won’t raise any CLI warning/error locally or on gitlab-ci.
Content of the nearly empty index.html from the gitlab build artifact:
<!doctype html><html lang=de-de><head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name=description content="Hompage of Roy Meissner">
<meta name=author content="Roy Meissner">
<title>Webseite über Roy Meissner</title>
<meta name=generator content="Hugo 0.88.1">
<noscript>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css defer>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css defer>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css defer>
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Montserrat:400,700" defer>
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Kaushan+Script" defer>
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" defer>
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" defer>
</noscript>
<link rel=stylesheet href=https://rmeissn.gitlab.io/css/vendor.min.ff6fc787c4ec5df9d28a94e2875fb22fbec3b8e1f62707323f7251d74ecfb34ff23e2b16eefbbd7847059cae69e514aaf398b178885f906e688ecbbb5b6a0e36.css integrity="sha512-/2/Hh8TsXfnSipTih1+yL77DuOH2JwcyP3JR107Ps0/yPisW7vu9eEcFnK5p5RSq85ixeIhfkG5ojsu7W2oONg==" media=screen>
<link rel=icon href=https://rmeissn.gitlab.io/favicon.png type=image/png>
</head>
<body id=page-top class=index>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id=mainNav>
<div class=container>
<a class="navbar-brand page-scroll" href=https://rmeissn.gitlab.io/>Roy Meissner</a>
<button class=navbar-toggler type=button data-bs-toggle=collapse data-bs-target=#navbarResponsive aria-controls=navbarResponsive aria-expanded=false aria-label="Toggle navigation">
Menu <i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id=navbarResponsive>
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class=nav-item>
<a class=nav-link href=#services>3 Säulen</a>
</li>
<li class=nav-item>
<a class=nav-link href=#portfolio>Portfolio</a>
</li>
<li class=nav-item>
<a class=nav-link href=#about>Über mich</a>
</li>
<li class=nav-item>
<a class=nav-link href=#clients>Institutionen</a>
</li>
<li class=nav-item>
<a class=nav-link href=#contact>Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<div></div>
<footer class="footer py-4">
<div class=container>
<div class="row align-items-center">
<div class=col-lg-6>
<div class=social-buttons>
<a class="btn btn-dark btn-social mx-2 hoverTransition" href=mailto:roy-meissner#gmx.net target=_blank rel=noreferrer alt=E-Mail>
<i class="fas fa-envelope"></i>
</a>
<a class="btn btn-dark btn-social mx-2 hoverTransition" href=https://www.xing.com/profile/Roy_Meissner2 target=_blank rel=noreferrer alt=Xing>
<i class="fab fa-xing"></i>
</a>
<a class="btn btn-dark btn-social mx-2 hoverTransition" href=https://github.com/rmeissn target=_blank rel=noreferrer alt=Github>
<i class="fab fa-github"></i>
</a>
<a class="btn btn-dark btn-social mx-2 hoverTransition" href=https://gitlab.com/rmeissn target=_blank rel=noreferrer alt=Gitlab>
<i class="fab fa-gitlab"></i>
</a>
<a class="btn btn-dark btn-social mx-2 hoverTransition" href=https://stackoverflow.com/users/8404508/roy target=_blank rel=noreferrer alt=Stackoverflow>
<i class="fab fa-stack-overflow"></i>
</a>
<a class="btn btn-dark btn-social mx-2 hoverTransition" href=https://orcid.org/0000-0003-4193-8209 target=_blank rel=noreferrer alt=ORCiD>
<i class="fab fa-orcid"></i>
</a>
</div>
</div>
<div class="col-lg-6 text-lg-middle">
<a class="page-scroll hoverTransition" href=#page-top><i class="fa fa-arrow-up"> Seitenanfang</i></a>
</div>
</div>
</div>
</footer>
<script type=text/javascript defer>let link,godefer;link=document.createElement('link'),link.rel='stylesheet',link.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link),link=document.createElement('link'),link.rel='stylesheet',link.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link),link=document.createElement('link'),link.rel='stylesheet',link.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link),link=document.createElement('link'),link.rel='stylesheet',link.href='https://fonts.googleapis.com/css?family=Montserrat:400,700',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link),link=document.createElement('link'),link.rel='stylesheet',link.href='https://fonts.googleapis.com/css?family=Kaushan\u002bScript',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link),link=document.createElement('link'),link.rel='stylesheet',link.href='https://fonts.googleapis.com/css?family=Droid\u002bSerif:400,700,400italic,700italic',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link),link=document.createElement('link'),link.rel='stylesheet',link.href='https://fonts.googleapis.com/css?family=Roboto\u002bSlab:400,100,300,700',link.type='text/css',godefer=document.getElementsByTagName('footer')[0],godefer.appendChild(link)</script>
<script src=https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js></script>
<script src=https://rmeissn.gitlab.io/js/vendor.min.77bdf77320261d22ed734ff16f0e4368ddb1346535a15c8dcd76bae46e9e43d496530bf68e645dca6f8c68770fc60860409751afc32af88a01d6370dfed0658b.js integrity="sha512-d733cyAmHSLtc0/xbw5DaN2xNGU1oVyNzXa65G6eQ9SWUwv2jmRdym+MaHcPxghgQJdRr8Mq+IoB1jcN/tBliw=="></script>
<script src=https://rmeissn.gitlab.io/js/deferred.min.cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e.js integrity="sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==" defer></script>
</body>
</html>
Why is gitlab producing different results than hugo locally? I even tried downloading the docker image and executing the gitlab-ci commands within it… which gives me the expected results (a page full of content) for both commits.
This is a typical one and this happens quite often in the beginning, especially when you don't fully understand the concept of page bundles (who does?). The problem is that Hugo does not clean up after itsself. The index on localhost 'no longer exists', but you are still able to visit it. When you restart Hugo you will see the true version of your website and get a 404 on that index (on localhost). Another reason can be that it is using another template file. Restarting Hugo helps in those cases. To debug the situation you should manually run the 'hugo' command and look in the 'public' directory (remove the directory after analysis, as it is not cleaned either).
Related
I have a menu on website. Below is the HTML code.
<header class="navbar navbar-sticky navbar-expand-lg navbar-dark">
<div class="container position-relative">
<a class="navbar-brand" href="./index.html">
<img class="navbar-brand-regular" src="logo.png"/>
<img class="navbar-brand-sticky" src="logo.png"/>
</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-inner">
<!-- Mobile Menu Toggler -->
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
On Mobile menu, when i click on a menu item, the menu did not closed. Below is the script code.
Did I miss anything?
// MAIN MENU TOGGLER ICON (MOBILE SITE ONLY)
$('[data-toggle="navbarToggler"]').click(function () {
$('.navbar').toggleClass('active');
$('body').toggleClass('canvas-open');
});
// MAIN MENU TOGGLER ICON
$('.navbar-toggler').click(function () {
$('.navbar-toggler-icon').toggleClass('active');
});
Bootstrap will handle all toggle/collapse by itself you do not need to write extra JS. Toggle button must not duplicate as you did to avoid messing up the navbar functioning.
Below is the answer. I optimized your params in few places. If my answer works for you, please tick it as final answer and upvote it so other people with same problem will get help too. Cheers
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="#" width="#"> </a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
<li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
</ul>
</div>
</div>
</nav>
I copied this example navbar from the Bulma website in a Blazor website. On the webpage it is working fine but on mobile the navbar-burger does not respond. Am I missing a vital step in the process? Do I need to do something with .css for example?
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
This is because Bulma doesn't come with any JavaScript, so you need to toggle the class is-active on both the navbar-burger and the targeted navbar-menu.
There is implementation examples in Bulma navbar documentation, personally I'm using the jQuery implementation which works perfectly :
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
but there's also a Vanilla Javascript implementation in the docs if you want.
Have you included all scripts and links into index.html? Have you tried hard refresh(Ctrl+F5 or Ctrl+Shirt+R)? Is your Program.cs same as theirs?
If nothing of above worked, can you provide whole codebase? Ideally git or zip.
I am working on a Laravel project implementing React for the front end.
I've set up a couple of routes and have created two blade files for both the dashboard and a clients list page.
However, after consideration I feel that maybe a single blade file with a header and footer and just a #content div in the middle would be more efficient.
I cannot see how to specific which blade file for the route. At first, I thought I was specifying it using the name() function on the Route but I am wrong. Here are my routes in my web.php file:
Auth::routes();
Route::get('/', 'HomeController#index')->name('home');
Route::get('/clients', 'ClientController#index')->name('clients');
And I created two blade files:
home.blade.php
clients.blade.php
Which basically contain:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
<div id="content"></div>
</div>
</div>
</div>
</div>
</div>
#endsection
Except in the clients template I have the title 'Clients' not 'Dashboard'.
This is the app.blade.php which each template extends:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Reserve Shark') }}</title>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Reserve Shark') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
However, when I changed the client route's name to 'home' (thinking it would use the home blade file) it didn't change. So, for the purpose of testing, I changed it to 'blah' which didn't change anything. I even changed the route itself to client-page and the same in my app.js file:
render((
<Router history={browserHistory}>
<Route path="/" component={Example} />
<Route path="/client-page" component={Client} />
</Router>
), document.getElementById('content')
);
Yet there is no change.
When I changed my clients.blade.php file to clients2.blade.php I got an error stating that clients.blade.php didn't exist.
So my question is: where on earth is Laravel stipulating that this page uses THAT blade file?
Is it possible to somehow change it so every route uses the same file and the only difference is the data that's injected into the #content div?
In your controller (e.g. ClientController), within the index method, there should either be a view(...) helper method or a View::make(...) static method.
Change the value to change the blade template used.
When you use the ->name('home') attach to your route, you just specifie the name of the route by default Laravel will name your route as home.route, and this is just to help you remember the name of your route when you whan to return same URL instead of writing the URL manualy you can use the route() helper
To specifie the blade template which you want to render you must put in you index method of you HomeController
class HomeController extends Controller
{
public function index()
{
/* here goes all other code */
return View::make('home'); // Laravel will render your home.blade.php file
}
}
class ClientController extends Controller
{
public function index()
{
/* here goes all other code */
return View::make('clients'); // Laravel will render your clients.blade.php file
}
}
don't forget to use the Illuminate\Supports\Facades\View
This question already has answers here:
Bootstrap 4 Fixed top navbar shows collapsed and hides content
(4 answers)
Closed 4 years ago.
Using essentially the same css classes that are used on the twitter bootstrap site itself (and many other places), my horizontal navbar becomes vertical. I have the same div layout and classes (except the bs-* classes) as on the bootstrap page.
I hacked around this once by changing various settings from "block" to "inline" and such but there must be a better solution. Please advise.
Navbar html:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--
<div class = "navbar-header">
<a class = "navbar-brand"> Home </a>
</div>
-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Followers
</li>
<li>
Posts
</li>
</ul>
</div>
</div>
</nav>
This has been copied from bootstrap's navbar documentation. And hence it is responsive by default (show the preview in full-screen to by clicking Full page button on top right corner of the preview). If you don't require Branding to be there, you will just need to remove <a class="navbar-brand" href="#">Branding</a>.
More information about bootstrap 4's navbar can be found here - https://getbootstrap.com/docs/4.0/components/navbar/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Branding</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">
<li class="nav-item active">
<a class="nav-link" href="#">Followers<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</nav>
I am developing an app with the MEAN stack...and the question is...
How can I divide the interface of my app?
I have a static page(such a webpage) and an application page, the interface is different but the development that I have followed is...
In the file 'index.js' of my app, where I put all the dependencies and set the . In this file I have set the header and the footer of the static page for not repeat it in all the html files. It is working when I navegate above the static page, but when I am developing the app-page I want to change the main interface.
So, Must I repeat the code? or Can I set directives like ng-show to show each interface in each situation?
There I show you the mockups of my app:
Static:
Application:
The body target of my 'index.js' file:
<body>
<script>
$(document).ready(function(){
$('.button-collapse').sideNav();
});
</script>
<!-- The var changeInterface control if we are on main page or app page-->
<header>
<nav class="dipu-green">
<div class="nav-wrapper container" role="navigation">
<a id="logo-container" href="#" ui-sref="/()" class="" style="color:white" >
<b>R.U. Pino Montano</b>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#!/" style="color:white" >Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news" style="color:white">
Noticias</a>
</li>
<li>
<a href="#!/info" style="color:white">
Información</a>
</li>
<li>
<a href="#!/team" style="color:white">
Equipo</a>
</li>
<li>
<a href="#!/services" style="color:white">
Servicios</a>
</li>
<li>
<a href="#!/contact" style="color:white">
Contacto</a>
</li>
<li>
<a href="#!/app" style="color:white">
Resi App</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a href="#!/">
<i class="material-icons">mood</i>Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news">
<i class="material-icons">new_releases</i>Noticias</a>
</li>
<li>
<a href="#!/info">
<i class="material-icons">info</i>Información</a>
</li>
<li>
<a href="#!/team">
<i class="material-icons">people</i>Equipo</a>
</li>
<li>
<a href="#!/services">
<i class="material-icons">business</i>Servicios</a>
</li>
<li>
<a href="#!/contact">
<i class="material-icons">contact_mail</i>Contacto</a>
</li>
<li>
<a href="#!/app">
<i class="material-icons">exit_to_app</i>Resi App</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" style="color:white" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
<main>
<div class="ribbon">
<span>BETA</span>
</div>
<!-- el controlador se añade a una parte del body-->
<div class="section">
<div ui-view></div>
</div>
</main>
<footer class="page-footer dipu-green">
<div class="container">
<div class="row dipu-green">
<div class="col s12">
<div>
<h5>Contacto</h5>
<ul>
<li><i class="tiny material-icons">location_on</i> Avda. Alcalde Manuel del Valle nº 28</li>
<li>41008, Sevilla (España)</li>
<li><i class="tiny material-icons">account_balance</i> C.I.F.: XXXXX </li>
<li><i class="tiny material-icons">local_phone</i> Tel: XXX XXX XXX</li>
<li><i class="tiny material-icons">email</i> rupinomontano#gmail.com</li>
<li><i class="tiny material-icons">web</i> rupinomontano.com</li>
</ul>
</div>
</div>
<div class="col s12">
<div>
<h5>Desarrollo</h5>
</div>
</div>
<div class="col s12">
<h5>Síguenos en</h5>
<div id="social">
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<span style="margin-left:15%;">© 2018 Developed by </span>
</div>
</footer>
</body>
Thank you in advance!
As you are using angularjs, you can create a single page application.
answering to your qustions
Q: Must I repeat the code?
Ans - in angularjs you should not repeat your code, you maintain common part in one page and from that page you can render to diffrent page. this the beauty of single page application. to create a single page application you need routing. to achive routing in angular js you can use angular router package or you can use UI Router package.
please chack this example for angular router : https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
please chack this example for UI router : https://scotch.io/tutorials/angular-routing-using-ui-router
Q: Can I set directives like ng-show to show each interface in each situation?
Ans - you should use routing directive. from these directive you can navigate to different page without reloading pages again again.