301 URL tracker Umbraco

Dziś będzie o bardzo przydatnej paczce do umbraco, więc jeśli potrzebujesz łatwego zarządzania przekierowaniami linków to powinieneś zainteresować się URL trackerem.

Post będzie krótki, ale mam nadzieję, że przydatny J Url Tracker to rozszerzenie do Back Office umbraco, które pozwala na łatwe zarządzanie linkami wewnątrz aplikacji, gdy np. chcemy stworzyć przekierowania na stronę jakiegoś konkursu, albo po prostu mamy starą strukturę strony i chcemy przekierować na nowe linki.

Po wejściu na zakładkę Content, mamy do dyspozycji dodatkowy Tab, „Url Tracker”

Po kliknięciu przycisku „Create”, możemy stworzyć nowe przekierowanie. Najpierw zajmijmy się sekcją Requred:

Z pomocą kombinacji RootNode oraz Old URL decydujemy, jaki link ma być przekierowany na inny za pomocą tego narzędzia. Opcjonalnie, możemy również dodać wymagane parametry w linku. Możemy także skorzystać z wyrażeń regularnych i w takim przypadku wszystkie linki spełniające to wyrażenie regularne zostaną przekierowane.

Następnie w Redirect Node możemy wybrać noda, do którego użytkownik ma zostać przekierowany (link zostanie pobrany z właściwości tego noda) lub wpisać samodzielnie URL.

W sekcji Optional, należy zdecydować czy redirect jest permanentny (301) czy tymczasowy (302). Jeżeli przeglądarka, jako zwrot otrzyma 302 będzie sprawdzać czy przekierowanie nadal jest, natomiast przy 301 przeglądarka zapamiętuje to i przy kolejnej próbie wejścia na link, który zwrócił 301, automatycznie jesteśmy przekierowani na odpowiednią stronę bez pytania serwera.

Po stworzeniu linka, możemy zobaczyć go w overview wszystkich naszych redirectów.

Jeszcze jedną bardzo przydatną funkcjonalnością jest „404 Not found view” dostępny po naciśnięciu guzika z takim napisem w zakładce trackera. Zawiera listę wszystkich requestów, które zwróciły 404, wiec możemy sprawdzić gdzie użytkownik próbował się dostać. Z poziomu tego widoku możemy od razu stworzyć redirect do linka, który np. bardzo często się powtarza, a domyślamy się gdzie użytkownik próbował się dostać.

Pozdrawiam, Kamil.

Pobieranie Contentu z Umbraco część 1

Pobieranie Contentu z Umbraco część 1

Ten post będzie pierwszym postem z cyklu jak pobierać content, który dodaliśmy w Back Office w naszym kodzie C#. Dziś opiszę jak znaleźć interesujący nas node w contencie umbraco.

Jedną z opcji, którą bardzo często wykorzystuję, jest pobieranie contentu za pomocą Controllerów. Całą operację przedstawię za pomocą podstrony, która wyświetla wszystkie posty otagowane danym tekstem. Aby móc skorzystać z tej metody, musimy stworzyć dowolny Document Type i zapamiętać jego alias.

Teraz przechodzimy do kodu i tworzymy Controller dziedziczący po RenderMvcController i nazywamy go [Nasz alias doc typu]Controller i overridujemy metodę Index

    
    public class TagController : RenderMvcController
    {
        public override ActionResult Index(RenderModel model)
        {
            var content = model.Content;
        }
    }

W parametrze metody, możemy sięgnąć po IPublishedContent poprzez property o nazwie Content. Z kolei z niego, możemy wyciągnąć wszelkie inne teksty, bądź dzieci w drzewku contentu, więcej o tym będzie w części drugiej.

Innym sposobem na dojście do interesującego nas noda w drzewku, jest pobranie jego rodziców, którzy znajdują się w „korzeniu” i znalezienie interesujących nas rzeczy np. poprzez Linq. Ja w ten sposób pobieram wszystkie posty. Przejdźmy więc do kodu. W projekcie umbraco, mamy możliwość skorzystania z UmbracoHelper-a, który zawiera mnóstwo przydatnych rzeczy, a także zcachowaną zawartość naszego contentu.  Myślę, że dobrym pomysłem będzie stworzenie klasy, która zawiera statyczną property pobierającą ten Helper z kontekstu umbraco. To przykład mojej klasy:

    
    public class NodeHelper
    {
        private static UmbracoHelper _umbracoHelper;

        public static UmbracoHelper Umbraco => _umbracoHelper ?? (_umbracoHelper = new UmbracoHelper(UmbracoContext.Current));       
    }

Po stworzeniu takiej klasy, możemy pobrać Root Node naszego contentu.

    
       var rootNodes = NodeHelper.Umbraco.TypedContentAtRoot();

Korzystając z metody TypedContentAtRoot, otrzymujemy listę wszystkich „korzeni” w naszej aplikacji.

Struktura postów w moim projekcie wygląda następująco: Posty -> Kategoria -> Post

Aby pobrać wszystkie nody zawierające posty, muszę najpierw w Roocie wybrać te Posty, a z nich wziąć wszystkie dzieci ich dzieci. Spłaszczymy tym nieco strukturę, pomijając kategorie, a wybierając same artykuły. W kodzie można to załatwić następująco:

    
      var articlesRootNode = rootNodes.First(x => x.DocumentTypeAlias == "articlesRoot");
      var allArticles = articlesRootNode.Children.SelectMany(x => x.Children).ToList();

W zmiennej allArticles, mam listę typu IPublishedContent, z której mogę wyciągnąć interesujące mnie dane na temat postów. Do pobierania contenu możemy także wykorzystać ContentService. Nie jest to jednak zalecane, jeśli chcemy jedynie czytać dane, ponieważ ContentService odpytuje bezpośrednio bazę danych, a UmbracoHelper, jak już wspomniałem na początku, nie.

To już koniec części pierwszej. W kolejnej opiszę, w jaki sposób możemy wyciągać teksty i inne properties, które mamy w umbraco, a możemy je dodać do Document typ-ów.

404 w umbraco

404 w umbraco

Każda witryna powinna mieć swoją wersję strony 404. Wyświetla się ona, gdy użytkownik jest na właściwej domenie, jednak próbuje wyświetlić nieistniejącą podstronę. W tym poście opiszę, jak taką stronę utworzyć w umbraco.

Na początek zalogujmy się do Back Office umbraco i stwórzmy nową stronę. Zadbajmy także o to, aby mogła ona być poprawnie wygenerowana przez umbraco. W moim przypadku wiązało się to z dodaniem nowego contentu typu „Page” i dodanie do niego sekcji, które mają zostać wyświetlone na tej stronie.

Po utworzeniu i sprawdzeniu czy działa, przejdźmy do zakładki właściwości i skopiujmy sobie ID naszego Noda.

Przechodzimy teraz do naszego projektu umbraco i wyszukujemy plik, umbracoSettings.config w XML-u musimy zmienić zawartość error404 na ID, które skopiowaliśmy z Back Office.

Po przebudowaniu projektu, strona 404 powinna się już poprawnie wyświetlać na lokalnym serwerze. Żeby zadziałała także na hostowanym, musiałem dodać w głównym WebConfigu tę linijkę:

<httpErrors existingResponse="PassThrough" />

Należy to wkleić w sekcji <system.webServer>

Po tej operacji wszystko powinno już śmigać, a po wpisaniu błędnego linka, naszym oczom powinna ukazać się strona 404.

To by było na tyle, dodawanie strony 404 w umbraco jest dość proste.

Pozdrawiam, Kamil.

Dzielenie się postami poprzez „addthis”

Dzielenie się postami poprzez „addthis”

Praktycznie każdy blog posiada ułatwienia do dzielenia się postami z znajomymi. Oczywiście ja także chciałbym mieć taką funkcjonalność w swoim blogu, ale czy muszę to robić od zera? Nie! Podobnie jak z sekcją komentarzy w sieci, możemy znaleźć gotowe rozwiązania popularnych „Share buttons”. Instalacja jest prosta i dziś poprowadzę Cię przez instalacje takich guzików ze strony https://www.addthis.com/

Rejestrujemy się na stronie, po czym naszym oczom ukazują się opcje, które możemy wybrać na stronie. Poza guzikami do dzielenia się, możemy skorzystać także z innych usług, jednak ja skupię się dziś jedynie na nich. Kliknijmy więc „Share Buttons”:

Wybierzmy teraz najbardziej interesujący nas wygląd guzików. Klikając na poszczególne opcje, mamy podgląd na żywo po prawej stronie, w prawym górnym rogu możemy także przełączać się między wersją mobile a zwykłą. Dzięki temu, zanim dodamy to na naszą stronę, widzimy co bierzemy i jak będzie to wyglądać na różnych urządzeniach. Ja wybrałem pierwszy z góry J

Następnie, mamy możliwość konfiguracji wyglądu i zawartości naszego paska z guzikami.

Jeżeli chodzi o „Social Networks” to w przeciwieństwie do tego, co jest napisane, ja rekomenduje wybrać samemu social media, do których guziki mają zostać wygenerowane. Do wyboru jest multum opcji, sprawdźcie, które serwisy was interesują i wybierzcie je J

W zakładce Design, możemy ustawić wygląd naszego paska, ja pozostawiłem to bez zmian, ponieważ domyślny wygląd najbardziej mi odpowiada. Jeżeli Twój blog jest w biało czarnych odcieniach i nie chcesz by guziki raziły w oczy swoimi kolorami, masz opcję by to zmienić właśnie w tym miejscu.

Warto także zajrzeć do sekcji zaawansowanych ustawień. Tu możemy ustawić, na których podstronach guziki mają, bądź nie mają się pojawiać. W jakim momencie layout ma zmienić się na wersję mobilną i od jakiej ilości udostępnień ma się pojawiać licznik pokazujący ich ilość.

Jeśli nie prowadzimy bloga w języku angielskim, warto również ustawić treść wiadomości wyświetlanych użytkownikowi.

Jeżeli jesteśmy już zadowoleni z efektu, klikamy „Continue” i naszym oczom ukażą się opcje, których możemy użyć przy podpinaniu guzików pod nasz serwis. Jako, że nie korzystam z serwisów wymienionych w kartach, wykorzystałem wersję HTML. Jedyne co trzeba teraz zrobić, to wkleić Skrypt na końcu body w naszym serwisie.

To już wszystko na dziś, jak mogliście się przekonać, dodawanie guzików do dzielenia się postem poprzez addthis jest dość proste i intuicyjne.

Pozdrawiam, Kamil

Widok postu, rozwinięcie.

Widok postu, rozwinięcie.

Tym razem o tym, co zmieniło się w widoku postu. Prototyp bloga jest już niemal gotowy. Zostało nieco pracy związanej z SEO. Strona wizualna projektu potrzebuje jedynie ostatnich szlifów i pierwsza wersja będzie gotowa. Z radością przedstawiam także logo mojego projektu:

Zdecydowałem się na treść postu po lewej stronie, a po prawej kolumnę na ¼  szerokości zawierającą dodatkowe informacje. Pierwszą informacją są Tagi, które można kliknąć by przejść do widoku listy wszystkich postów zawierających dany tag. Drugą, lista (aktualnie siedmiu, ale to może ulec zmianie) ostatnich postów z tej samej kategorii, co czytany przez użytkownika. Poniżej listy niedawno dodanych, znajduje się iframe z fanpagu na Facebooku. Na końcu, po treści postu, znajduje się sekcja z komentarzami na całą szerokość strony.

Planuję także stworzyć sekcję z subskrypcją mailingową, ale w pierwszej kolejności mam zamiar dodać całą funkcjonalność, którą posiada obecny „brzydki” blog. Gdy to już się stanie, przepnę domenę i nowe posty będą się już pojawiać na nowej odsłonie bloga, która mam nadzieję, że się Ci spodoba J

Ostatnią rzeczą, którą podłączyłem do bloga, jest możliwość dzielenia się postami na „social mediach” lub mailowo. Nie chcąc budować tego samemu od początku, skorzystałem z gotowej implementacji z https://www.addthis.com/. Guziki do dzielenia się ze znajomymi pojawiają się po lewej stronie, chyba że przeglądamy na małym ekranie - wówczas u dołu. Wygląda to bardzo spójnie i mi osobiście przypadło do gustu. Jak dodać to samodzielnie do własnej strony, opiszę w kolejnym poście.

To już wszystko, co chciałem przekazać w ramach tego posta. Ostatnio skupiam się na implementacji nowych rzeczy, dlatego też nie mam tak dużo czasu na pisanie jak bym chciał.

Pozdrawiam, Kamil.

Tagi, Umbraco Tag Service

Tagi w Umbraco Tag Service

W poprzednim poście opisałem jak zaimplementować do Umbraco możliwość dodawania tagów. Dziś będzie o tym, jak wykorzystać to w kodzie i umożliwić filtracje po tagach.

Aby mieć możliwość pobrania dokumentów z Tagiem o określonej nazwie, potrzebujemy UmbracoHelper’a. Ja stworzyłem klasę, którą wstrzykuję w miejsca gdzie potrzebuję pobrania czegokolwiek dodatkowego z Umbraco, a tak wygląda jej kluczowy element:

    public class UmbracoEventHandler : ApplicationEventHandler
        private static UmbracoHelper _umbracoHelper;

        public UmbracoHelper Umbraco => _umbracoHelper ?? (_umbracoHelper = new UmbracoHelper(UmbracoContext.Current));

Na potrzeby wyświetlania tej listy, utworzyłem nowy kontroler, który jest odpowiedzialny tylko i wyłącznie za to.

    public class UmbracoEventHandler : ApplicationEventHandler
[DonutOutputCache(CacheProfile = "Page.Cache")]
        public override ActionResult Index(RenderModel model)
        {
            var pageViewModel = new PageViewModel();
            var extendedModel = _pageModelExtender.ApplyLayoutToModel(pageViewModel, model.Content);
            var tagName = Request.QueryString["tag"];
            var articles = new List();
            var articlesWithTag = _nodeHelper.Umbraco.TagQuery.GetContentByTag(tagName).ToList();
            var header = $"Posty otagowane {tagName}";
            articlesWithTag.ForEach(article =>
            {
                articles.Add(new ArticleCardViewModel
                {
                    Title = article.GetPropertyValue("title"),
                    ShortDescription = article.GetPropertyValue("shortDescription"),
                    Tags = article.GetPropertyValue("tags").Split(','),
                    CardImage = article.GetImage("cardImage", _nodeHelper).WithQuality(80).WithHeight(160).WithWidth(330).WithCrop(),
                    Url = article.Url
                });
            });
            var modelForArticles = new ArticleListViewModel
            {
                Title = header,
                Articles = articles
            };
            var viewModel = new ArticleByTagViewModel
            {
                Id = extendedModel.Id,
                Title = header,
                Footer = extendedModel.Footer,
                Header = extendedModel.Header,
                Description = "Lista wszystkich postów które zostały otagowane " + tagName,
                ArticlesListModel = modelForArticles
            };
            return View("Tag", viewModel);
        }

Kod odpowiedzialny za pobranie wszystkich dokumentów z określonym tagiem to zmienna „articlesWithTag”. Po drodze tworzę także dodatkowe modele i pakuję w odpowiadającą mi strukturę tak, by widok mógł pozostać czysty.

Nazwę taga, który ma być brany pod uwagę, pobieram z parametru w linku (patrz zmienna „tagName”). Jeżeli chodzi o razora, to reużyłem istniejący widok kart postów, skorzystałem z Section buildera i efekt końcowy jest zadowalający:

Dziś krótko, ale używanie tag service jest dość proste i stwierdziłem, że nie ma co nadmiernie się rozpisywaćJ

Udanej Majówki!

Tagi w Umbraco Back Office

Tagi w Umbraco Back Office

Jedną z bazowych funkcji, które posiada większość blogów, jest możliwość wyświetlania postów po tagach. W tym poście będzie o tym, jak skorzystać z serwisu tagowego w umbraco, aby pobrać i wyświetlić cały content, który został oznaczony określonym Tagiem.

Pierwsza rzecz, którą będziemy potrzebować to możliwość nadania tagów dla określonego typu dokumentów w Umbraco.

Przechodzimy, zatem do Settings -> Document Types i wybieramy interesujący nas DocType, w moim przypadku będzie to „Article”.  Dodajemy nową property i jako typ wybieramy Umbraco.Tags

Przechodzimy teraz do elementu w drzewie contentu. Jak widać, jest teraz możliwość dodawania tagów. Aby dodać nowy, wystarczy wpisać nazwę i kliknąć enter. Jeżeli chcemy dorzucić istniejący, to piszemy początek jego nazwy i możemy dodać go z listy, która się wyświetli:

Sporym ułatwieniem w zarządzaniu tagami na naszej stronie jest rozszerzenie do Umbraco o nazwie „Tag Manager” https://our.umbraco.org/projects/backoffice-extensions/tag-manager/ .

Najprostszym sposobem, aby je zainstalować, będzie pójście do sekcji Developer -> Packages w Back Office Umbraco. Wpisujemy „Tag Manager” i wybieramy ten, który właśnie tak się nazywa ;) Następnie klikamy „Install package”. Po zakończonym procesie instalacji będziemy mieli kolejny tab dostępny w CMS’ie.

Po przejściu do niego, naszym oczom ukaże się drzewo ze wszystkimi tagami, które utworzyliśmy w naszym systemie wraz z informacją ile dokumentów posiada dany tag:

Klikając na konkretny Tag mamy możliwość edycji. Możliwa jest zmiana nazwy oraz przeniesienie otagowanych dokumentów do innego taga, co znacząco ułatwia wszelkiego rodzaju migracje.

Kolejną bardzo przydatną rzeczą jest możliwość przejrzenia wszystkich dokumentów z contentu i mediów. W jednym miejscu widzimy nazwy tych dokumentów i możemy upewnić się czy wszystko jest w porządku. Po kliknięciu w nazwę, przenoszeni jesteśmy bezpośrednio do tego dokumentu i mamy możliwość jego edycji.  To już tyle, jeżeli chodzi o część w back Office Umbraco. Tag Service działa bardzo szybko i wszelkie informacje na ich temat są cachowane. Dzięki temu, wyszukiwanie po tagach działa dobrze i nie trzeba pisać implementacji samodzielnie. W następnym poście pokażę, jak używać Tag Service w kodzie oraz w jaki sposób zaimplementowałem wyświetlanie listy postów po tagach.

Pozdrawiam, Kamil.