Add friend chain system to Hexo blog

 1

 hexo new page links

 1
 2
 3
 4

 < div id = "qexo-friends" > </ div >
 < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/hexo/friends/friends.css" />
 < script src = "https://cdn.jsdelivr.net/npm/[email protected]/hexo/friends/friends.js" > </ script >
 < script > loadQexoFriends( "qexo-friends" , "${SITE}" ) </ script >

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 twenty one
 twenty two
 twenty three

 const { URL } = require ( 'url' );
 const { Component } = require ( 'inferno' );
 const { cacheComponent } = require ( 'hexo-component-inferno/lib/util/cache' );
 class QexoLinks extends Component {
 render ( ) {
 const js = `loadSideBarFriends('qexo-sidebar-friends', 'https://Qexo domain name');` ;
 return (
 <div class = "card widget" >
 <div class = "card-content" >
 <div class = "menu" >
 <h3 class = "menu-label" >Links</h3>
 <ul class = "menu-list qexo-sidebar-friends" ></ul>
 </div>
 <script dangerouslySetInnerHTML=></script>
 <a class = "link-more button is-light is-small size-small" href= "/links/" >See more</a>
 </div>
 </div>
 );
 }
 }


 module .exports = QexoLinks;

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 twenty one
 twenty two
 twenty three
 twenty four
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128

 < article class = "message is-info" >
 < div class = "message-header" >
 Apply for Friendship Chain
 </ div >
 < div class = "message-body" >
 < div class = "form-ask-friend" >
 < div class = "field" >
 < label class = "label" > name </ label >
 < div class = "control has-icons-left" >
 < input class = "input" type = "text" placeholder = "your site name" id = "friend-name" required >
 < span class = "icon is-small is-left" >
 < i class = "fas fa-signature" > </ i >
 </ span >
 </ div >
 </ div >
 < div class = "field" >
 < label class = "label" > Link </ label >
 < div class = "control has-icons-left" >
 < input class = "input" type = "url" placeholder = "link to your website homepage" id = "friend-link" required >
 < span class = "icon is-small is-left" >
 < i class = "fas fa-link" > </ i >
 </ span >
 </ div >
 < p class = "help " > Make sure the site is accessible! </ p >
 </ div >
 < div class = "field" >
 < label class = "label" > icon </ label >
 < div class = "control has-icons-left" >
 < input class = "input" type = "url" placeholder = "Your website icon (as full circle as possible)" id = "friend-icon" required >
 < span class = "icon is-small is-left" >
 < i class = "fas fa-image" > </ i >
 </ span >
 </ div >
 </ div >
 < div class = "field" >
 < label class = "label" > description </ label >
 < div class = "control has-icons-left" >
 < input class = "input" type = "text" placeholder = "Please introduce your site in one sentence" id = "friend-des" required >
 < span class = "icon is-small is-left" >
 < i class = "fas fa-info" > </ i >
 </ span >
 </ div >
 </ div >
 < div class = "field" >
 < div class = "control" >
 < label class = "checkbox" >
 < input type = "checkbox" id = "friend-check" /> I am not submitting meaningless information
 </ label >
 </ div >
 </ div >
 < div class = "field is-grouped" >
 < div class = "control" >
 < button class = "button is-info" type = "submit" onclick = "askFriend(event)" > Apply for Friends Chain </ button >
 </ div >
 </ div >
 </ div >
 </ div >
 </ article >
 < script src = "https://recaptcha.net/recaptcha/api.js?render=reCaptcha key" > </ script >
 < script >
 function TestUrl ( url ) {
 var Expression= /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/ ;
 var objExp= new RegExp (Expression);
 if (objExp.test(url) != true ){
 return false ;
 }
 return true ;
 }
 function askFriend ( event ) {
 let check = $( "#friend-check" ).is( ":checked" );
 let name = $( "#friend-name" ).val();
 let url = $( "#friend-link" ).val();
 let image = $( "#friend-icon" ).val();
 let des = $( "#friend-des" ).val();
 if(!check){
 alert( "Please check\"I am not submitting meaningless information\"" );
 return ;
 }
 if(!(name&&url&&image&&des)){
 alert( "Incomplete information! " );
 return ;
 }
 if (!(TestUrl(url))){
 alert( "URL format error! Need to include HTTP headers! " );
 return ;
 }
 if (!(TestUrl(image))){
 alert( "Image URL format error! Need to include HTTP headers! " );
 return ;
 }
 event.target.classList.add( 'is-loading' );
 grecaptcha.ready( function ( ) {
 grecaptcha.execute( 'reCaptcha key' , { action : 'submit' }).then( function ( token ) {
 $.ajax({
 type: 'get' ,
 cache: false ,
 url: url,
 dataType: "jsonp" ,
 async : false ,
 processData: false ,
 //timeout:10000,
 complete: function ( data ) {
 if(data.status==200){
 $.ajax({
 type: 'POST' ,
 dataType: "json" ,
 data: {
 "name" : name,
 "url" : url,
 "image" : image,
 "description" : des,
 "verify" : token,
 },
 url: 'https://QEXO domain name/pub/ask_friend/' ,
 success: function ( data ) {
 alert(data.msg);
 }
 });}
 else {
 alert( "URL cannot be reached!" );
 }
 event.target.classList.remove( 'is-loading' );
 }
 });
 });
 });
 }
 </ script >