Merge pull request pythonclub#177 from LucasMagnum/feature/dynamic_random_articles

Home - Artigos randomicos

Author: igr-santos

custom-plugins/json_articles/Readme.md

@@ -0,0 +1,35 @@
+Json Articles Plugin For Pelican
+========================
+
+This plugin insert a variable called `json_articles` in the page context.
+
+This variable contains all articles in a json format.
+
+
+In settings we can define the number of random_articles:
+
+    RANDOM_ARTICLES = 3
+
+
+Usage
+-----
+
+Add `dynamic_random_articles.js` in your template, in our case, just do that:
+<script src="{{ SITEURL }}/theme/js/dynamic_random_articles.js"></script>
+
+In our sidebar.html  was inserted:
+
+    div class="section articles-random">
+        <h1 class="tagline">Não deixe de ver!</h1>
+        <div id="random-articles"></div>
+    </div>
+
+We use `articles-random` class to hide it in mobile.
+
+And then, we call the javascript function that render articles:
+
+    $(function(){
+        show_random_articles($('#random-articles'), {{ json_articles }}, {{ RANDOM_ARTICLES }});
+    });
+
+Note that we pass a element to function, this element can be changed any time.

custom-plugins/json_articles/__init__.py

@@ -0,0 +1 @@
+from .json_articles import *

custom-plugins/json_articles/json_articles.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+
+from __future__ import unicode_literals
+
+import json
+
+from pelican import signals
+
+
+def inject_articles(generator, metadata=None):
+    articles = generator.context['articles']
+    site_url = generator.settings['SITEURL']
+
+    json_articles = []
+
+    for article in articles:
+        json_articles.append({
+            'title': article.title,
+            'url': '{}/{}'.format(site_url, article.url)
+        })
+
+    generator.context['json_articles'] = json.dumps(json_articles)
+
+
+def register():
+    signals.page_generator_context.connect(inject_articles)

custom-plugins/random_articles/Readme.md

@@ -65,14 +65,13 @@
     'sitemap',
     'pelican_youtube',  # funciona somente com arquivos rst
     'pelican_vimeo',  # funciona somente com arquivos rst
-    'random_articles',
+    'json_articles',
     'gzip_cache'  # deve ser o ultimo plugin
     # 'pdf', # funciona somente com arquivos rst
 
 ]
 
 RANDOM_ARTICLES = 10
-SKIP_ARTICLES = 10
 
 
 SITEMAP = {

custom-plugins/random_articles/__init__.py

@@ -0,0 +1,26 @@
+function shuffleArray(array) {
+    for (var i = array.length - 1; i > 0; i--) {
+        var j = Math.floor(Math.random() * (i + 1));
+        var temp = array[i];
+        array[i] = array[j];
+        array[j] = temp;
+    }
+    return array;
+}
+
+function show_random_articles(element, articles, articles_number){
+    articles = shuffleArray(articles);
+
+    var paragraph = $('<p class="article-link tagline"></p>');
+
+    for (index in articles){
+        var article = articles[index];
+        var article_html = '<a href="' + article.url + '">' + article.title + '</a>';
+        var article_paragraph = paragraph.clone().append(article_html)
+        element.append(article_paragraph);
+
+        if (index >= articles_number -1)
+            break;
+    }
+
+}

custom-plugins/random_articles/random_articles.py

@@ -28,6 +28,7 @@
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
     <link rel="stylesheet" href="{{ SITEURL }}/theme/css/pure.css">
     <link rel="stylesheet" href="{{ SITEURL }}/theme/css/custom.css">
+
     {% block head_css %}{% endblock %}
 
 
@@ -52,6 +53,8 @@
 
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script src="{{ SITEURL }}/theme/js/dynamic_random_articles.js"></script>
+
     {% block bottom_js %}{% endblock %}
 
     <script>
@@ -77,6 +80,11 @@
         $('body').on('click', 'a[href="#"]', function(event) {
             event.preventDefault();
         });
+
+        $(function(){
+            show_random_articles($('#random-articles'), {{ json_articles }}, {{ RANDOM_ARTICLES }});
+        });
+
     </script>
 </body>
 </html>

pelicanconf.py

@@ -11,12 +11,7 @@ <h1 class="brand-main"><a href="/"><img src="{{ SITELOGO }}" alt="{{ SITENAME }}
 
           <div class="section articles-random">
             <h1 class="tagline">Não deixe de ver!</h1>
-
-              {% for article in random_articles %}
-                  <p  class="article-link tagline">
-                    <a href="{{ SITEURL }}/{{ article.url}}">{{ article.title }}</a>
-                  </p>
-              {% endfor %}
+            <div id="random-articles"></div>
           </div>
 
           <p class="social">