-
Xinhao Guo authoredXinhao Guo authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
blog.html 6.73 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=".">
<meta name="author" content="">
<title>Portfolio</title>
<!-- font icons -->
<link rel="stylesheet" href="assets/vendors/themify-icons/css/themify-icons.css">
<!-- Bootstrap + Meyawo main styles -->
<link rel="stylesheet" href="assets/css/portfolio.css">
<!-- Add Axios CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="40" id="home">
<!-- Page Navbar -->
<nav class="custom-navbar" data-spy="affix" data-offset-top="20">
<div class="container">
<a class="logo" href="#" id="portfolio-name"></a>
<ul class="nav">
<li class="item">
<a class="link" href="index.html">Home</a>
</li>
<li class="item">
<a class="link" href="about.html">About</a>
</li>
<li class="item">
<a class="link" href="portfolio.html">Portfolio</a>
</li>
<li class="item">
<a class="link" href="testimonials.html">Testmonial</a>
</li>
<li class="item">
<a class="link" href="blog.html">Blog</a>
</li>
<li class="item">
<a class="link" href="contact.html">Contact</a>
</li>
</ul>
<a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
</div>
</nav><!-- End of Page Navbar -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Use Axios to fetch data from the AboutMe API
axios.get('http://127.0.0.1:8000/details/aboutme/')
.then(function(response) {
// Log the entire response object to see the data structure
// Check if the response contains the name data
if (response.data.name) {
// Replace the "Portfolio" text with the name from the API
document.getElementById('portfolio-name').textContent = response.data.name;
} else { console.error('Name not found in AboutMe data');
}
})
.catch(function(error) {
// Handle any errors
console.error('Error fetching AboutMe data:', error);
// Log the error response for better debugging
if (error.response) {
console.error('Error Response:', error.response);
console.error('Error Data:', error.response.data);
console.error('Error Status:', error.response.status);
console.error('Error Headers:', error.response.headers);
}
});
});
</script>
<!-- Blog Section -->
<section class="section" id="blog">
<!-- container -->
<div class="container text-center">
<p class="section-subtitle">Recent Posts</p>
<h6 class="section-title mb-6">Blog</h6>
<div class="row" id="blog-posts-container">
<!-- Blog cards will be appended here -->
</div>
</div><!-- end of container -->
</section><!-- end of blog section -->
<script>
document.addEventListener('DOMContentLoaded', function() {
axios.get('http://127.0.0.1:8000/details/blogs/')
.then(function(response) {
const blogs = response.data;
const blogContainer = document.getElementById('blog-posts-container');
blogs.forEach(function(blog) {
const blogCard = document.createElement('div');
blogCard.classList.add('col-md-6', 'col-lg-4');
blogCard.innerHTML = `
<div class="blog-card">
<div class="blog-card-header">
<img src="http://127.0.0.1:8000${blog.image || '/assets/imgs/placeholder.jpg'}" class="blog-card-img" alt="${blog.title}">
</div>
<div class="blog-card-body">
<h5 class="blog-card-title">${blog.title}</h5>
<p class="blog-card-caption">
<a href="#">By: ${blog.author}</a>
<a href="#"><i class="ti-heart text-danger"></i> ${blog.like_count}</a>
<a href="#"><i class="ti-comment"></i> ${blog.comment_count}</a>
</p>
<p>${blog.summary}</p>
<p><b>Highlighted content or important quote from the post.</b></p>
<p>${blog.content.slice(0, 100)}...</p>
<a href="#" class="blog-card-link">Read more <i class="ti-angle-double-right"></i></a>
</div>
</div>
`;
blogContainer.appendChild(blogCard);
});
})
.catch(function(error) {
console.error('Error fetching blog posts:', error);
});
});
</script>
<!-- footer -->
<div class="container">
<footer class="footer">
<p class="mb-0">Copyright <script>document.write(new Date().getFullYear())</script> © <a href="">Goa</a></p>
<div class="social-links text-right m-auto ml-sm-auto">
<a href="javascript:void(0)" class="link"><i class="ti-facebook"></i></a>
<a href="javascript:void(0)" class="link"><i class="ti-twitter-alt"></i></a>
<a href="javascript:void(0)" class="link"><i class="ti-google"></i></a>
<a href="javascript:void(0)" class="link"><i class="ti-pinterest-alt"></i></a>
<a href="javascript:void(0)" class="link"><i class="ti-instagram"></i></a>
<a href="javascript:void(0)" class="link"><i class="ti-rss"></i></a>
</div>
</footer>
</div> <!-- end of page footer -->
<!-- core -->
<script src="assets/vendors/jquery/jquery-3.4.1.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.js"></script>
<!-- bootstrap 3 affix -->
<script src="assets/vendors/bootstrap/bootstrap.affix.js"></script>
<!-- Meyawo js -->
<script src="assets/js/main.js"></script>
</body>
</html>