+Blog-Artikel (Hack)

Sunny C. · May 8, 2023 at 3:02 PM

Hallo Community,

mir gefällt das +Artikel Plugin so gut, aber konnte bisher nichts finden, was sowas für den Blog umsetzen kann. Bisher scheint auch solch eine Umsetzung nicht geplant und ich habe mich nun seit ein paar Wochen daran versucht sowas ohne Kenntnisse und ohne Plugin umzusetzen.

Es ist wahrscheinlich nicht die beste Lösung, aber es scheint bisher seinen Zweck zu erfüllen. Und ich wollte euch das nicht vorenthalten und vielleicht kann das jemand optimieren und daraus was tolles entwickeln.

Voraussetzung ist es, dass template entry aus der Blog-App zu modifizieren.

Der Ganze Inhalt muss mit folgendem ersetzt werden:

HTML

{capture assign='pageTitle'}{if $entry->isDraft}{lang}blog.entry.draft{/lang}: {/if}{$entry->subject}{/capture}

{assign var='__mainItemScope' value='itemprop="mainEntity" itemscope itemtype="http://schema.org/Article"'}

{* PAYWALL HACK *}
{if $entry->entryID == 1} {* > ENTRYS *}
  {if 6|in_array:$__wcf->user->getGroupIDs()} {* > USERGROUP ACEPTED *}
{* START: ORIGINALCODE *}
{capture assign='contentHeader'}
    <header class="contentHeader messageGroupContentHeader blogEntryHeader{if $entry->isDisabled} messageDisabled{/if}{if $entry->isDeleted} messageDeleted{/if}">
        <div class="contentHeaderIcon">
            {@$entry->getUserProfile()->getAvatar()->getImageTag(64)}
            
            {event name='icons'}
        </div>
        
        <div class="contentHeaderTitle">
            <h1 class="contentTitle" id="entryTitle{@$entry->entryID}">
                {if $entry->isFeatured}
                    <span class="badge label green jsLabelFeatured">{lang}blog.entry.featured{/lang}</span>
                {/if}
                {if $entry->isDraft}
                    <span class="badge">{lang}blog.entry.draft{/lang}</span>
                {/if}
                {if $entry->isNew()}<span class="badge label">{lang}wcf.message.new{/lang}</span>{/if}
                <span itemprop="name headline">{$entry->subject}</span>
            </h1>
            
            <ul class="inlineList contentHeaderMetaData">
                <li itemprop="author" itemscope itemtype="http://schema.org/Person">
                    <span class="icon icon16 fa-user"></span>
                    {if $entry->userID}
                        <a href="{$entry->getUserProfile()->getLink()}" class="userLink" data-user-id="{@$entry->userID}" itemprop="url">
                            <span itemprop="name">{@$entry->getUserProfile()->getFormattedUsername()}</span>
                        </a>
                    {else}
                        <span itemprop="name">{$entry->username}</span>
                    {/if}
                </li>
                
                <li>
                    <span class="icon icon16 fa-clock-o"></span>
                    <span><a href="{link application='blog' controller='Entry' object=$entry}{/link}" class="permalink">{@$entry->time|time}</a></span>
                    <meta itemprop="datePublished" content="{@$entry->time|date:'c'}">
                    <meta itemprop="dateModified" content="{@$entry->time|date:'c'}">
                </li>
                
                {if $entry->views}
                    <li>
                        <span class="icon icon16 fa-eye"></span>
                        {lang}blog.entry.views.count{/lang}
                    </li>
                {/if}
                
                {if $entry->comments}
                    <li itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
                        <span class="icon icon16 fa-comments"></span>
                        <span>{lang}blog.entry.comments.count{/lang}</span>
                        <meta itemprop="interactionType" content="http://schema.org/CommentAction">
                        <meta itemprop="userInteractionCount" content="{@$entry->comments}">
                    </li>
                {/if}

                {event name='contentHeaderMetaData'}
            </ul>
            
            <meta itemprop="mainEntityOfPage" content="{$canonicalURL}">
            <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="{PAGE_TITLE|phrase}">
                <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
                    <meta itemprop="url" content="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}">
                </div>
            </div>
        </div>
        
        {hascontent}
            <nav class="contentHeaderNavigation">
                <ul>
                    {content}
                        {event name='contentHeaderNavigation'}
                    {/content}
                </ul>
            </nav>
        {/hascontent}
    </header>
{/capture}

{capture assign='headContent'}
    <link rel="canonical" href="{link application='blog' controller='Entry' object=$entry}{/link}">
    {if MODULE_AMP}
        <link rel="amphtml" href="{link application='blog' controller='EntryAmp' object=$entry}{/link}">
    {/if}
{/capture}

{capture assign='sidebarRight'}
    {if $entry->getLeafCategories()|count}
        <section class="box">
            <h2 class="boxTitle">{lang}blog.entry.categories{/lang}</h2>
            
            <div class="boxContent">
                <ul>
                    {foreach from=$entry->getLeafCategories() item=category}
                        <li><a href="{link application='blog' controller='BlogEntryList' object=$entry->getBlog()}categoryID={@$category->categoryID}{/link}" class="jsTooltip" title="{lang}blog.entry.categorizedEntries{/lang}">{$category->getTitle()}</a></li>
                    {/foreach}
                </ul>
            </div>
        </section>
    {/if}
    
    {include file='blogArchive' application='blog'}
    
    {if $tags|count}
        <section class="box">
            <h2 class="boxTitle">{lang}wcf.tagging.tags{/lang}</h2>
            
            <div class="boxContent">
                <ul class="tagList">
                    {foreach from=$tags item=tag}
                        <li><a href="{link controller='Tagged' object=$tag}objectType=com.woltlab.blog.entry{/link}" class="jsTooltip tag" title="{lang}wcf.tagging.taggedObjects.com.woltlab.blog.entry{/lang}">{$tag->name}</a></li>
                    {/foreach}
                </ul>
            </div>
        </section>
    {/if}
    
    {event name='boxes'}
{/capture}

{include file='header'}

{if !$entry->isPublished && !$entry->isDraft}
    <p class="info" role="status">{lang}blog.entry.delayedPublication{/lang}</p>
{/if}

{assign var='objectID' value=$entry->entryID}
<article class="section blogEntry" aria-labelledby="entryTitle{@$entry->entryID}">
    <div class="section articleImageContainer" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
        {assign var=coverPhotoImage value=$entry->getCoverPhotoImage()}
        
        <figure class="contentCoverPhotoImage">
            <div class="contentCoverPhotoImageWrapper"><img src="{@$coverPhotoImage->getUrl()}" alt=""></div>
        </figure>
        <meta itemprop="url" content="{$coverPhotoImage->getUrl()}">
        <meta itemprop="width" content="{@$coverPhotoImage->getWidth()}">
        <meta itemprop="height" content="{@$coverPhotoImage->getHeight()}">
    </div>
    
    <div class="section message{if $entry->isDeleted} messageDeleted{/if}{if $entry->isDisabled} messageDisabled{/if}{if $entry->getUserProfile()->userOnlineGroupID} userOnlineGroupMarking{@$entry->getUserProfile()->userOnlineGroupID}{/if}"
        {@$__wcf->getReactionHandler()->getDataAttributes('com.woltlab.blog.likeableEntry', $entry->entryID)}
        data-is-deleted="{@$entry->isDeleted}" data-is-disabled="{@$entry->isDisabled}" data-is-featured="{@$entry->isFeatured}"
        data-can-view-deleted-entry="{if $__wcf->session->getPermission('mod.blog.canViewDeletedEntry')}true{else}false{/if}" data-can-trash-entry="{if $entry->canTrash()}true{else}false{/if}" data-can-restore-entry="{if $entry->canRestore()}true{else}false{/if}" data-can-delete-entry="{if $__wcf->getSession()->getPermission('mod.blog.canDeleteEntry')}true{else}false{/if}" data-can-edit-entry="{if $entry->canEdit()}true{else}false{/if}" data-can-moderate-entry="{if $__wcf->getSession()->getPermission('mod.blog.canModerateEntry')}true{else}false{/if}">
        
        <div class="messageContent">
            <div class="messageBody">
                {if $entry->getPoll()}
                    {include file='poll' poll=$entry->getPoll()}
                {/if}
                
                {event name='beforeMessageText'}
                
                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>
                
                {event name='afterMessageText'}
            </div>
            
            <footer class="messageFooter">
                {include file='attachments'}
                
                {if $entry->getUserProfile()->showSignature()}
                    <div class="messageSignature">
                        <div>{@$entry->getUserProfile()->getSignature()}</div>
                    </div>
                {/if}
                
                {event name='messageFooter'}
                
                <div class="messageFooterNotes">
                    {if $entry->canEdit() && $entry->hasOldVersions()}
                        <p class="blogEntryEditNote messageFooterNote"><a href="{link controller='EditHistory' objectType='com.woltlab.blog.entry' objectID=$entry->entryID}{/link}">{lang}blog.entry.hasOldVersions{/lang}</a></p>
                    {/if}
                    
                    {if $entry->getDeleteNote()}
                        <p class="blogEntryDeleteNote messageFooterNote">{@$entry->getDeleteNote()}</p>
                    {/if}
                    
                    {event name='messageFooterNotes'}
                </div>
                
                <div class="messageFooterGroup">
                    {if MODULE_LIKE && $entryLikeData|isset}{include file="reactionSummaryList" reactionData=$entryLikeData objectType="com.woltlab.blog.likeableEntry" objectID=$entry->entryID}{/if}
                    
                    <ul class="messageFooterButtons buttonList smallButtons">
                        {if $entry->canEdit()}<li><a href="{link application='blog' controller='EntryEdit' id=$entry->entryID}{/link}" class="button jsButtonEntryInlineEditor" title="{lang}blog.entry.edit{/lang}"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>{/if}
                        <li>
                            <a href="{$entry->getLink()}" class="button wsShareButton jsOnly" data-link-title="{$entry->getTitle()}">
                                <span class="icon icon16 fa-share-alt"></span> <span>{lang}wcf.message.share{/lang}</span>
                            </a>
                        </li>
                        {if !VISITOR_USE_TINY_BUILD || $__wcf->user->userID}<li class="jsQuoteMessage" data-object-id="{@$entry->entryID}" data-is-quoted="{if $__quoteFullQuote|isset && $entry->entryID|in_array:$__quoteFullQuote}1{else}0{/if}"><a rel="nofollow" href="{link application='blog' controller='EntryAdd' quoteMessageID=$entry->entryID}{/link}" title="{lang}wcf.message.quote.quoteMessage{/lang}" class="button jsTooltip{if $__quoteFullQuote|isset && $entry->entryID|in_array:$__quoteFullQuote} active{/if}"><span class="icon icon16 fa-quote-left"></span> <span class="invisible">{lang}wcf.message.quote.quoteMessage{/lang}</span></a></li>{/if}
                        {if $__wcf->session->getPermission('user.profile.canReportContent')}<li class="jsReportEntry jsOnly" data-object-id="{@$entry->entryID}"><a href="#" title="{lang}wcf.moderation.report.reportContent{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.moderation.report.reportContent{/lang}</span></a></li>{/if}
                        {if MODULE_USER_INFRACTION && $userProfile->userID && $__wcf->session->getPermission('mod.infraction.warning.canWarn') && !$userProfile->getPermission('mod.infraction.warning.immune')}<li class="jsWarnEntry jsOnly" data-object-id="{@$entry->entryID}" data-user-id="{@$userProfile->userID}"><a href="#" title="{lang}wcf.infraction.warn{/lang}" class="button jsTooltip"><span class="icon icon16 fa-gavel"></span> <span class="invisible">{lang}wcf.infraction.warn{/lang}</span></a></li>{/if}
                        {if $entry->canReact()}<li><a href="#" class="reactButton jsTooltip button{if $entryLikeData[$entry->entryID]|isset && $entryLikeData[$entry->entryID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $entryLikeData[$entry->entryID]|isset && $entryLikeData[$entry->entryID]->reactionTypeID}{$entryLikeData[$entry->entryID]->reactionTypeID}{else}0{/if}"><span class="icon icon16 fa-smile-o"></span> <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>{/if}
                        {event name='messageFooterButtons'}
                    </ul>
                </div>
            </footer>
        </div>
    </div>
</article>

{if $nextEntry || $previousEntry}
    <div class="section blogEntryNavigation">
        <nav>
            <ul>
                {if $previousEntry}
                    <li class="blogPreviousEntryButton">
                        <a href="{link application='blog' controller='Entry' object=$previousEntry}{/link}" rel="prev">
                            <div>
                                <span class="blogEntryNavigationEntityName">{lang}blog.entry.previousEntry{/lang}</span>
                                <span class="blogEntryNavigationEntryTitle">{$previousEntry->subject}</span>
                            </div>
                        </a>
                    </li>
                {/if}
                
                {if $nextEntry}
                    <li class="blogNextEntryButton">
                        <a href="{link application='blog' controller='Entry' object=$nextEntry}{/link}" rel="next">
                            <div>
                                <span class="blogEntryNavigationEntityName">{lang}blog.entry.nextEntry{/lang}</span>
                                <span class="blogEntryNavigationEntryTitle">{$nextEntry->subject}</span>
                            </div>
                        </a>
                    </li>
                {/if}
            </ul>
        </nav>
    </div>
{/if}

{event name='beforeComments'}

{if $entry->enableComments}
    {if $commentList|count || $commentCanAdd}
        <section id="comments" class="section sectionContainerList">
            <h2 class="sectionTitle">{lang}wcf.global.comments{/lang}{if $entry->comments} <span class="badge">{#$entry->comments}</span>{/if}</h2>
            
            {include file='__commentJavaScript' commentContainerID='blogEntryCommentList'}
            
            <ul id="blogEntryCommentList" class="commentList containerList" data-can-add="{if $commentCanAdd}true{else}false{/if}" data-object-id="{@$entryID}" data-object-type-id="{@$commentObjectTypeID}" data-comments="{if $entry->comments}{@$commentList->countObjects()}{else}0{/if}" data-last-comment-time="{@$lastCommentTime}">
                {if $commentCanAdd}{include file='commentListAddComment' wysiwygSelector='blogEntryCommentListAddComment'}{/if}
                {include file='commentList'}
            </ul>
        </section>
    {/if}
{/if}
{* ENDE: ORIGINALCODE *}
  {else}
{* START: ORIGINALCODE *}
{capture assign='contentHeader'}
    <header class="contentHeader messageGroupContentHeader blogEntryHeader{if $entry->isDisabled} messageDisabled{/if}{if $entry->isDeleted} messageDeleted{/if}">
        <div class="contentHeaderIcon">
            {@$entry->getUserProfile()->getAvatar()->getImageTag(64)}
            
            {event name='icons'}
        </div>
        
        <div class="contentHeaderTitle">
            <h1 class="contentTitle" id="entryTitle{@$entry->entryID}">
                {if $entry->isFeatured}
                    <span class="badge label green jsLabelFeatured">{lang}blog.entry.featured{/lang}</span>
                {/if}
                {if $entry->isDraft}
                    <span class="badge">{lang}blog.entry.draft{/lang}</span>
                {/if}
                {if $entry->isNew()}<span class="badge label">{lang}wcf.message.new{/lang}</span>{/if}
                <span itemprop="name headline">{$entry->subject}</span>
            </h1>
            
            <ul class="inlineList contentHeaderMetaData">
                <li itemprop="author" itemscope itemtype="http://schema.org/Person">
                    <span class="icon icon16 fa-user"></span>
                    {if $entry->userID}
                        <a href="{$entry->getUserProfile()->getLink()}" class="userLink" data-user-id="{@$entry->userID}" itemprop="url">
                            <span itemprop="name">{@$entry->getUserProfile()->getFormattedUsername()}</span>
                        </a>
                    {else}
                        <span itemprop="name">{$entry->username}</span>
                    {/if}
                </li>
                
                <li>
                    <span class="icon icon16 fa-clock-o"></span>
                    <span><a href="{link application='blog' controller='Entry' object=$entry}{/link}" class="permalink">{@$entry->time|time}</a></span>
                    <meta itemprop="datePublished" content="{@$entry->time|date:'c'}">
                    <meta itemprop="dateModified" content="{@$entry->time|date:'c'}">
                </li>
                
                {if $entry->views}
                    <li>
                        <span class="icon icon16 fa-eye"></span>
                        {lang}blog.entry.views.count{/lang}
                    </li>
                {/if}
                
                {if $entry->comments}
                    <li itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
                        <span class="icon icon16 fa-comments"></span>
                        <span>{lang}blog.entry.comments.count{/lang}</span>
                        <meta itemprop="interactionType" content="http://schema.org/CommentAction">
                        <meta itemprop="userInteractionCount" content="{@$entry->comments}">
                    </li>
                {/if}

                {event name='contentHeaderMetaData'}
            </ul>
            
            <meta itemprop="mainEntityOfPage" content="{$canonicalURL}">
            <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="{PAGE_TITLE|phrase}">
                <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
                    <meta itemprop="url" content="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}">
                </div>
            </div>
        </div>
        
        {hascontent}
            <nav class="contentHeaderNavigation">
                <ul>
                    {content}
                        {event name='contentHeaderNavigation'}
                    {/content}
                </ul>
            </nav>
        {/hascontent}
    </header>
{/capture}

{capture assign='headContent'}
    <link rel="canonical" href="{link application='blog' controller='Entry' object=$entry}{/link}">
    {if MODULE_AMP}
        <link rel="amphtml" href="{link application='blog' controller='EntryAmp' object=$entry}{/link}">
    {/if}
{/capture}

{capture assign='sidebarRight'}
    {if $entry->getLeafCategories()|count}
        <section class="box">
            <h2 class="boxTitle">{lang}blog.entry.categories{/lang}</h2>
            
            <div class="boxContent">
                <ul>
                    {foreach from=$entry->getLeafCategories() item=category}
                        <li><a href="{link application='blog' controller='BlogEntryList' object=$entry->getBlog()}categoryID={@$category->categoryID}{/link}" class="jsTooltip" title="{lang}blog.entry.categorizedEntries{/lang}">{$category->getTitle()}</a></li>
                    {/foreach}
                </ul>
            </div>
        </section>
    {/if}
    
    {include file='blogArchive' application='blog'}
    
    {if $tags|count}
        <section class="box">
            <h2 class="boxTitle">{lang}wcf.tagging.tags{/lang}</h2>
            
            <div class="boxContent">
                <ul class="tagList">
                    {foreach from=$tags item=tag}
                        <li><a href="{link controller='Tagged' object=$tag}objectType=com.woltlab.blog.entry{/link}" class="jsTooltip tag" title="{lang}wcf.tagging.taggedObjects.com.woltlab.blog.entry{/lang}">{$tag->name}</a></li>
                    {/foreach}
                </ul>
            </div>
        </section>
    {/if}
    
    {event name='boxes'}
{/capture}

{include file='header'}

{if !$entry->isPublished && !$entry->isDraft}
    <p class="info" role="status">{lang}blog.entry.delayedPublication{/lang}</p>
{/if}

{assign var='objectID' value=$entry->entryID}
<article class="section blogEntry" aria-labelledby="entryTitle{@$entry->entryID}">
    <div class="section articleImageContainer" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
        {assign var=coverPhotoImage value=$entry->getCoverPhotoImage()}
        
        <figure class="contentCoverPhotoImage">
            <div class="contentCoverPhotoImageWrapper"><img src="{@$coverPhotoImage->getUrl()}" alt=""></div>
        </figure>
        <meta itemprop="url" content="{$coverPhotoImage->getUrl()}">
        <meta itemprop="width" content="{@$coverPhotoImage->getWidth()}">
        <meta itemprop="height" content="{@$coverPhotoImage->getHeight()}">
    </div>
    
    <div class="section message{if $entry->isDeleted} messageDeleted{/if}{if $entry->isDisabled} messageDisabled{/if}{if $entry->getUserProfile()->userOnlineGroupID} userOnlineGroupMarking{@$entry->getUserProfile()->userOnlineGroupID}{/if}"
        {@$__wcf->getReactionHandler()->getDataAttributes('com.woltlab.blog.likeableEntry', $entry->entryID)}
        data-is-deleted="{@$entry->isDeleted}" data-is-disabled="{@$entry->isDisabled}" data-is-featured="{@$entry->isFeatured}"
        data-can-view-deleted-entry="{if $__wcf->session->getPermission('mod.blog.canViewDeletedEntry')}true{else}false{/if}" data-can-trash-entry="{if $entry->canTrash()}true{else}false{/if}" data-can-restore-entry="{if $entry->canRestore()}true{else}false{/if}" data-can-delete-entry="{if $__wcf->getSession()->getPermission('mod.blog.canDeleteEntry')}true{else}false{/if}" data-can-edit-entry="{if $entry->canEdit()}true{else}false{/if}" data-can-moderate-entry="{if $__wcf->getSession()->getPermission('mod.blog.canModerateEntry')}true{else}false{/if}">
        
        <div class="messageContent">
            <div class="messageBody">
                {if $entry->getPoll()}
                    {include file='poll' poll=$entry->getPoll()}
                {/if}
                
                {event name='beforeMessageText'}
                
                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>
                
                {event name='afterMessageText'}
            </div>
            
            <footer class="messageFooter">
                {include file='attachments'}
                
                {if $entry->getUserProfile()->showSignature()}
                    <div class="messageSignature">
                        <div>{@$entry->getUserProfile()->getSignature()}</div>
                    </div>
                {/if}
                
                {event name='messageFooter'}
                
                <div class="messageFooterNotes">
                    {if $entry->canEdit() && $entry->hasOldVersions()}
                        <p class="blogEntryEditNote messageFooterNote"><a href="{link controller='EditHistory' objectType='com.woltlab.blog.entry' objectID=$entry->entryID}{/link}">{lang}blog.entry.hasOldVersions{/lang}</a></p>
                    {/if}
                    
                    {if $entry->getDeleteNote()}
                        <p class="blogEntryDeleteNote messageFooterNote">{@$entry->getDeleteNote()}</p>
                    {/if}
                    
                    {event name='messageFooterNotes'}
                </div>
                
                <div class="messageFooterGroup">
                    {if MODULE_LIKE && $entryLikeData|isset}{include file="reactionSummaryList" reactionData=$entryLikeData objectType="com.woltlab.blog.likeableEntry" objectID=$entry->entryID}{/if}
                    
                    <ul class="messageFooterButtons buttonList smallButtons">
                        {if $entry->canEdit()}<li><a href="{link application='blog' controller='EntryEdit' id=$entry->entryID}{/link}" class="button jsButtonEntryInlineEditor" title="{lang}blog.entry.edit{/lang}"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>{/if}
                        <li>
                            <a href="{$entry->getLink()}" class="button wsShareButton jsOnly" data-link-title="{$entry->getTitle()}">
                                <span class="icon icon16 fa-share-alt"></span> <span>{lang}wcf.message.share{/lang}</span>
                            </a>
                        </li>
                        {if !VISITOR_USE_TINY_BUILD || $__wcf->user->userID}<li class="jsQuoteMessage" data-object-id="{@$entry->entryID}" data-is-quoted="{if $__quoteFullQuote|isset && $entry->entryID|in_array:$__quoteFullQuote}1{else}0{/if}"><a rel="nofollow" href="{link application='blog' controller='EntryAdd' quoteMessageID=$entry->entryID}{/link}" title="{lang}wcf.message.quote.quoteMessage{/lang}" class="button jsTooltip{if $__quoteFullQuote|isset && $entry->entryID|in_array:$__quoteFullQuote} active{/if}"><span class="icon icon16 fa-quote-left"></span> <span class="invisible">{lang}wcf.message.quote.quoteMessage{/lang}</span></a></li>{/if}
                        {if $__wcf->session->getPermission('user.profile.canReportContent')}<li class="jsReportEntry jsOnly" data-object-id="{@$entry->entryID}"><a href="#" title="{lang}wcf.moderation.report.reportContent{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.moderation.report.reportContent{/lang}</span></a></li>{/if}
                        {if MODULE_USER_INFRACTION && $userProfile->userID && $__wcf->session->getPermission('mod.infraction.warning.canWarn') && !$userProfile->getPermission('mod.infraction.warning.immune')}<li class="jsWarnEntry jsOnly" data-object-id="{@$entry->entryID}" data-user-id="{@$userProfile->userID}"><a href="#" title="{lang}wcf.infraction.warn{/lang}" class="button jsTooltip"><span class="icon icon16 fa-gavel"></span> <span class="invisible">{lang}wcf.infraction.warn{/lang}</span></a></li>{/if}
                        {if $entry->canReact()}<li><a href="#" class="reactButton jsTooltip button{if $entryLikeData[$entry->entryID]|isset && $entryLikeData[$entry->entryID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $entryLikeData[$entry->entryID]|isset && $entryLikeData[$entry->entryID]->reactionTypeID}{$entryLikeData[$entry->entryID]->reactionTypeID}{else}0{/if}"><span class="icon icon16 fa-smile-o"></span> <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>{/if}
                        {event name='messageFooterButtons'}
                    </ul>
                </div>
            </footer>
        </div>
    </div>
</article>

{if $nextEntry || $previousEntry}
    <div class="section blogEntryNavigation">
        <nav>
            <ul>
                {if $previousEntry}
                    <li class="blogPreviousEntryButton">
                        <a href="{link application='blog' controller='Entry' object=$previousEntry}{/link}" rel="prev">
                            <div>
                                <span class="blogEntryNavigationEntityName">{lang}blog.entry.previousEntry{/lang}</span>
                                <span class="blogEntryNavigationEntryTitle">{$previousEntry->subject}</span>
                            </div>
                        </a>
                    </li>
                {/if}
                
                {if $nextEntry}
                    <li class="blogNextEntryButton">
                        <a href="{link application='blog' controller='Entry' object=$nextEntry}{/link}" rel="next">
                            <div>
                                <span class="blogEntryNavigationEntityName">{lang}blog.entry.nextEntry{/lang}</span>
                                <span class="blogEntryNavigationEntryTitle">{$nextEntry->subject}</span>
                            </div>
                        </a>
                    </li>
                {/if}
            </ul>
        </nav>
    </div>
{/if}

{event name='beforeComments'}

{if $entry->enableComments}
    {if $commentList|count || $commentCanAdd}
        <section id="comments" class="section sectionContainerList">
            <h2 class="sectionTitle">{lang}wcf.global.comments{/lang}{if $entry->comments} <span class="badge">{#$entry->comments}</span>{/if}</h2>
            
            {include file='__commentJavaScript' commentContainerID='blogEntryCommentList'}
            
            <ul id="blogEntryCommentList" class="commentList containerList" data-can-add="{if $commentCanAdd}true{else}false{/if}" data-object-id="{@$entryID}" data-object-type-id="{@$commentObjectTypeID}" data-comments="{if $entry->comments}{@$commentList->countObjects()}{else}0{/if}" data-last-comment-time="{@$lastCommentTime}">
                {if $commentCanAdd}{include file='commentListAddComment' wysiwygSelector='blogEntryCommentListAddComment'}{/if}
                {include file='commentList'}
            </ul>
        </section>
    {/if}
{/if}
{* ENDE: ORIGINALCODE *}
{* START: HACK *}
<script data-relocate="true">
  document.addEventListener("DOMContentLoaded", function() {
    var messageTexts = document.querySelectorAll(".messageText");

    messageTexts.forEach(function(messageText) {
      var textContent = messageText.innerText;
      if (textContent.length > 500) {
        var shortText = textContent.substr(0, 600) + '...';
        var blurText = textContent.substr(700);
        var shortBlurText = blurText.substr(0, 700) + '...';
        messageText.innerHTML = shortText + '<span class="blogPlusblur">' + shortBlurText + '</span>';
        var paywallWrapper = document.createElement("div");
        paywallWrapper.id = "blogPlus-wrapper";
        paywallWrapper.innerHTML = '<h1>+Blog</h1><p>Um diesen +Blog lesen zu können, ist eine Mitgliedschaft vorausgesetzt.</p><p><br /></p><p><a class="button buttonPrimary" href="https://example.com/subscribe">Subscribe Today!</a></p>';
        messageText.appendChild(paywallWrapper);
        var blurSections = messageText.querySelectorAll('.blogPlusblur');
        if (blurSections.length > 0) {
          var lastBlurSection = blurSections[blurSections.length-1];
          var paywallWrapperHeight = paywallWrapper.offsetHeight;
          lastBlurSection.style.marginBottom = "-" + (paywallWrapperHeight / 2) + "px";
          paywallWrapper.querySelector(".button").addEventListener("click", function(event) {
          });
          var gradient = document.createElement("div");
          gradient.classList.add("gradient");
          lastBlurSection.appendChild(gradient);
        }
      }
    });
  });
</script>
{* ENDE: HACK *}
  {/if}
  {else}
{* START: ORIGINALCODE *}
{capture assign='contentHeader'}
    <header class="contentHeader messageGroupContentHeader blogEntryHeader{if $entry->isDisabled} messageDisabled{/if}{if $entry->isDeleted} messageDeleted{/if}">
        <div class="contentHeaderIcon">
            {@$entry->getUserProfile()->getAvatar()->getImageTag(64)}
            
            {event name='icons'}
        </div>
        
        <div class="contentHeaderTitle">
            <h1 class="contentTitle" id="entryTitle{@$entry->entryID}">
                {if $entry->isFeatured}
                    <span class="badge label green jsLabelFeatured">{lang}blog.entry.featured{/lang}</span>
                {/if}
                {if $entry->isDraft}
                    <span class="badge">{lang}blog.entry.draft{/lang}</span>
                {/if}
                {if $entry->isNew()}<span class="badge label">{lang}wcf.message.new{/lang}</span>{/if}
                <span itemprop="name headline">{$entry->subject}</span>
            </h1>
            
            <ul class="inlineList contentHeaderMetaData">
                <li itemprop="author" itemscope itemtype="http://schema.org/Person">
                    <span class="icon icon16 fa-user"></span>
                    {if $entry->userID}
                        <a href="{$entry->getUserProfile()->getLink()}" class="userLink" data-user-id="{@$entry->userID}" itemprop="url">
                            <span itemprop="name">{@$entry->getUserProfile()->getFormattedUsername()}</span>
                        </a>
                    {else}
                        <span itemprop="name">{$entry->username}</span>
                    {/if}
                </li>
                
                <li>
                    <span class="icon icon16 fa-clock-o"></span>
                    <span><a href="{link application='blog' controller='Entry' object=$entry}{/link}" class="permalink">{@$entry->time|time}</a></span>
                    <meta itemprop="datePublished" content="{@$entry->time|date:'c'}">
                    <meta itemprop="dateModified" content="{@$entry->time|date:'c'}">
                </li>
                
                {if $entry->views}
                    <li>
                        <span class="icon icon16 fa-eye"></span>
                        {lang}blog.entry.views.count{/lang}
                    </li>
                {/if}
                
                {if $entry->comments}
                    <li itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
                        <span class="icon icon16 fa-comments"></span>
                        <span>{lang}blog.entry.comments.count{/lang}</span>
                        <meta itemprop="interactionType" content="http://schema.org/CommentAction">
                        <meta itemprop="userInteractionCount" content="{@$entry->comments}">
                    </li>
                {/if}

                {event name='contentHeaderMetaData'}
            </ul>
            
            <meta itemprop="mainEntityOfPage" content="{$canonicalURL}">
            <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="{PAGE_TITLE|phrase}">
                <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
                    <meta itemprop="url" content="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}">
                </div>
            </div>
        </div>
        
        {hascontent}
            <nav class="contentHeaderNavigation">
                <ul>
                    {content}
                        {event name='contentHeaderNavigation'}
                    {/content}
                </ul>
            </nav>
        {/hascontent}
    </header>
{/capture}

{capture assign='headContent'}
    <link rel="canonical" href="{link application='blog' controller='Entry' object=$entry}{/link}">
    {if MODULE_AMP}
        <link rel="amphtml" href="{link application='blog' controller='EntryAmp' object=$entry}{/link}">
    {/if}
{/capture}

{capture assign='sidebarRight'}
    {if $entry->getLeafCategories()|count}
        <section class="box">
            <h2 class="boxTitle">{lang}blog.entry.categories{/lang}</h2>
            
            <div class="boxContent">
                <ul>
                    {foreach from=$entry->getLeafCategories() item=category}
                        <li><a href="{link application='blog' controller='BlogEntryList' object=$entry->getBlog()}categoryID={@$category->categoryID}{/link}" class="jsTooltip" title="{lang}blog.entry.categorizedEntries{/lang}">{$category->getTitle()}</a></li>
                    {/foreach}
                </ul>
            </div>
        </section>
    {/if}
    
    {include file='blogArchive' application='blog'}
    
    {if $tags|count}
        <section class="box">
            <h2 class="boxTitle">{lang}wcf.tagging.tags{/lang}</h2>
            
            <div class="boxContent">
                <ul class="tagList">
                    {foreach from=$tags item=tag}
                        <li><a href="{link controller='Tagged' object=$tag}objectType=com.woltlab.blog.entry{/link}" class="jsTooltip tag" title="{lang}wcf.tagging.taggedObjects.com.woltlab.blog.entry{/lang}">{$tag->name}</a></li>
                    {/foreach}
                </ul>
            </div>
        </section>
    {/if}
    
    {event name='boxes'}
{/capture}

{include file='header'}

{if !$entry->isPublished && !$entry->isDraft}
    <p class="info" role="status">{lang}blog.entry.delayedPublication{/lang}</p>
{/if}

{assign var='objectID' value=$entry->entryID}
<article class="section blogEntry" aria-labelledby="entryTitle{@$entry->entryID}">
    <div class="section articleImageContainer" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
        {assign var=coverPhotoImage value=$entry->getCoverPhotoImage()}
        
        <figure class="contentCoverPhotoImage">
            <div class="contentCoverPhotoImageWrapper"><img src="{@$coverPhotoImage->getUrl()}" alt=""></div>
        </figure>
        <meta itemprop="url" content="{$coverPhotoImage->getUrl()}">
        <meta itemprop="width" content="{@$coverPhotoImage->getWidth()}">
        <meta itemprop="height" content="{@$coverPhotoImage->getHeight()}">
    </div>
    
    <div class="section message{if $entry->isDeleted} messageDeleted{/if}{if $entry->isDisabled} messageDisabled{/if}{if $entry->getUserProfile()->userOnlineGroupID} userOnlineGroupMarking{@$entry->getUserProfile()->userOnlineGroupID}{/if}"
        {@$__wcf->getReactionHandler()->getDataAttributes('com.woltlab.blog.likeableEntry', $entry->entryID)}
        data-is-deleted="{@$entry->isDeleted}" data-is-disabled="{@$entry->isDisabled}" data-is-featured="{@$entry->isFeatured}"
        data-can-view-deleted-entry="{if $__wcf->session->getPermission('mod.blog.canViewDeletedEntry')}true{else}false{/if}" data-can-trash-entry="{if $entry->canTrash()}true{else}false{/if}" data-can-restore-entry="{if $entry->canRestore()}true{else}false{/if}" data-can-delete-entry="{if $__wcf->getSession()->getPermission('mod.blog.canDeleteEntry')}true{else}false{/if}" data-can-edit-entry="{if $entry->canEdit()}true{else}false{/if}" data-can-moderate-entry="{if $__wcf->getSession()->getPermission('mod.blog.canModerateEntry')}true{else}false{/if}">
        
        <div class="messageContent">
            <div class="messageBody">
                {if $entry->getPoll()}
                    {include file='poll' poll=$entry->getPoll()}
                {/if}
                
                {event name='beforeMessageText'}
                
                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>
                
                {event name='afterMessageText'}
            </div>
            
            <footer class="messageFooter">
                {include file='attachments'}
                
                {if $entry->getUserProfile()->showSignature()}
                    <div class="messageSignature">
                        <div>{@$entry->getUserProfile()->getSignature()}</div>
                    </div>
                {/if}
                
                {event name='messageFooter'}
                
                <div class="messageFooterNotes">
                    {if $entry->canEdit() && $entry->hasOldVersions()}
                        <p class="blogEntryEditNote messageFooterNote"><a href="{link controller='EditHistory' objectType='com.woltlab.blog.entry' objectID=$entry->entryID}{/link}">{lang}blog.entry.hasOldVersions{/lang}</a></p>
                    {/if}
                    
                    {if $entry->getDeleteNote()}
                        <p class="blogEntryDeleteNote messageFooterNote">{@$entry->getDeleteNote()}</p>
                    {/if}
                    
                    {event name='messageFooterNotes'}
                </div>
                
                <div class="messageFooterGroup">
                    {if MODULE_LIKE && $entryLikeData|isset}{include file="reactionSummaryList" reactionData=$entryLikeData objectType="com.woltlab.blog.likeableEntry" objectID=$entry->entryID}{/if}
                    
                    <ul class="messageFooterButtons buttonList smallButtons">
                        {if $entry->canEdit()}<li><a href="{link application='blog' controller='EntryEdit' id=$entry->entryID}{/link}" class="button jsButtonEntryInlineEditor" title="{lang}blog.entry.edit{/lang}"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>{/if}
                        <li>
                            <a href="{$entry->getLink()}" class="button wsShareButton jsOnly" data-link-title="{$entry->getTitle()}">
                                <span class="icon icon16 fa-share-alt"></span> <span>{lang}wcf.message.share{/lang}</span>
                            </a>
                        </li>
                        {if !VISITOR_USE_TINY_BUILD || $__wcf->user->userID}<li class="jsQuoteMessage" data-object-id="{@$entry->entryID}" data-is-quoted="{if $__quoteFullQuote|isset && $entry->entryID|in_array:$__quoteFullQuote}1{else}0{/if}"><a rel="nofollow" href="{link application='blog' controller='EntryAdd' quoteMessageID=$entry->entryID}{/link}" title="{lang}wcf.message.quote.quoteMessage{/lang}" class="button jsTooltip{if $__quoteFullQuote|isset && $entry->entryID|in_array:$__quoteFullQuote} active{/if}"><span class="icon icon16 fa-quote-left"></span> <span class="invisible">{lang}wcf.message.quote.quoteMessage{/lang}</span></a></li>{/if}
                        {if $__wcf->session->getPermission('user.profile.canReportContent')}<li class="jsReportEntry jsOnly" data-object-id="{@$entry->entryID}"><a href="#" title="{lang}wcf.moderation.report.reportContent{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.moderation.report.reportContent{/lang}</span></a></li>{/if}
                        {if MODULE_USER_INFRACTION && $userProfile->userID && $__wcf->session->getPermission('mod.infraction.warning.canWarn') && !$userProfile->getPermission('mod.infraction.warning.immune')}<li class="jsWarnEntry jsOnly" data-object-id="{@$entry->entryID}" data-user-id="{@$userProfile->userID}"><a href="#" title="{lang}wcf.infraction.warn{/lang}" class="button jsTooltip"><span class="icon icon16 fa-gavel"></span> <span class="invisible">{lang}wcf.infraction.warn{/lang}</span></a></li>{/if}
                        {if $entry->canReact()}<li><a href="#" class="reactButton jsTooltip button{if $entryLikeData[$entry->entryID]|isset && $entryLikeData[$entry->entryID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $entryLikeData[$entry->entryID]|isset && $entryLikeData[$entry->entryID]->reactionTypeID}{$entryLikeData[$entry->entryID]->reactionTypeID}{else}0{/if}"><span class="icon icon16 fa-smile-o"></span> <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>{/if}
                        {event name='messageFooterButtons'}
                    </ul>
                </div>
            </footer>
        </div>
    </div>
</article>

{if $nextEntry || $previousEntry}
    <div class="section blogEntryNavigation">
        <nav>
            <ul>
                {if $previousEntry}
                    <li class="blogPreviousEntryButton">
                        <a href="{link application='blog' controller='Entry' object=$previousEntry}{/link}" rel="prev">
                            <div>
                                <span class="blogEntryNavigationEntityName">{lang}blog.entry.previousEntry{/lang}</span>
                                <span class="blogEntryNavigationEntryTitle">{$previousEntry->subject}</span>
                            </div>
                        </a>
                    </li>
                {/if}
                
                {if $nextEntry}
                    <li class="blogNextEntryButton">
                        <a href="{link application='blog' controller='Entry' object=$nextEntry}{/link}" rel="next">
                            <div>
                                <span class="blogEntryNavigationEntityName">{lang}blog.entry.nextEntry{/lang}</span>
                                <span class="blogEntryNavigationEntryTitle">{$nextEntry->subject}</span>
                            </div>
                        </a>
                    </li>
                {/if}
            </ul>
        </nav>
    </div>
{/if}

{event name='beforeComments'}

{if $entry->enableComments}
    {if $commentList|count || $commentCanAdd}
        <section id="comments" class="section sectionContainerList">
            <h2 class="sectionTitle">{lang}wcf.global.comments{/lang}{if $entry->comments} <span class="badge">{#$entry->comments}</span>{/if}</h2>
            
            {include file='__commentJavaScript' commentContainerID='blogEntryCommentList'}
            
            <ul id="blogEntryCommentList" class="commentList containerList" data-can-add="{if $commentCanAdd}true{else}false{/if}" data-object-id="{@$entryID}" data-object-type-id="{@$commentObjectTypeID}" data-comments="{if $entry->comments}{@$commentList->countObjects()}{else}0{/if}" data-last-comment-time="{@$lastCommentTime}">
                {if $commentCanAdd}{include file='commentListAddComment' wysiwygSelector='blogEntryCommentListAddComment'}{/if}
                {include file='commentList'}
            </ul>
        </section>
    {/if}
{/if}
{* ENDE: ORIGINALCODE *}
{/if}
<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.Infraction{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}"></script>
<script data-relocate="true">
    $(function() {
        WCF.Language.addObject({
            'blog.entry.delete': '{jslang}blog.entry.delete{/jslang}',
            'blog.entry.delete.confirmMessage': '{jslang}blog.entry.delete.confirmMessage{/jslang}',
            'blog.entry.delete.success': '{jslang}blog.entry.delete.success{/jslang}',
            'blog.entry.disable': '{jslang}blog.entry.disable{/jslang}',
            'blog.entry.enable': '{jslang}blog.entry.enable{/jslang}',
            'blog.entry.restore': '{jslang}blog.entry.restore{/jslang}',
            'blog.entry.trash': '{jslang}blog.entry.trash{/jslang}',
            'blog.entry.trash.confirmMessage': '{jslang}blog.entry.trash.confirmMessage{/jslang}',
            'blog.entry.trash.reason': '{jslang}blog.entry.trash.reason{/jslang}',
            'blog.entry.setAsFeatured': '{jslang}blog.entry.setAsFeatured{/jslang}',
            'blog.entry.unsetAsFeatured': '{jslang}blog.entry.unsetAsFeatured{/jslang}',
            'blog.entry.featured': '{jslang}blog.entry.featured{/jslang}',
            'wcf.moderation.report.reportContent': '{jslang}wcf.moderation.report.reportContent{/jslang}',
            'wcf.moderation.report.success': '{jslang}wcf.moderation.report.success{/jslang}',
            'wcf.infraction.warn': '{jslang}wcf.infraction.warn{/jslang}',
            'wcf.infraction.warn.success': '{jslang}wcf.infraction.warn.success{/jslang}',
            'wcf.message.bbcode.code.copy': '{jslang}wcf.message.bbcode.code.copy{/jslang}',
            'wcf.message.status.disabled': '{jslang}wcf.message.status.disabled{/jslang}',
            'wcf.message.status.deleted': '{jslang}wcf.message.status.deleted{/jslang}'
        });
        
        var $inlineEditor = new Blog.Entry.InlineEditor('.message');
        $inlineEditor.setRedirectURL('{link application='blog' controller='BlogList' encode=false}{/link}', 'entry');
        
        {if $__wcf->session->getPermission('user.profile.canReportContent')}
            new WCF.Moderation.Report.Content('com.woltlab.blog.entry', '.jsReportEntry');
        {/if}
        
        {if MODULE_USER_INFRACTION && $__wcf->session->getPermission('mod.infraction.warning.canWarn')}
            new WCF.Infraction.Warning.Content('com.woltlab.blog.warnableEntry', '.jsWarnEntry');
        {/if}
    });
    
    require(["WoltLabSuite/Blog/Ui/Entry/Quote"], ({ UiEntryQuote }) => {
        {include file='__messageQuoteManager' wysiwygSelector='text' supportPaste=false}
        new UiEntryQuote($quoteManager);
    });
</script>

{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
    <script data-relocate="true">
        require(['WoltLabSuite/Core/Ui/Reaction/Handler'], function(UiReactionHandler) {
            new UiReactionHandler('com.woltlab.blog.likeableEntry', {
                // selectors
                containerSelector: '.message'
            });
        });
    </script>
{/if}

{include file='footer'}

Display More

Der Originale Code aus dem Blog-entry-Template ist immer zwischen {* START: ORIGINALCODE *} und {* ENDE: ORIGINALCODE *} zu finden.

Das einzige was ich hinzugefügt habe, sind folgende Dinge.

If/else- Abfrage

Mit {if $entry->entryID == 1} {* > ENTRYS *} frage ich die ID des Artikels ab. Das kann dann später mit weiteren IDs erweitert werden, die als Paywall dienen sollen. Weitere IDs würde so aussehen: {if $entry->entryID == 1 || $entry->entryID == 2} {* > ENTRYS *}

Mit {if 6|in_array:$__wcf->user->getGroupIDs()} {* > USERGROUP ACEPTED *} frage ich zusätzlich die Benutzergruppe ab, die den Zugriff haben soll. Das kann man sehr gut mit Bezahlte Mitgliedschaften verknüpfen. Auch hier kann man später bei bedarf mehrere Benutzergruppen hinzufügen.

Und dann habe ich mit Mühe und Not ein Javascript und Stylesheet zusammengebastelt, was dann für die Ansicht (Siehe Bilder) sorgt.

JavaScript

  document.addEventListener("DOMContentLoaded", function() {
    var messageTexts = document.querySelectorAll(".messageText");

    messageTexts.forEach(function(messageText) {
      var textContent = messageText.innerText;
      if (textContent.length > 500) {
        var shortText = textContent.substr(0, 600) + '...';
        var blurText = textContent.substr(700);
        var shortBlurText = blurText.substr(0, 700) + '...';
        messageText.innerHTML = shortText + '<span class="blogPlusblur">' + shortBlurText + '</span>';
        var paywallWrapper = document.createElement("div");
        paywallWrapper.id = "blogPlus-wrapper";
        paywallWrapper.innerHTML = '<h1>+Blog</h1><p>Um diesen +Blog lesen zu können, ist eine Mitgliedschaft vorausgesetzt.</p><p><br /></p><p><a class="button buttonPrimary" href="https://example.com/subscribe">Subscribe Today!</a></p>';
        messageText.appendChild(paywallWrapper);
        var blurSections = messageText.querySelectorAll('.blogPlusblur');
        if (blurSections.length > 0) {
          var lastBlurSection = blurSections[blurSections.length-1];
          var paywallWrapperHeight = paywallWrapper.offsetHeight;
          lastBlurSection.style.marginBottom = "-" + (paywallWrapperHeight / 2) + "px";
          paywallWrapper.querySelector(".button").addEventListener("click", function(event) {
          });
          var gradient = document.createElement("div");
          gradient.classList.add("gradient");
          lastBlurSection.appendChild(gradient);
        }
      }
    });
  });

Display More

CSS

/* Text mit dem Blur-Effekt für die ersten 500 Zeichen*/
.blogPlusblur {
  filter: blur(4px);
  position: relative;
  z-index: 1;
}

#blogPlus-wrapper {
padding: 5px;
border-radius: 5px;
position: relative;
margin-bottom: 30px;
box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.2);
background-color: #3F4F60;
border-color: #12876f;
color: #38D7B7;
}
   #blogPlus-wrapper * {
      text-align: center;
   }

Display More

Es wird nach 600 Zeichen ein Blur-Effeckt auf den Rest der Textes eingeleitet. Der Blurtext selber besitzt in dem Fall 700 Zeichen

Der Button kann dann selbst verlinkt und beschriftet werden

HTML

<a class="button buttonPrimary" href="https://example.com/subscribe">Subscribe Today!</a>

Würde mich freuen, mit Interessierte vielleicht etwas schöneres daraus zu formen.

Denn alleine {* START: ORIGINALCODE *} und {* ENDE: ORIGINALCODE *} kommen insgesamt drei mal vor, anders habe ich es nicht geschafft das andere Artikel-IDs für jeden frei zugänglich sind. Wahrscheinlich habe ich auch einige Logik-Fehler dabei und freue mich über jede Idee und Anregung.

Die bisherige Logik soll sein:

Prüfe ob Blog-Artikel (ID) freigegeben ist, sonst Blur
Prüfe ob User in Benutzergruppe (ID) vorhanden ist, sonst Blur
Alle anderen Artikel sollen für jeden lesbar sein

mfg

doerek · May 8, 2023 at 3:48 PM

Guten Abend,

Ohne den hier betriebenen Aufwand schmälern zu wollen, denn Ich finde solche selbstgebauten Methoden immer klasse...

Aber was hindert den fortgeschrittenen User daran den Blur-Effekt per DEV-Tools zu deaktivieren?

Mfg

Hundiiiiiiiiii · May 8, 2023 at 5:48 PM

Teste das mal. Ersetze:

HTML

                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>

durch:

Smarty

{if $entry->entryID == 1} {* > ENTRYS *}
  {if 6|in_array:$__wcf->user->getGroupIDs()} {* > USERGROUP ACEPTED *}
  <div class="messageText messageTextBlur">
      {if MODULE_WCF_AD}
          {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
      {/if}
      
      {@$entry->getFormattedMessage()|truncate:500}
  </div>  
  {/if}    
{else}
<div class="messageText">
    {if MODULE_WCF_AD}
        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
    {/if}
    
    {@$entry->getFormattedMessage()}
</div>
{/if}

Display More

dann schauen Schnorrer wie doerek in die Röhre 👀

Display Spoiler

Schbass doerek, ich gucke bei Paywalls gelegentlich auch in den Code 🥸

Sunny C. · May 9, 2023 at 8:33 AM

Quote from doerek

Aber was hindert den fortgeschrittenen User daran den Blur-Effekt per DEV-Tools zu deaktivieren?

Das weis ich leider nicht, aber sowas wie Hundiiiiiiiiii geschrieben hat, hilft dann eher. Die, die sich das selbst mit den Dev-Tools abschalten wollen, sehe ja trotzdem zuvor die +Blog-Meldung und wenn sie es abschalten, dann sehen sie generell nurnoch 500 Zeichen, so wie ich das jetzt verstanden habe.

Quote from Hundiiiiiiiiii

Teste das mal. Ersetze:

HTML

                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>

durch:

Smarty

{if $entry->entryID == 1} {* > ENTRYS *}
  {if 6|in_array:$__wcf->user->getGroupIDs()} {* > USERGROUP ACEPTED *}
  <div class="messageText messageTextBlur">
      {if MODULE_WCF_AD}
          {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
      {/if}
      
      {@$entry->getFormattedMessage()|truncate:500}
  </div>  
  {/if}    
{else}
<div class="messageText">
    {if MODULE_WCF_AD}
        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
    {/if}
    
    {@$entry->getFormattedMessage()}
</div>
{/if}

Display More

dann schauen Schnorrer wie doerek in die Röhre 👀

Display Spoiler

Schbass doerek, ich gucke bei Paywalls gelegentlich auch in den Code 🥸

Wo genau soll das ersetzt werden? Da wo der Hack also das Javascript greifen soll?
Wenn ich das so ersetze wie du geschrieben hast, bekommt der User, der nicht die Berechtigung hat, gar keinen Text mehr angezeigt.

Zurvor wird ja generell geprüft, welche ID der Artikel hat. Wenn die ID nicht stimmt (Kein +Blog Artikel), wird alles normal ausgegeben. Wenn die ID stimmt, wird weiter geprüft ob der User in der richtigen Benutzergruppe ist, sollte das nicht der Fall sein, wird die +Blog-Meldung ausgegeben.

Jetzt aber eine doofe Frage, wie kann ich denn zum testen gezielt den Paywallhack abschalten als User?

Hundiiiiiiiiii · May 9, 2023 at 10:08 AM

Ich habs jetzt nicht getestet, der relevante Teil in meinem Code ist diese Zeile:

Code

{@$entry->getFormattedMessage()|truncate:500}

wie du ja erkannt hast. Wenn du das in deinen Hack noch einbaust, dann passt es ja so weit und du kannst dir den JS-Teil komplett sparen und mit CSS eine kleine Blende einbauen die den Text dezent ausblendet.

Sunny C. · May 9, 2023 at 11:02 AM

Ok, interessant.

Ich werde das nachher mal testen.

DANKE!

**Tim Düsterhus** · May 9, 2023 at 11:18 AM Official Post

Hallo,

zu den eigentlichen Änderungen habe ich keine Kommentare, weil das in dem Riesentemplate kaum zu durchblicken ist. Ich würde dir aber bei solch umfangreichen Änderungen empfehlen, dass du dein Template entweder in einem Versionskontrollsystem speicherst (git) oder zumindest jeweils eine „Diff-Datei“ erzeugst. Auf diese Weise sind nur exakt die Unterschiede leicht zu erkennen, das macht es auch für die Mitleser einfacher

Sunny C. · May 9, 2023 at 11:43 AM

Ich habe leider keine Erfahrungen davon. Dieses git scheint von Github zu sein?

Und wie erzeuge ich eine Diff-Datei? Ich habe mir Visual Studio Code geladen.

In jedem Fall spiele ich heute noch einmal an allem Rum

Hundiiiiiiiiii · May 9, 2023 at 11:46 AM

Im Prinzip reicht es ja aus wenn du dich um diese Stelle kümmerst:

Smarty

                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>

und das mit deiner Abfrage modifizierst, zum Beispiel für Gäste gekürzt:

Smarty

                {if $__wcf->user->userID}
                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>
                {else}
                <div class="messageText messageTextPaywall">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}            
                {@$entry->getFormattedMessage()|truncate:500}
                </div>
                {/if}

Display More

Du kannst das JS ja auch weiter verwenden, sieht mit dem Blur ja auch ganz nett aus.

**Tim Düsterhus** · May 9, 2023 at 11:47 AM Official Post

Hallo,

Quote from SunnyCue

Dieses git scheint von Github zu sein?

Das ist ein klares Jein: git ist ein Versionskontrollsystem und GitHub ist effektiv ein Webspace für sogenannte git-Repositorys. Ein git-Repository ist effektiv eine Datenbank.

Quote from SunnyCue

Und wie erzeuge ich eine Diff-Datei? Ich habe mir Visual Studio Code geladen.

Probier das hier vielleicht: https://vscode.one/diff-vscode/

Sunny C. · May 9, 2023 at 12:05 PM

Quote from Hundiiiiiiiiii

{if $__wcf->user->userID}

Aber ich muss ja zusätzlich die Abfrage {if $entry->entryID == 1} sowie {if 6|in_array:$__wcf->user->getGroupIDs()} verwenden, damit dies ja weiterhin auf die richtigen Artikel sowie Benutzergruppe berücksichtigt wird.

Quote from Hundiiiiiiiiii

Du kannst das JS ja auch weiter verwenden, sieht mit dem Blur ja auch ganz nett aus.

Melde mich dann wieder, wenn ich ein bisschen rumprobiert habe. Danke für die Anregungen.

**Tim Düsterhus** · May 9, 2023 at 12:07 PM Official Post

Hallo,

Quote from SunnyCue

Aber ich muss ja zusätzlich die Abfrage {if $entry->entryID == 1} sowie {if 6|in_array:$__wcf->user->getGroupIDs()} verwenden, damit dies ja weiterhin auf die richtigen Artikel sowie Benutzergruppe berücksichtigt wird.

Dafür definierst du dir dann besser Hilfsvariablen, wenn du die Prüfung an mehr als einer Stelle brauchst.

Smarty

{assign var='isRestrictedPlusArticle' value=false}
{if $entry->entryID == 1 && !6|in_array:$__wcf->user->getGroupIDs()}
  {assign var='isRestrictedPlusArticle' value=true}
{/if}

{* Und später dann *}

{if $isRestrictedPlusArticle}
  Hier Paywall.
{else}
  Hier regulär.
{/if}

Display More

Hundiiiiiiiiii · May 9, 2023 at 12:09 PM

Das war ja nur ein Beispiel, das sollst du natürlich auf deine Bedürfnisse anpassen.

Sunny C. · May 9, 2023 at 7:16 PM

Ich habe mir das nun so umgesetzt und das ganze funktioniert bisher ohne Javascript Hundiiiiiiiiii

Ich habe nun ein paar Fragen.

Wie erweitere ich folgende Zeile um weitere entry-ids und ggf. weitere Benutzergruppen?

{if $entry->entryID == 1 && !6|in_array:$__wcf->user->getGroupIDs()}

Weitere Entry-IDs kann ich wohl so hinzufügen: $entry->entryID == 1 && $entry->entryID == 2 && [...]
Weitere Benutzergruppen so?: !6|in_array:$__wcf->user->getGroupIDs() && !4|in_array:$__wcf->user->getGroupIDs()

Ich habe mich gefragt, damit die Code-Zeile nicht zu lang wird, ob man die Entry-IDs sowie Usergroup-IDs auch in sowas wie eine Variable mit Kommar speichern- und somit dann einfach erweitern kann? Tim Düsterhus

Das andere ist, dass ich den Text nun so kürze

HTML

{@$entry->getFormattedMessage()|truncate:500}

Am liebsten würde ich zusätzlich den Text nochmal ausgeben, aber mit dem Blur-Effeckt

HTML

<span class="blogPlusblur"{@$entry->getFormattedMessage()|truncate:700}</span>

Das wird offenbar ignoriert. Das Span ist im Quelltext dann verschoben. Darum habe ich dann überlegt das Span mit Lorem ipsum zu füllen, was aber denke ich, eher unschön ist.

Und letztendlich setze ich den Paywall-Wrapper drunter, damit die Meldung angezeigt wird

HTML

<div id="blogPlus-wrapper"><h1>+Blog</h1><p>Um diesen +Blog lesen zu können, ist eine Mitgliedschaft vorausgesetzt.</p><p><br></p><p><a class="button buttonPrimary" href="https://example.com/subscribe">Subscribe Today!</a></p></div>

Stylesheet

CSS

/* Text mit dem Blur-Effekt für die ersten 500 Zeichen*/
.blogPlusblur {
    filter: blur(4px);
    position: relative;
    z-index: 1;
}


#blogPlus-wrapper {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #12876f;
    position: relative;
    box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.2);
    background-color: #3F4F60;
    color: #38D7B7;
    text-align: center;
}

Display More

GANZER CODE

HTML

                {* PAYWALL HACK START*}
                {assign var='isRestrictedPlusArticle' value=false}
                {if $entry->entryID == 1 && !6|in_array:$__wcf->user->getGroupIDs()}
                      {assign var='isRestrictedPlusArticle' value=true}
                {/if}
                
                {if $isRestrictedPlusArticle}
                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()|truncate:500}
                    <span class="blogPlusblur">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
                    <div id="blogPlus-wrapper"><h1>+Blog</h1><p>Um diesen +Blog lesen zu können, ist eine Mitgliedschaft vorausgesetzt.</p><p><br></p><p><a class="button buttonPrimary" href="https://example.com/subscribe">Subscribe Today!</a></p></div>
                </div>
                {else}
                <div class="messageText">
                    {if MODULE_WCF_AD}
                        {@$__wcf->getAdHandler()->getAds('com.woltlab.blog.entry.inEntryMessage')}
                    {/if}
                    
                    {@$entry->getFormattedMessage()}
                </div>
                {/if}
                {* PAYWALL HACK ENDE*}

Display More

Obwohl das ganze nun ohne Javascript auskommt, scheint es optisch fast genauso zu wirken.

norse · May 9, 2023 at 7:36 PM

Quote from SunnyCue

Weitere Entry-IDs kann ich wohl so hinzufügen: $entry->entryID == 1 && $entry->entryID == 2 && [...]
Weitere Benutzergruppen so?: !6|in_array:$__wcf->user->getGroupIDs() && !4|in_array:$__wcf->user->getGroupIDs()

Hier wird jeweils eine oder-Verknüpfung benötigt.

Gruß norse

Hundiiiiiiiiii · May 9, 2023 at 11:32 PM

Du hast da eine schließende Klammer ">" nach der Klasse vergessen:

HTML

<span class="blogPlusblur"{@$entry->getFormattedMessage()|truncate:700}</span>

So wäre es richtig:

HTML

<span class="blogPlusblur">{@$entry->getFormattedMessage()|truncate:700}</span>

Sunny C. · May 10, 2023 at 7:31 AM

Quote from Hundiiiiiiiiii
Du hast da eine schließende Klammer ">" nach der Klasse vergessen:
HTML
getFormattedMessage()|truncate:700}
So wäre es richtig:
HTML
{@$entry->getFormattedMessage()|truncate:700}

Das funktioniert leider nicht

HTML

                    {@$entry->getFormattedMessage()|truncate:500}
                    <span class="blogPlusblur">{@$entry->getFormattedMessage()|truncate:700}</span>

Sobald ich 2x @$entry->getFormattedMessage() im Code verwende, spinnt es. Das <span bleibt dann leer. Darum habe ich ja dieses lorem ipsum genommen.

HTML

{@$entry->getFormattedMessage()|truncate:500}
                    <span class="blogPlusblur">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>

Das funktioniert dann, warum auch immer.

Quote from norse

Hier wird jeweils eine oder-Verknüpfung benötigt.

Das verstehe ich nicht, kannst du ein Beispiel geben?

**Tim Düsterhus** · May 10, 2023 at 9:10 AM Official Post

Hallo,

Quote from SunnyCue

Das <span bleibt dann leer.

Das liegt daran, dass das  keine Blockelemente aufnehmen darf.

Sunny C. · May 10, 2023 at 9:26 AM

Ok verstehe, mit einem <div> ging es dann.

Ist sowas denn möglich?

Quote from SunnyCue

Ich habe mich gefragt, damit die Code-Zeile nicht zu lang wird, ob man die Entry-IDs sowie Usergroup-IDs auch in sowas wie eine Variable mit Kommar speichern- und somit dann einfach erweitern kann? Tim Düsterhus

Und das habe ich auch noch nicht ganz verstanden, was damit gemeint ist.

Quote from norse

Hier wird jeweils eine oder-Verknüpfung benötigt.

**Tim Düsterhus** · May 10, 2023 at 9:41 AM Official Post

Hallo,

Quote from SunnyCue

Ist sowas denn möglich?

schon die aktuelle Version ist etwas, das nicht mehr unbedingt in einem Template untergebracht werden sollte. Eine Erweiterung um mehrere Benutzergruppen ist dann endgültig etwas, bei dem richtiger PHP-Code zum Einsatz kommen sollte, schon der Lesbarkeit halber.

Rein im Template kannst du aber, wie von norse genannt, die einzelnen Gruppenbedingungen mit „oder“ verknüpfen, das wird aber weder schön noch besonders effizient.

Der Ganze Inhalt muss mit folgendem ersetzt werden:

Participate now!