I have to create a hugo site for documentation. i am using dot-hugo-documentation-theme. How can i implement a search box in this theme?
<div class="container">
<div class="row">
<div class="col-lg-8 text-center mx-auto">
<h1 class="text-white mb-3">{{ .Site.Params.banner.title }}</h1>
<p class="text-white mb-4">{{ .Site.Params.banner.description }}</p>
<div class="position-relative">
<input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
<!-- Javascript -->
<script>
$(function() {
var projects = [
{{ range.Data.Pages }}
{
// value: "{{ .Title }}",
label: "{{ .Title }}",
url:"{{ .Permalink }}"
},
{{ end }}
];
$( "#search" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#search" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#search" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a href=" + item.url + " + \" "\" + >" + item.label + "</a>" )
.appendTo( ul );
};
});
</script>
</div>
</div>
</div>
</div>
{{ "<!-- /banner -->" | safeHTML }}
Using this display only main headings I have to display inner page headings?
This guide will take you through the steps to enable Lunr-powered search on your Hugo site. It includes a Grunt script to do the indexing for you, so it's pretty straightforward.
If you want your search to work differently (e.g., through Elasticsearch), the Hugo documentation on search explains other options.
Related
In res.data.tweets i am fetching tweets from server and storing values for every tweet in tweetData obj. In tweet_text, i would like to add a link to the tagged twitter users(clickin on tag will redirect to twitter profile). I figured out how do i find tagged users but i am not able to add a link either with .link or .href attribbute.
axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
// Below this line i am trying to achieve something by adding a link
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
// word = 'this is tag'
word.link('https://twitter.com')
console.log(word.link)
}
})
})
})
})
This is component where data is shown
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
#
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>
I don't think it's going to work this way.
You should use a computed property which will append the username to the twitter base link. Then, in your template, you can link the href property to the computed property.
computed: {
userLink: function () {
return "http://twitter.com/" + this.tweet.twitter_username
}
}
You can now use this "userLink" directly in your template.
<p class="username">
<a
:href="userLink"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
I didn't test the code I wrote, feel free to let me know if you need further advice ;)
After updating from Symfony 2.X to Symfony 4.4 and verifying the operation, I found that Twig does not recognize modal.
Since it does not recognize modal, it will be displayed even when the code that is not displayed in modal in the if statement is displayed in modal.
When I tried "if modal is empty", the code in the if statement was displayed, so it seems that the modal is not passed.
The code that passes the modal has changed with the Symfony update. This may have an effect.
Do you have any idea?
Old_code
<div id="imageDialog" title="Image management">
{{ render(controller("AppBundle:Shop/Image:manager", {"modal": true})) }}
</div>
Changed_code
<div id="imageDialog" title="Image management">
{{ render(controller("AppBundle\\Controller\\Shop\\ImageController::managerAction", {"modal": true})) }}
</div>
Code in question
<div class="tabpanel selected" id="imageFolder" >
<div class="tabcontent">
<div class="operations">
{% if not modal %}
<div class="pull-right">
<form method="post" action="{{ path('app_shop_image_delete') }}">
<input type="hidden" name="methods" value="delete">
<input type="hidden" name="_csrf_token" value="{{ csrf_token("authenticate") }}">
<input type="hidden" name="ids" value="[]">
<button type="submit" class="delete btn btn-danger"><i class="icon-trash"></i> Delete</button>
</form>
</div>
{% endif %}
</div>
</div>
</div>
ImageController
*
* #Method("GET")
* #Route("/manager")
*
* #Template("#AppBundle/Shop/Image/manager.html.twig")
*/
public function managerAction(Request $request)
{
$routeParams = $request->get('_route_params');
$uploadUrl = $this->generateUrl("app_shop_image_save");
return array(
'modal' => isset($routeParams["modal"]) ? $routeParams["modal"] : false,
'form' => $this->createUploadForm($uploadUrl)->createView(),
);
}
It worked fine with the following method.
I couldn't get $routeParams["modal"], but please let me know if there is a way to get it.
public function managerAction(Request $request)
{
$routeParams = $request->query->get('modal');
$uploadUrl = $this->generateUrl("app_hq_image_save");
return array(
'modal' => isset($routeParams) ? $routeParams : false,
'form' => $this->createUploadForm($uploadUrl)->createView(),
);
}
<div id="imageDialog" title="Image management">
{{ render(controller("AppBundle\\Controller\\Shop\\ImageController::managerAction", {}, {"modal": true})) }}
</div>
public function managerAction(Request $request)
{
$isModal = $request->query->get('modal') != null ? $request->query->get('modal') : false;
$uploadUrl = $this->generateUrl("app_hq_image_save");
return array(
'modal' => $isModal,
'form' => $this->createUploadForm($uploadUrl)->createView(),
);
}
But I wonder if you shouldn't make modal as a real route param with a default value false.
https://symfony.com/doc/4.4/routing.html#optional-parameters
With Django I made a Show more comments button using ajax. This system works, but the problem is that there are form fields in the comments I brought in this way, and when I click the more button, csrf_token does not appear in this comment field. As such, I get a csrf_token error when I submit the form. I leave my codes below.
To solve this problem, I ran the form with the get method, but as such, the function in the views directs me to the page with JsonResponse. Another solution was to give the header information csrf_token, but that didn't solve the problem either.
blog_detail.html
<script>
$(document).ready(function(){
$('#load_form').submit(function(e){
e.preventDefault();
var limit = $(this).attr('limit')
var page = document.getElementById('pagination')
var blog_comment_list = $('#blog-comment-list')
var serializedData = $(this).serialize();
$.ajax({
type:'GET',
url: "{% url 'load-more-comments' %}",
data : serializedData,
success: function(response){
blog_comment_list.html(response.comment_html)
if (page.value >= limit){
$('#submit_button').hide()
}
page.value = parseInt(page.value)+1
},
})
})
})
</script>
<div id="blog-comment-list">
{% include 'front_end/blog/comment/partial-comment.html' %}
</div>
<form method="GET" id="load_form" limit="{{num_pages}}">
<input type="hidden" name="pk" value="{{details.id}}">
<input type="hidden" name="page" value="2" id="pagination">
<input type="submit" name="load" value="Load More" id="submit_button">
</form>
partial-comment-html
<div class="media-holder mt-5">
<h3 class="title mb-3">All Comments</h3>
{% for item in comments %}
<div class="infinite-container">
<div class="media mb-5">
<img class="img-fluid rounded-circle box-shadow mr-4" alt="image" src="{{item.owner.get_image_or_default}}" style="width: 100px;height: 100px;">
<div class="media-body">
<h6>{{item.owner.name}} {{item.owner.surname}}</h6>
<br>
<small><span style="font-size:14px;" class="stars-container stars-{% widthratio item.rate.rate 1 20 %}" id="stars">★★★★★</span></small>
<div class="comment-date"> <span class="date">{{item.created_date|naturaltime}}</span>
</div>
<p>{{item.content}} </p>
<div align="center">
{% if item.comments.all %}Cevapları Görüntüle ({{item.comments.count}}){% else %}Cevap Ver{% endif %}
</div>
<div class="generic-comment" id="generic-comment-id-{{item.id}}" style="display:none;">
<!-- -->
<div class="infinite-generic-comment">
<form action="{% url 'comment-answer' %}" method="POST" id="answer_form">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{item.id}}">
<div class="row">
<div class="col-9">
<input type="text" placeholder="Cevap Ver" name='generic_comment' class="form-control">
</div>
<div class="col-2">
<input type="submit" value="Cevap Ver" class="btn btn-outline-primary">
</div>
</div>
</form>
{% for comment in item.comments.all %}
<div class="media mb-2">
<img class="img-fluid rounded-circle box-shadow mr-4" alt="image" src="{{item.owner.get_image_or_default}}" style="width: 100px;height: 100px;">
<div class="media-body">
<h6>{{comment.owner.name}} {{comment.owner.surname}}</h6>
<div class="comment-date"> <span class="date">{{comment.created_date|naturaltime}}</span>
</div>
<p>{{comment.content}} </p>
</div>
</div>
{% endfor %}
</div>
<!-- -->
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script>
var aTag = document.getElementsByClassName('show-answers')
for (let i = 0; i< aTag.length; i++){
aTag[i].addEventListener('click', (event) => {
var generic = document.getElementById(`generic-${event.target.id}`)
if (generic.style.display == 'none'){
$(`#generic-${event.target.id}`).slideDown('slow')
}
else{
$(`#generic-${event.target.id}`).slideUp('slow')
}
})
}
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function(){
$('#answer_form').submit(function(e){
e.preventDefault()
var serializedData = $(this).serialize()
var url = $(this).attr('action')
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
//headers: { "X-CSRFToken": getCookie("csrftoken") }
});
$.ajax({
type:'POST',
url: url,
data:serializedData,
success: function(response){
if (response.success){
$('#answer_form').trigger('reset')
Swal.fire(
'Başarılı!',
'Cevap onaya gönderildi',
'success'
)
}
}
})
})
})
</script>
views.py
def answer_comment(request):
if request.method=='POST':
comment = Comment.objects.get(id=request.POST.get('comment_id'))
comment.comments.create(owner=request.user, content=request.POST.get('generic_comment'))
return JsonResponse({'success':True},status=200)
return JsonResponse({'success':False}, status = 403)
Note: I tried the csrf_exempt decorator function, but still could not solve the problem.
The methods I use are available in the script tag in partial-comment-html. How can I solve this problem. As I said, when I press the load more button, the necessary form fields to respond to a comment are just below these comments and when load more with ajax, the csrf_token information is deleted in these form fields, and nothing happens in new comments.
Note 2: When {{csrf_token}} is entered, I added the hidden input field with javascript myself, but Django realized that I added it and prevented me.
I am new to Vue.js. Very new so this question might sound a lot like a first graders. Forgive me.
I have the App.vue and Character.vue setup. I wanted to create characters on the fly and add them to an array (in App.vue) and let the rendering of the look/feel of the characters be done using Character.vue. The characters are created and added to the array and can be retrieved properly. Only thing is...Character.vue doesn't render them properly because for some reason, the character it retrieves from the array is undefined.
Help me?
Attaching files
App.vue
<template>
<div>
<div class='gameHeader'>
<h1>{{ gameHeader }}</h1>
</div>
<div class='gameMessages'>
<div class='gameMessage' v-for="msg in gameMessages">
{{ msg }}
</div>
</div>
<div class='gameMain'>
<button #click="rollNewCharacter">Roll New</button>
<div class="playerParty">
<character v-for="p in playerParty"></character>
</div>
<div class="computerParty">
<character v-for="c in computerParty"></character>
</div>
</div>
<div class='gameFooter'>
{{ gameFooter }}
</div>
</div>
</template>
<script>
import Character from "./assets/components/Character.vue";
export default {
components: { 'character': Character },
data: function(){ return { gameHeader: 'Monster Attack', gameMessages:[], playerParty: [], computerParty: [], gameFooter: '' }; },
methods: {
rollNewCharacter() {
var c = Character;
c.name = 'Usman';
c.type = 'Warrior';
c.mana = 100;
c.health = 100;
c.totalHealth = 100;
c.totalMana = 100;
console.log(c.name);
this.playerParty.push(c);
console.log(this.playerParty[0].name);
//this.computerParty.push(chr2);
}
}
}
</script>
Character.vue
<template>
<div class="character">
<span class='name'>{{ name }}</span><span class='type'>({{ type }})</span>
<div class='health'><div class='total' :class="totalHealth"><div class='health' :class="health"></div></div></div>
<div class='mana'><div class='total' :class="totalMana"><div class='mana' :class="mana"></div></div></div>
<span class='damage'>{{ damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
<script>
export default {
props: [ 'name', 'type', 'mana', 'health', 'damage' , 'totalHealth', 'totalMana' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
</script>
<style>
</style>
You should pass a prop when using the character component:
<character :character="p" v-for="p in playerParty"></character>
I have updated the character to receive only one prop:
export default {
props: [ 'character' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
And this is the character component template with the new prop:
<template>
<div class="character">
<span class='name'>{{ character.name }}</span><span class='type'>({{ character.type }})</span>
<div class='health'><div class='total' :class="character.totalHealth"><div class='health' :class="character.health"></div></div></div>
<div class='mana'><div class='total' :class="character.totalMana"><div class='mana' :class="character.mana"></div></div></div>
<span class='damage'>{{ character.damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
i'm creating a form to update my project but i get this error Creating default object from empty value
Here is my route :
Route::get('admin/projects/edit/{id}','ProjectsController#edit');
Route::put('admin/projects/update/{id}','ProjectsController#update');
The edit view :
#extends ('layout.admin')
#section ('content')
{{ Form::open(array('url'=>'admin/projects/update/'.$project->id.'','enctype'=>'multipart/form-data','method'=>'put','style'=>'margin:0!important;')) }}
{{ Form::token() }}
<div class="form-group">
{{ Form::label('name','Nom :') }}
{{ Form::text('name',$project->name,array('class'=>'form-control')) }}
#if($errors->first('name'))
<div class="alert alert-danger" role="alert">{{ $errors->first('name') }}</div>
#endif
</div>
<div class="form-group">
{{ Form::label('slug','Slug :') }}
{{ Form::text('slug',$project->slug,array('class'=>'form-control')) }}
#if($errors->first('slug'))
<div class="alert alert-danger" role="alert">{{ $errors->first('slug') }}</div>
#endif
</div>
<div class="form-group">
{{ Form::label('category_id','Category :') }}
{{ Form::select('category_id',$cats,$project->category_id) }}
</div>
<div class="form-group">
{{ Form::label('thumbnail','Image :') }}
{{ Form::file('thumbnail',array('class'=>'form-control')) }}
#if($errors->first('thumbnail'))
<div class="alert alert-danger" role="alert">{{ $errors->first('thumbnail') }}</div>
#endif
</div>
<div class="form-group">
{{ Form::label('description','Description :') }}
{{ Form::textarea('description',$project->description,array('class'=>'form-control')) }}
#if($errors->first('description'))
<div class="alert alert-danger" role="alert">{{ $errors->first('description') }}</div>
#endif
</div>
{{ Form::submit('Modifier', array('class'=>'btn btn-primary','style'=>'float:left')) }}
{{ Form::close() }}
<button class="btn btn-danger" style="float:left;margin-left:20px;">Supprimer</button>
#stop
And my controller
public function update($id){
$inputs = Input::all();
$rules = array(
'name'=>'required|min:5',
'description'=>'required|min:10'
);
$validation = Validator::make($inputs,$rules);
if($validation->fails()){
return Redirect::to('admin/projects/edit/'.Input::get('id').'')->withInput()->withError();
}
$project=Project::find($id);
$project->name = Input::get('name');
$project->slug = Slug::create(Input::get('slug'));
$project->category_id = Input::get('category_id');
$project->description = Input::get('description');
if(Input::hasFile('thumbnail')){
$img = Str::slug(Input::get('name').'png');
$post->thumbnail = 'img/'.$img.'';
}
if(Input::hasFile('thumbnail')){
Input::file('thumbnail')->move('img/',$img);
}
return Redirect::to('admin/projects')->with('Alert_succes','Votre projet a bien été mis à jour');
}
public function edit($id)
{
$project = Project::find($id);
$categories = Category::all();
$cats = array();
foreach ($categories as $category){
$cats[$category->id] = $category->name;
}
return View::make('projects.edit')->with(array('project'=>$project,'cats'=>$cats));
}
I Dont really understand where the errors is , the problem come from this line according to laravel debuger : $post->thumbnail = 'img/'.$img.'';
Thank You for your help
You are using $post->thumbnail = 'img/'.$img.''; but you didn't create a $post object. Instead you have $project object from this code:
$project = Project::find($id);
Where is $post in your code ? It should be $project and also make sure if you got an object, using something like this:
$project = Project::find($id);
if($project) {
//...
}
It looks that, $post->thumbnail should be $project->thumbnail in your update method.