|
|
+ }* p+ T a6 C+ U/ A; G
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:1 a( S$ H7 u, u1 \3 j$ J
3 B1 m) T3 T& T, F1 u' p, Y7 k
1.下载主题文件+ I& c2 i3 s' o) E" x) W
5 |, ~5 Y, V: \# A* @在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。# x7 e6 s+ W) |* G! [6 J
1 n+ q9 |" b+ Q2.创建 Typecho 主题目录. g: Y9 t: L, w- H2 I
% m* T, A" G2 O: L7 A5 w7 e" |
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
5 r4 b2 r7 l8 F1 E7 m- r0 g) p1 e9 S" z; x/ h
3.解压主题文件7 j: Q8 S) o. l2 I% P
+ u6 h4 y- u/ q1 l将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
: G- w; o R4 E
( i& n7 |7 R- ]( U/ U n" S' Lassets/. _! d! \+ [+ s! I) I8 H1 ~
dist/' S' v& g/ G. ?2 N# l5 [5 z) d0 F
inc/
) W$ Y4 S3 V$ j3 gnode_modules/
, n7 H/ m( t+ Y6 }partials// H* [: |. M- F1 C. D6 R9 ?+ n" b
templates/
L; A- d! t" a& B: Y3 ?.babelrc
8 g7 F0 ~2 H& h7 w) D" Z.eslintrc.js% y2 B' ?# o6 w- t6 L# c% O
gulpfile.js$ @9 S9 f* w; d* Z/ n1 M
package.json+ A3 N& D- k! S! k9 P' }9 K
webpack.config.js
! T/ Z. V1 D( f. d4.修改主题样式表文件
7 G& |) G7 L% d+ C* c
3 d. i! u1 e) z2 M8 G, h0 N修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
2 I% q" k5 F/ F% k
$ p. O ?/ ?3 Tcss
" V# j2 i" S0 A! Vbackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');, v. r* M( O: [! z* B* x u
修改为:
g& x; S. e* h- p$ f/ o, X8 r
css
/ a: K8 Z2 ~; {" ^4 {+ T0 s: ybackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
6 }; h% |+ Y* ]+ Z5.创建 Typecho 主题配置文件
" x2 Z; o8 d1 k8 h
5 Q/ p1 J7 o9 X \0 y4 R在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
, F6 [, k/ O' b0 d u+ j7 C" a z1 R3 N& G: l) U- s
php
% N# _1 Q* k, T5 R# X<?php; v& j& p1 B) U/ X: U/ y
return array(/ R# s, `, M1 h0 P' n% f
'name' => 'Heropress Pro',
! G( `% x4 @ }0 d 'description' => 'Typecho adaptation of Heropress Pro theme',9 ^" l6 N: l+ I! e
'version' => '1.0',
9 f. f8 c. G# e& |5 r* Q 'author' =>'Your Name',* [( H: S+ \4 u4 U# f1 S
);5 U( Y2 x$ I3 E3 I5 U
6.配置主题布局文件& t) a4 U% i" z" d9 B4 H
1 |& b" i; U9 d0 i( Q1 O$ V在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:/ @ X. c% R7 g1 e/ }
; b0 [; y- ~. D) |7 Sphp8 b' D, D' h" r/ C9 y
<?php while ($this->next()): ?>3 M* m# j$ T! i+ q7 q
<div class="post">
) [5 t- I- U, x# I( e6 w+ M <h2 class="post-title">
2 P4 h! g @$ i- r0 E+ n% ?7 v <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
* s6 `8 \& K6 k6 z( a! @% t </h2>
4 b4 Q: K, A) t/ A6 D <div class="post-meta">
% ^& t$ ^: N3 h6 a b9 o' C <span><?php $this->date('F j, Y'); ?></span>7 z% e+ w; T0 v( |$ f
<?php if($this->tags): ?>/ ]1 l6 i; e. I: R. c5 S* a- I
<span class="post-tags">( e( Z# ]3 ]8 j/ a' o+ t' h- ?
<?php $this->tags(', ', true, 'none'); ?>+ M1 ~ }! e# n w" N
</span>" A9 S$ x* a+ W( z) z" \
<?php endif; ?>
0 f' P, }/ x* A0 H </div>4 I, [. s3 Y3 b9 f, J; a
<div class="post-content"> j0 s6 e. _& Q0 `" s5 n$ m
<?php $this->content('Read more »'); ?>
: S: b- F1 E& m- h7 D& [ </div>: e- }4 E5 r( t1 Y- _
</div>7 }0 A% w9 K* O" H( i& t* d7 U
<?php endwhile; ?>. P8 |7 N p* ^) k3 {4 X* b
7.调用 Typecho 函数
6 {7 Y/ z8 U- I8 S) x4 O/ {; q r" f2 r% {& `
在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:9 z" Q1 g; q" r3 \0 N7 I
& Z: g; z/ e- M$ K( ^7 M% [7 M, v/ |用 the_title() 替换 get_the_title()。2 ]7 q' R7 R% n3 g9 b; z
, m# v, y( o5 {# g( z5 O
用 the_permalink() 替换 get_permalink()。
+ C+ P2 k( R3 T, M1 x1 ^ b+ L1 k |- y7 f' O: }0 d' L* ^; A
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。1 F# \' e( o; Z4 a! d
/ g5 Y$ ^ ~6 q* l
用 $this->content('Read more »'); 替换 the_content('Read more »')。
! O; N$ D! Y+ ?! C3 ~8 M/ J F1 o3 R* ^( |3 N1 b/ u3 w9 ]$ k
8.添加 Typecho 标记6 f; W$ C' g9 o; H
, \/ o# W+ p+ K/ N
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
/ o- T7 C9 l4 ]
/ \+ _$ M' P' Tphp' M/ P. h8 ~6 L; O& i% c8 @9 c. q$ C
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
! M2 f5 H- Z& S. O X<?php $this->need('header.php'); ?>
5 N% F# y d5 z0 ?' b0 p<div id="main" class="container">
1 _/ @+ s2 [# w# C <div id="content" class="row">
# k, d, ?% e( N9 s <?php while ($this->next()): ?>3 m! N/ W; T3 X- y
<div class="col-md-8 col-md-offset-2">1 {+ m4 e" S" O
<div class="post">
- l ^* @2 p/ U# r/ [3 z <h2 class="post-title">
/ Z. s$ R8 o' G( X2 \3 H <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>, f) |- ~1 a, ?
</h2>- L2 n0 S" q# C$ q, v
<div class="post-meta">
5 R. C# Z G! j+ E5 Q6 S! K; T <span><?php $this->date('F j, Y'); ?></span># d6 r7 ^: I3 @9 a2 P3 [5 v7 }
<?php if($this->tags): ?>8 `) {5 o, J/ Z: r! f
<span class="post-tags">
^7 I3 d5 f9 F3 |: b: Z <?php $this->tags(', ', true, 'none'); ?>
: X- q) {; _; u, p </span>
! W! k5 ~' N- k! X6 ]: J <?php endif; ?>4 } L2 R' U; h: E( v' h* q
</div>: I; ^' Z: U, x* z# [ { d
<div class="post-content">3 C6 h& c, X7 U2 R
<?php $this->content('Read more »'); ?>
5 J' Y7 x4 `1 r) p </div>
9 c* v/ h' _, ?# A* @7 F* y- Q+ I$ R( y </div>
& t( p* l& w% z5 B, x. g: S9 J </div>7 n! G. o9 g5 P% G1 [1 L3 E
<?php endwhile; ?>
$ m; x2 g# m$ |$ c6 N9 R! g: D; W </div>
$ F8 g5 q$ s# i' j9 u F1 c) r</div>
" @5 D, q @9 O9 V3 E# \ h" O<?php $this->need('footer.php'); ?>7 V; P( J" D( m- p5 w4 v9 s
9.调整其他可能需要的文件和代码
) ?$ Y, [& `# o o0 l4 z5 F, F9 V) b2 O' L5 p- I8 H
根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:' y! C& K; D. j7 ]# O
" u6 R N. N: I
html" g* j6 z+ V g% t8 f6 X
<title><?php $this->archiveTitle(array(
# y+ k3 L& N+ _" ^) { 'category' => _t('%s'),
: @( C, U/ a0 P' m3 e% g" d6 R5 S 'search' => _t('Search "%s"'),
! m, E) Y- K, E7 Y* Z! P 'tag' => _t('Tag "%s"'),5 Z9 N( _* I# Y- N R1 m* b
'author' => _t('Author "%s"'),1 S5 o9 B- C& l! y: O. h
'date' => _t('Archive "%s"'),
) }: ^9 M1 K# X2 Y* u+ c 'default' => ''3 G4 u- K: N$ g1 F& n) `9 o
), '', ' - '); ?><?php $this->options->title(); ?>
. v+ {1 N9 Q4 x4 }</title>
) h+ e9 w+ d3 p7 ?3 O10.使用主题
; `( ?$ B7 H' N0 r/ x3 l" g8 m& @2 u: i7 r' }/ H8 C% w" U
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
7 k% T' J+ r8 S& s1 d$ B* d2 X( B2 v$ a% g: [
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
" Y1 P& a0 w8 j) w3 Q+ j
9 [( x. S3 P' ` |
|