Ελληνική Κοινότητα Υποστήριξης ForumGreek
Καλωσήρθατε στο Ελληνικό Φόρουμ Υποστήριξης της ForumGreek!!

Για να αποκτήσετε πλήρη πρόσβαση στο φόρουμ και στα όσα προσφέρει, μπορείτε πολύ απλά να κάνετε μια σύνδεση ή αν δεν έχετε λογαριασμό μία δωρεάν εγγραφή και μπείτε στην κοινότητά μας!!

Επιπρόσθετες επιλογές για hashtags

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Επιπρόσθετες επιλογές για hashtags

Δημοσίευση από Nemo Την / Το Τρι Μαϊος 12, 2015 4:00 pm


Επιπρόσθετες επιλογές για hashtags


Αυτός ο οδηγός θα σας προσφέρει δύο τρόπους για να βελτιώσετε τη χρήση του #hashtag συστήματος στα φόρουμ σας από τη ForumGreek. Και οι δύο τρόποι θα εγκατασταθούν μέσω του Javascript, άρα πρέπει να πάτε στη διαχείριση των κωδικών Javascript:

Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript

Βεβαιωθείτε πως η διαχείριση των κωδικών Javascript είναι ενεργοποιημένη.

Hashtag popup επιλογές




Αυτή η τροποποίηση σας δίνει περισσότερες λειτουργίες με τις οποίες μπορείτε να χρησιμοποιήσετε τα hashtags, να ακολουθήσετε κάποια hashtags, να δείτε τα θέματα με ετικέτες και να διαχειριστείτε τις ετικέτες.



Έπειτα, δημιουργήστε ένα νέο script με τις ακόλουθες ρυθμίσεις:

Title: Hashtag popup
Placement: In all the pages
Κώδικας:
Κώδικας:
$(function() {
  var a = document.getElementsByTagName('A'), b = document.createElement('DIV'), i = 0, j = a.length, actif, t;
  b.className = 'fa-hashtag-options';
  b.style.display = 'none';
  document.body.appendChild(b);
 
  for (; i<j; i++) {
    if (a[i].title && /\/tags\//.test(a[i].href) && /^#/.test(a[i].innerHTML)) {
      a[i].className += ' fa-hashtag';
     
      a[i].onclick = function() {
       
        if (actif != this) {
          actif = this, t = this.innerHTML;
          t.length > 24 && (t = t.slice(0, 25).replace(/^\s+|\s+$/g, '') + '...');
         
          b.style.left = $(this).offset().left + 'px';
          b.style.top = $(this).offset().top + 'px';
          b.innerHTML = '<div class="fa-hashtag-title">Επιλογές για <span class="fa-hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">Δείτε θέματα με ετικέτες</a>' + (_userdata.session_logged_in ? '<form method="post" name="addtag_form" action="/profile?mode=editprofile&page_profil=tags&start&submit=1"><b>• </b><a href="#" onclick="this.parentNode.submit();return false;">Ακολουθήστε <span class="fa-hashtag-tag">' + t + '</span></a><input name="addtag" type="hidden" value="' + this.innerHTML.slice(1) + '"></form><b>• </b><a href="/profile?mode=editprofile&page_profil=tags">Διαχειριστείτε τις ετικέτες</a>' : '');
         
          /none/.test(b.style.display) && (b.style.display = 'block');
        } else {
          actif = null;
          b.style.display = 'none';
        }
       
        return false;
      };
    }
  }
});

Τώρα πρέπει να προσθέσετε έναν CSS κώδικα, ώστε το popup παράθυρο να εμφανίζεται σωστά. Πηγαίντε στον Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και κάντε επικόλληση τον παρακάτω κώδικα:

Κώδικας:
/* options drop down */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}

/* options title */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}

/* option links */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}

.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}

/* option bullets */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}

/* option tags */
.fa-hashtag-tag {
  color:#000;
  font-weight:bold;
}

To script προσθέτει επίσης και ένα όνομα για τα tags στις δημοσιεύσεις, οπότε αν θέλετε να τροποποιήσετε τον σχεδιασμό των ετικετών, μπορείτε να επεξεργαστείτε τον παρακάτω κώδικα:

Κώδικας:
/* hashtag styles */
a.fa-hashtag {
  color:#666;
  text-decoration:none;
  background-color:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  display:inline-block;
  padding:3px;
}

a.fa-hashtag:hover {
  color:#333;
  background-color:#DDD;
  border-color:#999;
}

SCEditor Hashtag κουμπί



Αυτή η τροποποίηση θα σας επιτρέψει να προσθέσετε ένα κουμπί στον editor. Αυτό το κουμπί μπορεί να χρησιμοποιηθεί για να πληκτρολογήσετε τον τίτλο της ετικέτας ή για να επιλέξετε μία ετικέτα από αυτές που ακολουθείτε.



Προσθέστε έναν νέο Javascript κώδικα ( Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript ) με τις παρακάτω ρυθμίσεις:

Title: SCEditor Hashtag Κουμπί
Placement: In all the pages
Κώδικας:
Κώδικας:
$(function(){
  if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
  var storage = window.localStorage, s = document.createElement('SELECT'), tags = '';
 
  if (storage && storage.faTags && storage.faTagsExp > +new Date - 29*59*1000 && storage.faTagsUser == _userdata.username) s.innerHTML = storage.faTags;
  else {
    $.get('/profile?mode=editprofile&page_profil=tags', function(d) {
      var h = $('form[name="tag_list"] a', d);
   
      if (h.length) {
        for (var i = 0, j = h.length, txt; i<j; i++) {
          txt = h[i].innerHTML.replace(/^\s+|\s+$/g,'');
          if (/^#/.test(txt)) {
            !tags && (tags += '<option value="">Select a tag</option>');
            tags += '<option value="'+ txt.slice(1) +'">' + (txt.length > 24 ? txt.slice(0, 25) + '...' : txt) + '</option>';
          }
        }
        s.innerHTML = tags;
      }
   
      if (storage) {
        storage.faTags = tags ? tags : 0;
        storage.faTagsUser = _userdata.username;
        storage.faTagsExp = +new Date;
      }
    });
  }
   
 
  $.sceditor.command.set('hashtag', {
    dropDown : function(editor, caller, callback) {
      var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
      b.type = 'button';
      b.value = 'Insert';
      b.className = 'button';
     
      c.type = 'text';
      c.id = 'fa-hashtag';
     
      a.innerHTML = '<div><label for="fa-hashtag">Hashtag :</label></div>' + ( s.innerHTML ? '<div><label>Followed tags :</label></div>' : '' ) + '<div></div>';
      a.firstChild.appendChild(c);
      a.lastChild.appendChild(b);
     
      if (s.innerHTML != 0) {
        s.value = '';
        a.getElementsByTagName('DIV')[1].appendChild(s);
        s.onchange = function() {
          c.value = s.value;
        };
      }
     
      b.onclick = function() {
        c.value && callback(c.value);
        editor.closeDropDown(true);
      };

      editor.createDropDown(caller, 'inserthashtag', a);
    },

    exec : function(c) { tag(c, this) },
    txtExec : function(c) { tag(c, this) },
   
    tooltip : 'Insert a hashtag'
  });
 
  toolbar = toolbar.replace(/quote,/,'hashtag,quote,');
 
  function tag(c, e) {
    $.sceditor.command.get('hashtag').dropDown(e, c, function(tag) {
      e.insertText('#' + tag.replace(/^#/,'').replace(/[\xD7\xF7\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\xBF]/g, '_') + ' ');
    });
  }
});

Exclamation Προσοχή: Οι μη έγκυροι χαρακτήρες θα αντικατασταθούν με ένα _ .

Για να εμφανίζεται σωστά το κουμπί, θα χρειαστεί να προσθέσετε τον παρακάτω CSS κώδικα:

Κώδικας:

/* button image */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }

/* drop down input */
#fa-hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}


Ο οδηγός γράφτηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε στα Ελληνικά από Nemo.

Nemo
Υπεύθυνος Φόρουμ

Υπεύθυνος Φόρουμ

Άντρας
Τόπος : Αθήνα, Ελλάδα
Δημοσιεύσεις : 1081

Επιστροφή στην κορυφή Πήγαινε κάτω

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
Χρειάζεστε βοήθεια;
Στις Συχνές Ερωτήσεις μπορείτε να βρείτε σημαντικές πληροφορίες που θα σας βοηθήσουν!