Се­год­ня сде­лал несколь­ко важ­ных пер­вых из­ме­не­ний во внеш­нем виде бло­жич­ка: подп­ра­вил кое-что по ти­по­гра­фи­ке и вклю­чил рен­де­ринг ма­тема­ти­че­ских фор­мул, как вот та­кая, на­при­мер:$f (x)= \sum\limits_{k=0}^{n} \frac{f^{(k)}(a)}{k! }(x-a)^k+\Big (\frac{x-a}{x-\xi}\Big)^p\frac{(x-\xi)^{n+1}}{n! p}f^{n+1}(\xi)$ Кому ин­те­рес­но в по­дроб­но­стях — доб­ро по­жа­ло­вать под кат!

На за­мет­ку: этот блог ра­бо­та­ет на ста­ти­че­ском ге­не­ра­то­ре Hexo с за­ме­ча­тель­ной бес­плат­ной те­мой Tranquilpeak. Та­кую ком­би­на­цию я вы­брал ис­клю­чи­тель­но по­то­му, что хо­тел со­брать нечто до­ста­точ­но функ­ци­о­наль­ное в ко­рот­кое вре­мя и с воз­мож­но­стью до­пи­ли­вать по мере необ­хо­ди­мо­сти. Ста­ти­че­ских ге­не­ра­тор Hexo ра­бо­та­ет на Node.js, а зна­чит, мне не со­ста­вит тру­да разо­брать­ся в его ра­бо­те и до­пи­лить то, что тре­бу­ет­ся, а тема мне про­сто по­нра­ви­лась сво­им внеш­ним ви­дом и функ­ци­о­наль­но­стью. Од­на­ко, и над ней при­шлось немно­го по­ра­бо­тать.

Со­дер­жа­ние

1. Труд­но­сти пе­ре­во­да
2. Фильтр для ти­по­гра­фи­ки
3. Тег для ма­тема­ти­ки

Труд­но­сти пе­ре­во­да

Пер­вое, что мож­но за­ме­тить в ори­ги­наль­ной теме — сла­бая под­держ­ка рус­ско­го язы­ка. На­при­мер, шриф­ты ос­нов­но­го тек­ста не со­дер­жат ки­рил­ли­че­ско­го на­бо­ра, так что рус­ский текст вы­гля­дит ка­ка­шеч­кой:

Вот так вы­гля­дит Merriweather с фоллб­эком в Times

Очень быст­ро по­лу­чи­лось най­ти ме­сто в SCSS темы, где им­пор­ти­ру­ют­ся шриф­ты, вы­гля­де­ло оно при­мер­но та­ким об­ра­зом:

1
2
3
4
5
6
7
8

@font-face {
    font-family: 'Merriweather';
    font-style:  normal;
    font-weight: 400;
    src:         local('Merriweather'), 
        url(https://fonts.gstatic.com/s/merriweather/v8/RFda8w1V0eDZheqfcyQ4EJS3E-kSBmtLoNJPDtbj2Pk.ttf) 
        format('truetype');
}

Оче­вид­но, шриф­ты под­клю­чают­ся че­рез сер­вис Google Fonts, в дан­ном слу­чае ис­поль­зу­ет­ся шрифт Merriweather, у ко­то­ро­го есть под­клю­ча­е­мый ки­рил­ли­че­ский на­бор — ура!

Если кто-то не зна­ет, то ис­ход­ный текст для под­клю­че­ния гугель-шриф­та че­рез @font-face мож­но по­лу­чить, про­сто прой­дя по ссыл­ке, ко­то­рую сер­вис пред­ла­га­ет для им­пор­та че­рез тег link.

Пре­крас­но, те­перь у нас есть под­держ­ка ки­рил­ли­че­ских сим­во­лов, но текст все еще вы­гля­дит как-то не очень:

Как-то все пух­ло­ва­то, гряз­но­ва­то

Те­перь текст вы­гля­дит так, как он вы­гля­дит. Ре­шил пока не ме­нять гар­ни­ту­ру для ос­нов­но­го тек­ста — она пока меня вполне уст­ра­и­ва­ет, плюс, при­шлось бы (по-хо­ро­ше­му) под­би­рать но­вые шриф­то­вые пары. Воз­мож­но, в бу­ду­щем я по­ме­няю сти­ли еще раз, если за­хо­чет­ся, или если кто-ни­будь, све­ду­щий в ти­по­гра­фи­ке, ска­жет мне, что я му­дак и все де­лаю не так. По­смот­рим.

Фильтр для ти­по­гра­фи­ки

Еще одна вещь, ко­то­рая меня не уст­ра­и­ва­ла — об­щая неопрят­ность тек­ста. В моем бло­жи­ке со­бра­лись все мыс­ли­мые греш­ки веб-ти­по­гра­фи­ки:

• де­фис вме­сто длин­но­го тире;
• немец­кие ка­выч­ки-лап­ки вме­сто фран­цуз­ских «ело­чек»;
• обыч­ные про­бе­лы с пред­ло­га­ми, со­ю­за­ми и тире;
  ну и вся­кое та­кое раз­ное.

Все эти про­бле­мы обыч­но ре­ша­ют­ся ав­то­ма­ти­че­ски­ми тул­за­ми, ко­то­рые про­бе­га­ют­ся по тек­сту и ис­прав­ля­ют все непра­виль­ные зна­ки, на пра­виль­ные — ти­по­граф сту­дии Ле­бе­де­ва — от­лич­ный при­мер та­кой тул­зы.

Од­на­ко каж­дый раз про­го­нять текст че­рез веб-ин­тер­фейс руч­ка­ми — это от­стой и гов­но, у меня же есть ста­ти­че­ский ге­не­ра­тор, ко­то­рый дол­жен де­лать это за меня! Нуж­но толь­ко на­пи­сать фильтр, ко­то­рый бу­дет про­хо­дить по тек­стам моих по­стов и на­во­дить кра­со­ту. По­сколь­ку я ис­поль­зую ге­не­ра­тор, на­пи­сан­ный на JavaScript, я могу ис­поль­зо­вать лю­бую го­то­вую биб­лио­теч­ку-ти­по­граф из npm — Typograf от­лич­но для это­го по­до­шел.

Уста­но­вив эту биб­лио­теч­ку в Tranquilpeak я без тру­да на­пи­сал нуж­ный фильтр:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// /themes/tranquilpeak/scripts/typo.js
( function () {
  const typo = function (source) {
    const Typograph = require('typograf'),
        config = this.config.typographer,
        lang = (config.lang !== undefined) ? config.lang : 'en',
        typo = new Typograph({
          'lang': 'ru',
          'mode': 'name'
        }),
        result = typo.execute(source);
    return result;
  };
  hexo.extend.filter.register('after_render:html', typo);
}() );

За­тем скон­фи­гу­ри­ро­вал всю эту муть в _config.yml:

1
2
3
4
5

# _config.yml
typographer:
    enable: true
    lang: 'ru'

Те­перь я даже могу за­му­тить «ви­ся­чую пунк­ту­а­цию», как на Medium, если вре­мя бу­дет! Кру­та­те­нюш­ки!

Тег для ма­тема­ти­ки

Цель про­стая — сде­лать так, что­бы раз­мет­ка на язы­ке TeX вида:

1

f(x) = \sin \Big(\frac{2\pi x}{16} \Big)

пре­вра­ща­лась в чи­та­е­мую фор­му­лу вида:
$f (x) = \sin \Big (\frac{2\pi x}{16} \Big)$ и же­ла­тель­но, без лиш­не­го уча­стия с моей сто­ро­ны. Ин­лай­но­вые фор­му­лы, вро­де $\psi (x)=A\cos (\theta x)$ тоже, же­ла­тель­но долж­ны ра­бо­тать.

Это мож­но ре­а­ли­зо­вать с по­мо­щью до­пол­ни­тель­но­го тега, ре­ги­стра­цию ко­то­рых в Hexo неслож­но сде­лать. Един­ствен­ное усло­вие — к теме до­ба­вит­ся еще одна но­вая за­ви­си­мость: биб­лио­те­ка KaTeX, раз­ра­бо­тан­ная Khan Academy, ко­то­рая бу­дет пре­об­ра­зо­вы­вать раз­мет­ку на язы­ке TeX в чи­та­бель­ные фор­му­лы.

Теги объ­яв­ля­ют­ся в со­от­вет­ству­ю­щей папоч­ке на­шей темы:

1
2
3
4
5
6
7
8
9

const katex = require('katex');
hexo.extend.tag.register('katex', (args, content) => {
  const mode = args[0] && args[0] === "true" ? true : false;
  return katex.renderToString(content, {
    displayMode: mode
  });
}, {ends: true});

Наш тег от­прав­ля­ет од­ним необя­за­тель­ным па­ра­мет­ром ре­жим отоб­ра­же­ния: если пе­ре­дать зна­че­ние true, то фор­му­ла бу­дет отрен­де­ре­на с цен­три­ро­ва­ни­ем и как блок, если false или ни­че­го — то пря­мо в стро­ке.

Те­перь TeXовые фор­му­лы бу­дут на ста­дии ге­не­ра­ции пре­вра­ще­ны в HTML-раз­мет­ку. Оста­лост толь­ко под­клю­чить сти­ли (ссыл­ка на них идет в ком­плек­те с KaTeX), и мож­но поль­зо­вать­ся.

По­ня­тия не имею, сколь­ко вре­ме­ни я на это по­тра­тил, и надо ли оно ваще