RSS-feeds importeren: verschil tussen versies
k (→Beschikbare widgets) |
|||
| (4 tussenliggende versies door dezelfde gebruiker niet weergegeven) | |||
| Regel 1: | Regel 1: | ||
| − | |||
{{#widget:Style-1|css= | {{#widget:Style-1|css= | ||
ul.feedEkList { | ul.feedEkList { | ||
| Regel 17: | Regel 16: | ||
}} | }} | ||
| + | Een RSS-feed importeren is een goede manier om een overzicht van actuele content op andere websites in een wiki te plaatsen. | ||
| + | |||
| + | === Implementatie === | ||
| + | |||
| + | * [https://www.mediawiki.org/wiki/Extension:RSS Extension:RSS] | ||
| + | * Widgets: bijvoorbeeld hieronder genoemde eigen ontwikkelingen op basis van [https://www.jquery-plugins.net/FeedEK/FeedEk.html feedEk.js]. | ||
=== Beschikbare widgets === | === Beschikbare widgets === | ||
| − | Maakt gebruik van (bijvoorbeeld) | + | Maakt gebruik van (bijvoorbeeld) [[Widget:RSS-FeedEk-1]], wanneer je een enkele RSS-feed op een pagina wilt plaatsen. Pas de gewenste parameters in de code het widget zelf aan: |
<pre>{{#widget:RSS-FeedEk-1}}</pre> | <pre>{{#widget:RSS-FeedEk-1}}</pre> | ||
Resultaat: | Resultaat: | ||
{{#widget:RSS-FeedEk-1}} | {{#widget:RSS-FeedEk-1}} | ||
| − | <pre>{{#widget:RSS-FeedEk-2}}</pre> | + | <pre>{{#widget:RSS-FeedEk-2 |
| + | | id=divrss2 | ||
| + | | feedurl= https://www.theaterkrant.nl/category/nieuwslabels/nieuws/feed/ | ||
| + | | maxcount = 5 | ||
| + | | desccharacterlimit =150 | ||
| + | }}</pre> | ||
| + | |||
| + | Maakt gebruik van (bijvoorbeeld) [[Widget:RSS-FeedEk-2]], wanneer je een ''meerdere'' RSS-feeds op een pagina wilt plaatsen. Je kunt de parameters om de output aan te passen meegeven aan het widget: | ||
| + | |||
Resultaat 2: | Resultaat 2: | ||
{{#widget:RSS-FeedEk-2 | {{#widget:RSS-FeedEk-2 | ||
| Regel 33: | Regel 46: | ||
| desccharacterlimit =150 | | desccharacterlimit =150 | ||
}} | }} | ||
| + | |||
| + | == Styling van de output == | ||
| + | |||
| + | Om de styling van de verschillende onderdelen uit de output van het widget aan te passen, zijn de volgende css-selectors beschikbaar (voorbeeld): | ||
| + | <pre> | ||
| + | Selectors: | ||
| + | |||
| + | #divRss | ||
| + | |||
| + | ul.feedEkList { | ||
| + | list-style-type: none | ||
| + | } | ||
| + | |||
| + | ul.feedEkList div.itemTitle > a { | ||
| + | font-weight: bold; | ||
| + | font-size: 150%; | ||
| + | } | ||
| + | |||
| + | ul.feedEkList div.itemDate { | ||
| + | color: gray; | ||
| + | font-size: 90%; | ||
| + | } | ||
| + | |||
| + | ul.feedEkList div.itemContent { | ||
| + | |||
| + | } | ||
| + | </pre> | ||
| + | |||
| + | NB1: Wanneer het eventueel gewenst is om een bestaande (Bootstrap) CSS-class aan de ul-lijst toe te voegen, is het nodig het widget uit te breiden. | ||
| + | |||
| + | NB2: Links openen nu standaard in een nieuw tab-blad. Openen in bestaand is mogelijk, maar hiervoor moet het widget worden aangepast. | ||
Huidige versie van 12 feb 2020 om 19:39
Een RSS-feed importeren is een goede manier om een overzicht van actuele content op andere websites in een wiki te plaatsen.
Implementatie
- Extension:RSS
- Widgets: bijvoorbeeld hieronder genoemde eigen ontwikkelingen op basis van feedEk.js.
Beschikbare widgets
Maakt gebruik van (bijvoorbeeld) Widget:RSS-FeedEk-1, wanneer je een enkele RSS-feed op een pagina wilt plaatsen. Pas de gewenste parameters in de code het widget zelf aan:
{{#widget:RSS-FeedEk-1}}
Resultaat:
{{#widget:RSS-FeedEk-2
| id=divrss2
| feedurl= https://www.theaterkrant.nl/category/nieuwslabels/nieuws/feed/
| maxcount = 5
| desccharacterlimit =150
}}
Maakt gebruik van (bijvoorbeeld) Widget:RSS-FeedEk-2, wanneer je een meerdere RSS-feeds op een pagina wilt plaatsen. Je kunt de parameters om de output aan te passen meegeven aan het widget:
Resultaat 2:
Styling van de output
Om de styling van de verschillende onderdelen uit de output van het widget aan te passen, zijn de volgende css-selectors beschikbaar (voorbeeld):
Selectors:
#divRss
ul.feedEkList {
list-style-type: none
}
ul.feedEkList div.itemTitle > a {
font-weight: bold;
font-size: 150%;
}
ul.feedEkList div.itemDate {
color: gray;
font-size: 90%;
}
ul.feedEkList div.itemContent {
}
NB1: Wanneer het eventueel gewenst is om een bestaande (Bootstrap) CSS-class aan de ul-lijst toe te voegen, is het nodig het widget uit te breiden.
NB2: Links openen nu standaard in een nieuw tab-blad. Openen in bestaand is mogelijk, maar hiervoor moet het widget worden aangepast.